介绍
面包屑导航对于用户和搜索引擎来说都是非常有用的导航工具。它们提供了网站页面的清晰层次结构，使用户更容易了解网站结构，也使搜索引擎更容易抓取和索引内容。
对于用户来说，面包屑导航为他们提供了一条通往当前页面的清晰路径，以及一种返回上级页面的简便方法。这改善了用户体验，使他们更有可能在网站上停留更长时间并在将来再次访问。
对于搜索引擎来说，面包屑导航提供了网站页面的清晰层次结构，使它们更容易抓取和索引内容。这提高了网站在搜索结果中的可见性，使用户更有可能找到并点击进入该网站。
如果我们自己实现面包屑导航需要使用循环递归等方法,比较麻烦,幸运的是,在Hugo v0.109.0 版本以上,添加了一个新的 .Ancestors 方法，该方法可沿树向上走到主页。 有了它，面包屑模板可以大大简化。下面我们来以我的博客为例实现一下。
一、添加模板或者短代码
你可以使用模板或者短代码的方式来实现面包屑导航,我把他直接放在了模板中。在你的路径layouts/partials/article下面新建一个文件breadcrumbs.html,里面添加下面代码
<nav class="breadcrumb" aria-label="breadcrumbs">
<ol class="breadcrumb-list">
{{- range .Ancestors.Reverse }}
<li class="breadcrumb-item">
<a href="{{ .RelPermalink }}">{{ if .IsHome }}{{ i18n "home" }}{{ else }}{{ i18n "posts" }}{{ end }}</a>
</li>
<li class="breadcrumb-separator">»</li>
{{- end }}
<li class="breadcrumb-item active">
<a href="{{ .RelPermalink }}" aria-current="location">{{ .Title }}</a>
</li>
</ol>
</nav>
二、在模板中引用breadcrumbs模块
在layouts/partials/article/article.html 或者layouts/partials/article/components/content.html 添加下面引用,注意breadcrumbs.html 路径。
<!-- 添加面包屑导航 -->
{{ partial "breadcrumbs.html" . }}
三、添加i18n
如果你想使用中文,需要在i18n/zh-cn.yaml 文件中添加类似定义
home: 主页
posts: 文章列表
四、添加样式
在自定义样式custom.scss 中添加样式，以下作为参考,根据需要自行调整
.breadcrumb {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
.breadcrumb-item {
margin-right: 0.5rem;
}
.breadcrumb-item a {
text-decoration: none;
color: #007bff;
}
.breadcrumb-item a:hover {
text-decoration: underline;
}
.breadcrumb-item.active {
color: #6c757d;
}
五、重新生成站点
保存所有更改后，重新生成你的 Hugo 站点，并在浏览器中查看效果。
hugo server
通过以上步骤，你可以在 Hugo 站点的文章中添加面包屑导航，提高用户导航体验。如果需要进一步定制，可以根据具体需求调整短代码、模板和样式.
