Question

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

我的目标是通过JavaScript操作HTML元素，并将一些Jekyll变量放在该元素的内部HTML中。所有内容都使用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，则只需将其复制到站点目录结构中。您的tags.js文件可能不包含任何正面内容，这就是液体标签未被替换的原因。

要让Jekyll替换JavaScript文件中的液体标签，只需在其顶部添加一个前端部分即可。那个前线可能是空的！

---
---
//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操作

2 个答案: