使用 JavaScript 获取 Jekyll 变量并通过 DOM 操作传递它答案

【问题标题】：Reach Jekyll Variables With JavaScript and Pass it Throught DOM Manipulation使用 JavaScript 获取 Jekyll 变量并通过 DOM 操作传递它
【发布时间】：2017-02-12 16:12:37
【问题描述】：

我很可能有错误逻辑，但我只是在学习 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> 标记中。

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

【问题讨论】：

你从哪里加载你的 JavaScript？是来自 Jekyll 服务器还是其他地方？你能告诉我们你的目录结构是什么样的吗？
再次感谢您的评论凯文！一切都是用 jekyll serve 从本地开发目录加载的，我用项目的结构更新了问题。

标签： javascript jekyll dom-manipulation

【解决方案1】：

Jekyll 只涉及包含 frontmatter 的文件。如果文件不包含 frontmatter，则将其原样复制到您站点的目录结构中。您的tags.js 文件可能不包含任何正面内容，这就是没有更换液体标签的原因。

要让 Jekyll 替换 JavaScript 文件中的流动标签，您可以在文件顶部添加一个 frontmatter 部分。前面的内容可以是空的！

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

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

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

【讨论】：

感谢@KevinWorkman，您的回答揭示了一些逻辑，是的，您是对的，我的 tags.js 不包含任何正面内容。一切都按照你上面写的那样工作。我会试试你的建议！

【解决方案2】：

根据@KevinWorkman 的回答，我们补充说：

    ---
    layout: blank
    ---

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

    ---
    ---
    {{content}}

【讨论】：

这对我有用。在添加空白之前，我遇到了使用默认布局处理我的 js 文件的问题。谢谢！