Jekyll 前端变量到动态导航？

Question

所以总的来说，我对 jekyll 和液体很陌生，我进行了一些搜索，但找不到我的问题的具体答案。

所以基本上，我正在制作一个 jekyll 网站，它需要对贡献者尽可能简单，因为不只有一个网站贡献者。考虑到这一点，我想知道是否可以在构建时进行动态导航，该导航将在页面的前端使用自定义变量，并且如果它与顶级导航项匹配（数量不会改变），将页面链接放在所述导航项的下拉列表中。

例如，假设我有顶级导航项：颜色和动物。如果贡献者想添加一个名为“Duck”的页面，他可以在前面添加内容

parent: Animal
permalink: duck

并且，在构建时，jekyll 将遍历每个页面，当它发生在页面“鸭子”上时，它会将链接作为下拉菜单放入 Animal 导航项中。

我知道还有其他方法可以进行多级导航，如 Jekyll 文档中所述，但这些方法每次都需要有人更改配置文件，除非我完全误解了它。我希望贡献者只需要担心他正在制作的页面，我认为前端是一个很好的地方。

编辑：我将提供我已经尝试过的内容，但我认为我的代码会让你发笑，因为它可能有点离题而且可能过于复杂。下面的代码在配置中为带有“text”和“url”变量的顶级项目假设了一个导航数组。并非所有链接都有链接，并且只能用作下拉菜单。它还假设页面上有一个名为“parent-text”的变量，这是匹配发生的地方。

{% for link in site.navigation %} <a href="{{link.url}}">{{link.text}}</a> 

{% for page in site.pages %}

{% if page.parent-text == true %}

<a href="{{page.permalink}}"> {{page.parent-text}} </a>

{% endif %}

{% endfor %}

{% endfor %}

我只是想让它输出。稍后我会处理样式和标记。

提前谢谢大家！

Answer 1

我要说的第一件事是在循环中使用page 作为变量时要小心。 page 对 Jekyll (docs) 有特殊意义，将其设置为循环或变量将覆盖它通常的工作方式。

使用前题

我对您的示例以及您为什么要检查 page.parent-text == true 感到有些困惑。这仅检查有问题的文件是否具有带有某个键parent-text 的前事项，该键未设置为false。您似乎想将其与导航链接的文本进行比较。像这样的东西应该可以工作：

{% for link in site.navigation %}
  <a href="{{link.url}}">{{link.text}}</a>
  {% for my_page in site.pages %}
    {% if my_page.parent == link.text %}
      <a href="{{page.permalink}}"> {{page.title}} </a>
    {% endif %}
  {% endfor %}
{% endfor %}

使用数据文件

您也可以使用a data file。假设您有一个文件 _data/nav-links.yml，它看起来像这样：

- text: Animals
  url: '/animals/'
  dropdown:
    - text: Duck
      url: '/duck/'
    - text: Goose
      url: '/goose/'

然后，在您的导航中，您有：

{% for link in site.data.nav-links %}
  <a href="{{ link.url }}">{{ link.text }}</a>
  {% for sub_link in link.dropdown %}
    <a href="{{ sub_link.url }}">{{ sub_link.text }}</a>
  {% endfor %}
{% endfor %}

这会将相关信息隔离到自己的文件中，因此贡献者不必筛选此配置。如果您认为site.navigation 中的链接名称可能会更改，则最好这样做；如果其中任何一个发生了变化，那么所有相关页面前面的相应parent 或parent-text 变量的所有 变量也必须更改。