消解炼金术

06_导航高亮及面包屑相关

小岛建设

侧边栏导航高亮设置:

{{ $currentPage := . }}
{{ range sort .Site.Sections "Section" }}{{if .Params.navtitle}}
<div class="sidebar-nav">
    <input type="checkbox" id="{{.Params.navtitle}}-toggle" class="toggle sidebartog">
    <label for="{{.Params.navtitle}}-toggle" class="toggle-label">
        <a href="{{.RelPermalink}}" class="{{if eq $currentPage.FirstSection.RelPermalink .RelPermalink}}active
            {{ end }}">
            {{ .Params.navtitle }}</a>
    </label>
    <div class="togg {{if .Params.display}}{{else}}toggle-content{{end}}">
        {{ $section := .Site.GetPage "section" .Section }}
        {{ range sort $section.Sections "Path" }}
        {{if .Params.display}}
        {{else}}<a href="{{ .RelPermalink }}"
            class="{{ if eq $currentPage.CurrentSection.RelPermalink .RelPermalink}}active{{ end }}">
            {{ .Title }}
        </a>
        {{end}}
        {{ end }}
    </div>
</div>
{{ end }}
{{ end }}

使用{{$currentPage}}定义当前页面。.RelPermalink指当前关联链接,没有前缀时取决于.,有前缀时取决于前缀,在range内部.代表当前遍历到的页面。

面包屑代码:

<nav class="breadcrumb">
    <a href="{{ .Site.BaseURL }}">{{.Site.Title}}</a> //首页
    {{ if and .File (not .IsHome) }} //避免再度出现首页
    > <a href="{{ .FirstSection.RelPermalink }}">{{ .FirstSection.Title }}</a>
    {{ end }}
    {{ if ne .FirstSection .CurrentSection }}
    > <a href="{{ .CurrentSection.RelPermalink }}">{{ .CurrentSection.Title }}</a>
    {{ end }}
    {{ if eq .Kind "page"}} //识别文章页
    {{if .Title}}
    <span>> {{.Title}}
    {{else}}
    <span>> {{ .File.ContentBaseName | replaceRE `^\d{4}-\d{2}-\d{2}_` "" | replaceRE "_" " " | title }}
    </span>
    {{end}}
    {{end}}
</nav>

读了hugo官方文档后发现hugo已经支持文件名作为.Title,不需要额外添加代码。

© 2026 消解炼金术 | 
Powered by Hugo and Cloudflare