在 Jekyll 中将 active class 添加到当前选择的类别归档页面

Question

我正在为我的 Jekyll 项目使用 category-archive plugin。我想为每个类别存档页面都有一个类别列表菜单，以便用户可以在不同的类别存档之间导航。我想将 class="active" 添加到当前查看的类别存档页面的类别列表 link 中。通过将 page.url 与 navitem.url 进行比较，我对网站导航有类似的看法，不同之处在于，对于网站导航，我在 config.yml 中指定了 navitem.urls 的列表，对于类别存档类别名称列表是根据 post 本身指定的类别生成的，我在使用 {{ category | {% if %} 运算符中的第一个 }} 变量，因此我可以检查“==”或 "contains"

这是我目前拥有的，但它似乎不起作用

<ul class="product-categories">
{% for category in site.categories %}
  {% if page.url == {{ category | first }} %}
    {% assign class = "active" %}
  {% else %}
    {% assign class = "" %}
  {% endif %}
<li>
  <a href="/{{ category | first }}/" class="{{ class }}">{{ category | first }}</a>
</li>
{% endfor %}

请帮忙 =)

Answer 1

class liquid 变量在 for 循环内，所以当你在范围外使用它时它是空的，它也应该是 "contains" 而不是 == 因为路径包含更多的字符'出现在类别中。

<ul class="product-categories"> 
{% assign class = "" %}
{% for category in site.categories %}
{% assign cat=category|first %} 
{% if page.url contains cat %}
 {% assign class = "active" %} 
{% endif %} 
<li> 
<a href="/{{ category | first }}/" class="{{ class }}">{{ category | first }}</a>
 </li> 
{% endfor %}

在 Jekyll 中将 active class 添加到当前选择的类别归档页面

Add active class to the currently selected category archive page in Jekyll

liquid

jekyll

jekyll-paginator