使用JavaScript到达Jekyll变量并将其传递给DOM操作 [英] Reach Jekyll Variables With JavaScript and Pass it Throught DOM Manipulation
问题描述
很有可能我有错误逻辑，但是我正在学习JavaScript和Jekyll.
Highly possible that I have error logic but I'm just learning both JavaScript and Jekyll.
我的目标是通过JavaScript操作HTML元素，并将一些Jekyll变量放入该元素的内部HTML中.一切都从带有jekyll serve的本地开发目录加载.我尝试了以下方法:
My goal is to manipulate an HTML element through JavaScript and place some Jekyll variable inside the inner HTML of that element. Everything is loading from a local development directory with jekyll serve. I tried the following:
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
I reached the tags.js from the tags.md
例如，如果我的页面标题为"foo"，那么我会在<h2>标记中假定以下HTML输出(这是我的目标):
For example, if my page's title would be "foo", then I assumed the following HTML output in the <h2> tag (this was my goal):
<h2>foo</h2>
但是相反它给了我以下内容:
But instead it gave me the following:
<h2>{{ page.title }}</h2>
我认为发生这种情况是因为jekyll将变量的值呈现为jinja格式并提供给我们输出，然后我将字符串"{{ page.title }}"放置到了<h2>标记中.
I think it happened cause jekyll renders the values of the variables inside the jinja format and gives us the output, and after that I just placed the string "{{ page.title }}" to the <h2> tag.
我肯定会丢失一些东西，但是如果您在一个项目中使用了类似的东西，我将不胜感激.
I'm sure I'm missing something, but if you used something like that in one of your project, I'd appreciate any help.
推荐答案
Jekyll仅涉及具有前题的文件.如果文件不包含前题，则将其盲目复制到站点的目录结构中.您的tags.js文件可能不包含任何前置内容，这就是为什么不替换液体标签的原因.
Jekyll only touches files that have frontmatter. If a file doesn't contain frontmatter, then it is blindly copied into your site's directory structure. Your tags.js file probably doesn't contain any front matter, which is why the liquid tags aren't being replaced.
要让Jekyll替换JavaScript文件中的液体标签，您可以在其顶部添加一个frontmatter部分.那个前题可以是空的！
To get Jekyll to replace liquid tags inside your JavaScript file, you can add a frontmatter section to the top of it. That frontmatter can be empty!
---
---
//rest of your JavaScript
这将解决Jekyll不替换标签的问题，但是您将遇到另一个问题:当Jekyll在JavaScript中替换标签时，它不提前知道哪个页面将调用该JavaScript. .因此它不知道page.title是什么！ (实际上，它将使用您的JavaScript文件的标题，这可能取决于您的默认设置.)
That will fix the problem of Jekyll not replacing the tags, but you're going to have another problem: when Jekyll is replacing the tag in the JavaScript, it doesn't know ahead of time what page will be calling that JavaScript. So it doesn't know what page.title will be! (Actually, it will use the title of your JavaScript file, which probably depends on your default settings.)
解决此问题的一种方法是摆脱JavaScript中的液体，而改为使用参数.然后从您的html文件中，将该参数传递到JavaScript中.该参数可以是液体标签.
One way around this is to get rid of the liquid from your JavaScript, and take a parameter instead. Then from your html file, pass that parameter into the JavaScript. That parameter can be the liquid tag.
这篇关于使用JavaScript到达Jekyll变量并将其传递给DOM操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
