在数据驱动的导航上设置活动类

Question

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

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

- name: design-elements

- name: ui-components

- name: helper-classes

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

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

永远不会解析为true，即使我的页面导航与{{element.name}}相同。

如果我像这样明确地写它是有效的：

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

我不确定为什么会这样。

Answer 1

<{1}}内的{p> {{}}不起作用。

所以这个：

{%%}

应该在没有它们的情况下重写。在这种情况下，我使用<li {% if page.url == '/{{ element.name }}.html' %} class="active"{% endif %}> 标记，但也可以将生成的URL分配给新字符串然后进行比较：

capture