在Hugo中添加自定义面包屑导航

介绍

面包屑导航对于用户和搜索引擎来说都是非常有用的导航工具。它们提供了网站页面的清晰层次结构，使用户更容易了解网站结构，也使搜索引擎更容易抓取和索引内容。

对于用户来说，面包屑导航为他们提供了一条通往当前页面的清晰路径，以及一种返回上级页面的简便方法。这改善了用户体验，使他们更有可能在网站上停留更长时间并在将来再次访问。

对于搜索引擎来说，面包屑导航提供了网站页面的清晰层次结构，使它们更容易抓取和索引内容。这提高了网站在搜索结果中的可见性，使用户更有可能找到并点击进入该网站。

如果我们自己实现面包屑导航需要使用循环递归等方法,比较麻烦,幸运的是,在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 站点的文章中添加面包屑导航，提高用户导航体验。如果需要进一步定制，可以根据具体需求调整短代码、模板和样式.

本文地址