Hugo 中添加导航栏激活效果

youtube_pace

原理概述

本方法在「Hugo」中通过纯 Html+CSS 的手段，实现导航栏根据所访问的页面强调对应的标签的效果。

使用到了 {{ .Title }} 这个变量会随着页面的不同而对应着变化的特性，给需要激活效果的标签赋予 CSS 样式。下面以本站「检索」页面顶部分类导航栏为例进行分析。

实现方法

{{ range .Site.Taxonomies.space }}
    <a href="{{ .Page.Permalink }}">{{ .Page.Title }} <span>{{ .Count }}</span></a>
{{ end }}

上面是一个常规调取分类列表的写法，现在要实现选中其中一个分类，跳转进对应分类的文章列表，然后给该分类标签加上一个黑底的效果，最终效果如最开头图片中的「建站」标签所示。

要达到这个目的，首先给每个分类加入一个id标签，通过{{ .Title }}实现快速对应添加，写法如下。

 id="{{ .Page.Title }}"

当网页结构较为复杂时，用，可在标签名前加上限定语，以避免标签名重复导致效果被错误引用。

 id="Space{{ .Page.Title }}"

解决好标签后，在「HTML」中引入对应的CSS样式。

  #{{ .Title }} {
    color: #fff;
    background-color: #424242;
  }

运用实例

<style type="text/css">
  #{{ .Title }} {color:#fff;background-color:#424242;}
</style>

{{ range .Site.Taxonomies.space }}
    <a id="{{ .Page.Title }}" href="{{ .Page.Permalink }}">{{ .Page.Title }} <span>{{ .Count }}</span></a>
{{ end }}