如何在 Javascript 文件中包含使用 Jekyll 定义的液体/全局变量？答案

【问题标题】：How do I include liquid/global variables defined using Jekyll in a Javascript file?如何在 Javascript 文件中包含使用 Jekyll 定义的液体/全局变量？
【发布时间】：2020-02-19 09:07:55
【问题描述】：

目前我正在使用 Jekyll 构建一个网站，包含 markdown 和 html 文件。例如，如果我想使用在 html/md 的“_data”文件夹中定义的变量，我可以简单地使用 {% for item in site.data.XX %}。我的问题是，在 Javascript 中访问 Jekyll 变量（例如站点）时正确的语法是什么？

我在我的 JS 文件中使用了 frontmatter。我应该在那里包含一些东西还是进行导入？

我试过了：

console.log(site.collections);
console.log({{site.collections}});

但我只是收到“未定义站点”或“未捕获的语法错误：无效或意外令牌”错误。

【问题讨论】：

标签： javascript variables jekyll global liquid

【解决方案1】：

任何带有front-matter的文件都会被jekyll处理...

例如：anyfile-with-front-matter.js

---
title: my js file
---
console.log({{page.title}});
console.log({{site.description}});

...，除非它是“忽略”。

默认情况下：

任何带下划线的文件夹都会被忽略（例如：_myfolder）
默认配置忽略 node_modules、vendor/bundle/、vendor/cache/、vendor/gems/ 和 vendor/ruby/ 文件夹

要使包含的文件可用于处理，您可以添加包含文件夹以在 _config.yml 中包含数组。

include:
 - node_modules
 - _myfolder

这是我的猜测。

【讨论】：

感谢您的回答！我的文件结构如下所示：项目 |------ 资产 |------ js（我的文件所在的位置）|------ 其他文件在我的 _config.yml 中，我没有定义任何排除项。无论如何都可以忽略吗？我还应该使用包含：

【解决方案2】：

我刚刚发现了问题（你之前解决了大卫）： Jekyll: liquid tag inside javascript

添加时似乎打印正确（没有语法错误）：

console.log({{ site.collections | jsonify }})

【讨论】：

【解决方案3】：

Jekyll 是一个静态站点生成器，基本上只运行一次。它唯一持续运行的时间是当您调用以下任一命令时：jekyll serve 或 jekyll build --watch。

另一方面，JavaScript 脚本旨在针对给定页面的每个请求运行。除非有运行 Jekyll 的服务器，否则您的脚本将无法使用所谓的全局变量。

不过，话虽如此，您仍然可以使用 Jekyll 变量生成静态 JS 脚本。例如，考虑以下内容：

`./_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>

如果您要构建包含上述文件的站点，生成的 html 文件 ./_site/test.html 将如下所示：

<body>
  <script>

    console.log('Home');
    console.log('About Us');

  </script>
</body>

【讨论】：