Jekyll 中的迭代 JSON 数据文件生成双输出



我尝试使用 Jekyll 构建一个文档站点,并认为将主要链接存储在 JSON 数据文件中可能是个好主意。

下面是 JSON 文件:

{
"home": {
"name": "Home",
"path": "/",
"icon": "fas fa-home"
},
"faq": {
"name": "FAQ",
"path": "/faq",
"icon": "fas fa-question"
},
"manuals": {
"name": "Anleitungen",
"path": "/manuals",
"icon": "fas fa-book-open"
}
}

这是我的模板(其中的一部分(:

<div class="navbar-menu">
<div class="navbar-start">
{% for rubrik in site.data.navigation %}
{% for part in rubrik %}
<a class="navbar-item{% if page.url == part.path %} is-active{% endif %}" href="{{ part.path }}">
<span class="icon"><i class="{{ part.icon }}"></i></span><span>{{ part.name }}</span>
</a>
{% endfor %}
{% endfor %}
</div>
</div>

这实际上会产生以下输出:

<div class="navbar-menu">
<div class="navbar-start">

<a class="navbar-item" href="">
<span class="icon"><i class=""></i></span><span></span>
</a>
<a class="navbar-item is-active" href="/">
<span class="icon"><i class="fas fa-home"></i></span><span>Home</span>
</a>

<a class="navbar-item" href="">
<span class="icon"><i class=""></i></span><span></span>
</a>
<a class="navbar-item" href="/faq">
<span class="icon"><i class="fas fa-question"></i></span><span>FAQ</span>
</a>

<a class="navbar-item" href="">
<span class="icon"><i class=""></i></span><span></span>
</a>
<a class="navbar-item" href="/manuals">
<span class="icon"><i class="fas fa-book-open"></i></span><span>Anleitungen</span>
</a>

</div>
</div>

您会看到输出加倍,一次是外循环的空变量,第二次是内循环的正确值。

有什么提示吗?这是一个错误还是我只是用错了?没有看到任何关于 for 循环仅适用于一个级别的建议。例如,Jinja2可以做到这一点。我使用的 Jekyll 版本是 4.0(最新(。

提前非常感谢。

问候,托马斯

> 当你循环site.data.navigation时,循环返回一个数组,如["home", {"name"=>"Home", "path"=>"/", "icon"=>"fas fa-home"}]

如果您尝试此代码,您肯定会了解正在发生的事情。

{% for rubrik in site.data.navigation %}
<p>rubrik = {{ rubrik | inspect }}</p>
<ul>
{% for part in rubrik %}
<li>part = rubrik[{{ forloop.index0 }}] = {{ part | inspect }}</li>
{% endfor %}
</ul>
{% endfor %}

在您的情况下,您可以简单地定位rubrik[1]元素,如下所示:

<div class="navbar-menu">
<div class="navbar-start">
{% for rubrik in site.data.navigation %}
{% assign p = rubrik[1] %}
<a class="navbar-item{% if page.url == p.path %} is-active{% endif %}" href="{{ p.path }}">
<span class="icon"><i class="{{ p.icon }}"></i></span><span>{{ p.name }}</span>
</a>
{% endfor %}
</div>
</div>

最新更新