【Hugoカスタマイズ】迷子を防ぐ「パンくずリスト(Breadcrumbs)」の作り方

<nav class="breadcrumbs" aria-label="breadcrumb">
  <ol>
    {{/* 1. ホームへのリンク */}}
    <li>
      <a href="{{ .Site.BaseURL }}">HOME</a>
    </li>

    {{/* 2. 親ページがあれば表示 */}}
    {{ template "breadcrumbnav" (dict "p1" . "p2" .) }}
  </ol>
</nav>

{{/* 再帰的に親をたどるテンプレート定義 */}}
{{ define "breadcrumbnav" }}
  {{ if .p1.Parent }}
    {{/* 親がホームじゃない場合のみ処理続行（ホームは既に表示したので） */}}
    {{ if not .p1.Parent.IsHome }}
      {{ template "breadcrumbnav" (dict "p1" .p1.Parent "p2" .p2 )  }}
    {{ end }}
  {{ end }}

  {{/* 自分の表示（ただしホームは除く） */}}
  {{ if not .p1.IsHome }}
    <li>
      <span class="divider">&gt;</span>
      {{ if eq .p1 .p2 }}
        {{/* 今見ているページ（リンクなし） */}}
        <span aria-current="page">{{ .p1.Title }}</span>
      {{ else }}
        {{/* 親ページへのリンク */}}
        <a href="{{ .p1.RelPermalink }}">{{ .p1.Title }}</a>
      {{ end }}
    </li>
  {{ end }}
{{ end }}

{{ define "main" }}
  
  ...

  <!-- 記事本文 -->
  <div class="content">
    {{ .Content }}
  </div>

  <!-- パンくずリストを表示 -->
  {{ partial "breadcrumbs.html" . }}

  <!-- 関連記事など -->
  ...
{{ end }}

.breadcrumbs {
  margin-top: 30px;
  margin-bottom: 20px;
  font-size: 0.9rem;
  color: #666;
  overflow-x: auto;   /* スマホなどで長くなっても横スクロールできるように */
  white-space: nowrap; /* 勝手に折り返されないようにする（1行で表示） */
}

.breadcrumbs ol {
  list-style: none; /* リストの「・」を消す */
  padding: 0;
  margin: 0;
  display: flex;    /* 横並びにする */
  flex-wrap: nowrap; /* 折り返しを禁止する */
}

.breadcrumbs li {
  display: inline-flex;
  align-items: center;
}

.breadcrumbs .divider {
  margin: 0 8px; /* 区切り文字の隙間 */
  color: #ccc;
}