Jekyll菜单添加active类对_data文件夹配置项不生效问题

问题根源 #

你写的判断条件里错误地在Liquid逻辑标签（{% if %}）内部使用了变量插值语法{{ }}，Liquid不会解析放在{% %}里的{{ }}，会把'{{nav.url}}'当成普通字符串匹配，自然无法触发正确的判断。

修正后的代码 #

直接在if条件中使用变量，不需要加{{ }}包裹即可：

<ul class="nav-menu">
  {% for nav in site.data.nav %}
  <li {% if page.url contains nav.url or page.path contains nav.path %}class="active" aria-current="page"{% endif %}>
    <a href="{{ nav.url }}">{{ nav.title }}</a>
  </li>
  {% endfor %}
</ul>

可选优化（避免短路径误匹配） #

如果存在分类路径嵌套/相似的情况（比如有/category/name/和/category/name2/），可以给url判断加前缀匹配逻辑避免误触发：

<ul class="nav-menu">
  {% assign page_url = page.url | append: '/' | replace: '//', '/' %}
  {% for nav in site.data.nav %}
  {% assign nav_url = nav.url | append: '/' | replace: '//', '/' %}
  <li {% if page_url starts_with nav_url or page.path contains nav.path %}class="active" aria-current="page"{% endif %}>
    <a href="{{ nav.url }}">{{ nav.title }}</a>
  </li>
  {% endfor %}
</ul>

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