说明

使用Bootstrap 5面包屑导航

Bootstrap 5 - Breadcrumb

主题的最近模块, 已实现面包屑导航分区遍历, 可以直接拿来用

CSS样式

Copy 1.breadcrumb-nav-item {
 2    a {
 3        color: $primary;
 4        text-decoration: none;
 5    }
 6
 7    a:hover {
 8        color: $whole-hover;
 9    }
10}
11
12[dark-mode] .breadcrumb-nav-item {
13    a {
14        color: $dark-primary;
15    }
16
17    a:hover {
18        color: $dark-whole-hover;
19    }
20}

html代码

1. 使用Hugo partial
   

   Copy1<nav style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%236c757d'/%3E%3C/svg%3E&#34;);" aria-label="breadcrumb">
   2  <ol class="breadcrumb">
   3    {{ range after 2 .Ancestors.Reverse }}
   4        <li class="breadcrumb-item breadcrumb-nav-item"><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
   5    {{ end }}
   6    <li class="breadcrumb-item active" aria-current="page">{{ .Title }}</li>
   7  </ol>
   8</nav>

2. 使用时
   

   Copy1{{ partial "breadcrumb.html" . }}

便签