hzo*_*tan 5 javascript dom-manipulation jekyll
我极有可能有错误逻辑,但我只是学习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",那么我在<h2>标记中假设了以下HTML输出(这是我的目标):
<h2>foo</h2>
但相反,它给了我以下内容:
<h2>{{ page.title }}</h2>
我认为这是因为jekyll在jinja格式中呈现变量的值并给出输出,然后我将字符串"{{ page.title }}"放到<h2>标记中.
我确定我错过了一些东西,但如果你在你的某个项目中使用了类似的东西,我会感激任何帮助.
Jekyll只接触有前沿的文件.如果文件不包含frontmatter,则只需将其复制到站点目录结构中.您的tags.js文件可能不包含任何前端问题,这就是液体标签未被替换的原因.
要让Jekyll替换JavaScript文件中的液体标签,只需在其顶部添加一个frontmatter部分即可.那个前线可能是空的!
---
---
//rest of your JavaScript
这将解决Jekyll不替换标签的问题,但是你会遇到另一个问题:当Jekyll在JavaScript中替换标签时,它不会提前知道哪个页面将调用该JavaScript.所以它不知道page.title会是什么!(实际上,它将使用您的JavaScript文件的标题,这可能取决于您的默认设置.)
解决这个问题的一种方法是从JavaScript中删除液体,而只是取一个参数.然后从您的html文件中将该参数传递给JavaScript.该参数可以是液体标签.
| 归档时间： |
|
| 查看次数： |
1690 次 |
| 最近记录： |