在数据驱动导航上设置活动 class

Question

我在我的 _data 文件夹中创建了一些正常工作的数据。我正在用它创建一个导航系统。

在我的数据文件中elements.yml:

- name: design-elements

- name: ui-components

- name: helper-classes

对于我的简单导航，如果 page.url == {{data.name}}，我会添加一个 active class。我是这样写的：

{% for element in site.data.elements %} <li {% if page.url == '/{{ element.name }}.html' %} class="active"{% endif %}>

它永远不会 解析为真，即使我的页面导航与 {{element.name}}.

相同

如果我像这样明确地写它，它就可以工作：

<li {% if page.url == '/design-elements.html' %} class="active"{% endif %}>

我不确定为什么会这样。

Answer 1

{{}} 里面的 {%%} 不起作用。

所以这个：

<li {% if page.url == '/{{ element.name }}.html' %} class="active"{% endif %}>

应该在没有它们的情况下重写。在这种情况下，我使用 capture 标签，但也可以将结果 url 分配给一个新字符串，然后进行比较：

{% capture new_url %}/{{element.name}}.html{% endcapture %}
<li {% if page.url == new_url %} class="active"{% endif %}>

Setting active class on data driven navigation