使用 JavaScript 访问 Jekyll 变量并通过 DOM 操作传递它

Question

很可能我有错误逻辑，但我只是在学习 JavaScript 和 Jekyll。

我的目标是通过 JavaScript 操作 HTML 元素，并在该元素的内部 HTML 中放置一些 Jekyll 变量。一切都从本地开发目录加载 jekyll serve。我尝试了以下方法：

HTML:

<html>
<body>
<h2>Something</h2>
</body>
</html>

JavaScript:

document.addEventListener("DOMContentLoaded", function () {
    manipulate = document.getElementsByTagName("h2");
    manipulate[0].innerHTML = "{{ page.title }}";
});

结构：

├── _config.yml
├── contact-us.md
├── css
│   └── main.scss
├── feed.xml
├── _includes
│   ├── footer.html
│   ├── header.html
│   ├── head.html
│   ├── readtime.html
│   └── sidebar.html
├── index.html
├── js
│   ├── anchor.js
│   └── tags.js
├── _layouts
│   ├── default.html
│   ├── page.html
│   ├── post.html
│   ├── single.html
│   └── tags.html
├── _posts
├── readme.md
├── _sass
│   ├── _base.scss
│   ├── _layout.scss
│   └── _syntax-highlighting.scss
├── _site
│   └── [...]
└── tags.md

我从 tags.md 到达了 tags.js

例如，如果我的页面标题是 "foo"，那么我假定 <h2> 标签中的以下 HTML 输出（这是我的目标):

<h2>foo</h2>

但是相反它给了我以下内容：

<h2>{{ page.title }}</h2>

我认为这是因为 jekyll 在 jinja 格式中呈现变量的值并给我们输出，之后我只是将字符串 "{{ page.title }}" 放到 <h2> 标签中。

我确定我遗漏了一些东西，但是如果您在您的项目之一中使用了类似的东西，我将不胜感激。

Answer 1

Jekyll 只处理有 frontmatter 的文件。如果文件不包含 frontmatter，则会将其复制 as-is 到您站点的目录结构中。您的 tags.js 文件可能不包含任何前言，这就是未替换 liquid 标签的原因。

要让 Jekyll 替换 JavaScript 文件中的 liquid 标签，您可以在其顶部添加一个 frontmatter 部分。前言可以为空！

---
---
//rest of your JavaScript

这将解决 Jekyll 不替换标签的问题，但是您将遇到另一个问题：当 Jekyll 替换 JavaScript 中的标签时，它事先并不知道什么页面将调用 JavaScript。所以它不知道 page.title 会是什么！（实际上，它将使用您的 JavaScript 文件的标题，这可能取决于您的默认设置。）

解决此问题的一种方法是从您的 JavaScript 中去除液体，并取而代之的是一个参数。然后从您的 html 文件中，将该参数传递给 JavaScript。该参数可以是液体标签。

Answer 2

在@KevinWorkman 的回答之后，我们添加了：

    ---
    layout: blank
    ---

到 .JS 文件，然后创建一个布局文件，blank.html，里面只有这个：

    ---
    ---
    {{content}}

使用 JavaScript 访问 Jekyll 变量并通过 DOM 操作传递它

Reach Jekyll Variables With JavaScript and Pass it Throught DOM Manipulation

javascript

jekyll

dom-manipulation