循环渲染菜单时，如何为slug单复数页面添加对应active类？

你需要修改菜单循环里的判断条件，增加对博客详情页的匹配规则，让Blogs菜单项在列表页和详情页都能高亮。

修改后的HTML代码如下：

<nav class="nav-links">
  {% for item in site.data.settings.menu %}
  <li style="list-style-type: none;" {% if navigation.url == item.url or (item.url == 'blogs' and navigation.url contains '/blog/') %} class="active"{% endif %}>
    <a href="{{ site.github.url }}/{{ item.url }}" class="nav-item">
      {{ item.name }} 
    </a>
  </li>
  {% endfor %} 
</nav>

逻辑说明 #

• 保留原有的navigation.url == item.url判断，确保其他菜单项的完全匹配高亮正常工作
• 新增item.url == 'blogs' and navigation.url contains '/blog/'的判断，当当前页面URL包含/blog/（即单篇博客详情页）时，同样给Blogs菜单项加上active类

如果之后需要给其他菜单项添加类似规则（比如Journal对应/journal/xxx页面），可以按同样的格式扩展判断条件，例如：

{% if navigation.url == item.url 
   or (item.url == 'blogs' and navigation.url contains '/blog/') 
   or (item.url == 'journals' and navigation.url contains '/journal/')
%} class="active"{% endif %}

内容的提问来源于stack exchange，提问作者TheBAST