如何在 Javascript 文件中包含使用 Jekyll 定义的液体/全局变量？
[英]How do I include liquid/global variables defined using Jekyll in a Javascript file?
问题描述
Currently I'm using Jekyll to build a website, with markdown and html files.
目前我正在使用 Jekyll 构建一个网站，其中包含 markdown 和 html 文件。 If I want to use for example variables defined in the '_data' folder in html/md I can simply use {% for item in site.data.XX %}.例如，如果我想使用在 html/md 的“_data”文件夹中定义的变量，我可以简单地使用 {% for item in site.data.XX %}。 My question is, what is the correct syntax when reaching Jekyll variables (eg site) in Javascript?我的问题是，在 Javascript 中到达 Jekyll 变量（例如站点）时，正确的语法是什么？
I am using frontmatter in my JS file.我在我的 JS 文件中使用 frontmatter。 Should I include something there or do an import?我应该在那里包含一些东西还是进行导入？
I tried:我试过了：
- console.log(site.collections); console.log(site.collections);
- console.log({{site.collections}}); console.log({{site.collections}});
But I just get the errors "Site is not defined" or "Uncaught SyntaxError: Invalid or unexpected token".但我只是收到错误“未定义站点”或“未捕获语法错误：无效或意外令牌”。
3 个解决方案
解决方案1
1 2019-10-23 14:39:38
I just found the problem (you solved it previously David): Jekyll: liquid tag inside javascript我刚刚发现了问题（你之前解决了大卫）： Jekyll:liquid tag inside javascript
It seems like it prints out correctly (without syntax errors) when adding:添加时似乎可以正确打印（没有语法错误）：
console.log({{ site.collections | jsonify }}) console.log({{ site.collections | jsonify }})
解决方案2
0 2019-10-23 10:06:40
Any file with a front-matter will be processed by jekyll...任何带有front-matter的文件都会被jekyll处理...
eg: anyfile-with-front-matter.js例如： anyfile-with-front-matter.js
---
title: my js file
---
console.log({{page.title}});
console.log({{site.description}});
..., except if it is " ignored ". ...，除非它被“忽略”。
By default:默认：
- any underscored folder is ignored (eg: _myfolder)任何带下划线的文件夹都会被忽略（例如：_myfolder）
- node_modules, vendor/bundle/, vendor/cache/, vendor/gems/ and vendor/ruby/ folders are ignored by default configuration默认配置忽略 node_modules、vendor/bundle/、vendor/cache/、vendor/gems/ 和 vendor/ruby/ 文件夹
To make contained files available to process, you can add containing folders to include array in your _config.yml .要使包含的文件可用于处理，您可以添加包含文件夹以在_config.yml中包含数组。
include:
- node_modules
- _myfolder
That's my guess.这是我的猜测。
解决方案3
0 2019-10-23 15:21:47
Jekyll is a static-site-generator that essentially runs just once . Jekyll 是一个静态站点生成器，基本上只运行一次。 The only time it runs continuously is when you invoke either of the following commands: jekyll serve or jekyll build --watch .它唯一一次连续运行是当您调用以下任一命令时： jekyll jekyll serve或jekyll build --watch 。
On the other hand, JavaScript scripts are meant to be run on each request for a given page.另一方面，JavaScript 脚本旨在针对给定页面的每个请求运行。 Unless there's a server running with Jekyll, your scripts won't be able to use the so-called global variables.除非有运行 Jekyll 的服务器，否则您的脚本将无法使用所谓的全局变量。
However, that said, you can still use Jekyll variables to generate a static JS script.但是，话虽如此，您仍然可以使用 Jekyll 变量来生成static JS 脚本。 For example, consider the following contents:例如，考虑以下内容：
./_data/navigation.yml
- label: Home
url: "/"
- label: About Us
url: "/about/"
./_includes/script-template.html
<script>
{% for entry in site.data.navigation %}
console.log('{{ entry.label }}');
{% endfor %}
</script>
./test.html
---
---
<body>
{% include script-template.html %}
</body>
If you were to build the site containing above files, the generated html file ./_site/test.html will look like the following:如果您要构建包含上述文件的站点，生成的 html 文件./_site/test.html将如下所示：
<body>
<script>
console.log('Home');
console.log('About Us');
</script>
</body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.