如何用TailwindCSS+Zola高亮导航栏当前项？无JS方案

关于Tailwind target: 伪类的问题 #

你的用法不正确，target:text-pink-700 仅在**URL锚点（# 后内容）匹配元素 id**时生效，比如访问 your-site.com/#blog 时，id="blog" 的元素才会应用该样式。但导航栏高亮通常针对当前页面而非单页内锚点，这个方案不适合多页面场景。

另外你贴的代码里，target: 类加在了内容区域的div上，而非导航项本身——即便单页内跳转场景，也应该把样式加在对应导航链接上，且仅当链接指向的锚点被激活时才会触发高亮，这显然不符合常规导航栏的需求。

无需JavaScript的最优方案（结合Zola模板） #

利用Zola内置模板变量判断当前页面路径，给匹配的导航项静态添加高亮类，这是静态生成场景下最可靠的方式：

示例代码 #

假设导航结构如下：

<nav>
  <ul class="flex space-x-4">
    <li>
      <a href="/" class="{% if current_url == '/' %}text-pink-700 font-bold{% else %}text-gray-600 hover:text-gray-900{% endif %}">首页</a>
    </li>
    <li>
      <a href="/blog/" class="{% if current_url starts_with '/blog/' %}text-pink-700 font-bold{% else %}text-gray-600 hover:text-gray-900{% endif %}">博客</a>
    </li>
    <li>
      <a href="/about/" class="{% if current_url == '/about/' %}text-pink-700 font-bold{% else %}text-gray-600 hover:text-gray-900{% endif %}">关于</a>
    </li>
  </ul>
</nav>

关键说明 #

• current_url 是Zola提供的全局变量，代表当前页面的完整URL路径
• 模板判断逻辑：
  • 精确匹配：{% if current_url == '/path/' %} 适合固定单页
  • 前缀匹配：{% if current_url starts_with '/blog/' %} 适合博客列表页及其子页面
• 页面生成时会直接渲染好高亮样式，完全不需要客户端JavaScript

Flowbite导航栏默认高亮问题修复 #

Flowbite默认导航栏大概率是硬编码了第一个项的高亮样式，只需把默认高亮类替换成上述Zola模板判断逻辑即可，比如将Flowbite导航项里的固定高亮类（如text-blue-600）替换为动态判断后的类。

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