我很可能有错误逻辑,但我刚刚学习 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.js来自tags.md
例如,如果我的页面标题是“foo”,那么我假设以下 HTML 输出在<h2>
tag (这是我的目标):
<h2>foo</h2>
But instead它给了我以下内容:
<h2>{{ page.title }}</h2>
我认为这是因为 jekyll 渲染 jinja 格式中的变量值并给我们输出,然后我只是放置了字符串"{{ page.title }}"
to the <h2>
tag.
我确信我遗漏了一些东西,但是如果您在您的项目之一中使用了类似的东西,我将不胜感激。