パンくずリストを表示するには

パンくずリストを表示するためのテンプレートについて見ていきます。今回は。公式ドキュメントにあるパンくずリストを紐解いていこうと思います。

パンくずリストのテンプレート

公式ドキュメントにあるパンくずリストのテンプレートは、次のように説明されています。

<ol  class="breadcrumbs">
  {{ template "breadcrumbnav" (dict "p1" . "p2" .) }}
</ol>

{{ define "breadcrumbnav" }}
    {{ if .p1.Parent }}
        {{ template "breadcrumbnav" (dict "p1" .p1.Parent "p2" .p2 )  }}
    {{ else if not .p1.IsHome }}
        {{ template "breadcrumbnav" (dict "p1" .p1.Site.Home "p2" .p2 )  }}
    {{ end }}
<li{{ if eq .p1 .p2 }} class="active"{{ end }}>
  <a href="{{ .p1.Permalink }}">{{ .p1.Title }}</a>
</li>
{{ end }}

2行目が最初の呼び出しとなり、5行目の define 部分が呼び出される感じとなります。現在のページを起点として .Parent を参照しながら再帰的に Home へ遡っていきます。

dict "p1" . "p2" . は、ディクショナリ(連想配列)で最初に キー p1 に値としてそのページ、 キー p2 にも値としてそのページをセットしています。最初の if 文では、親ページがあるかどうか次の評価では p1 が Home でないかどうか確認し、一致した場合 define した部分が呼び出されます。

これで、 Home までたどれるようになるので後はスタイルを適用することでパンくずリストが出力されます。

.breadcrumbs {
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumbs-item {
  display: inline;
}

.breadcrumbs-item:nth-child(n + 2)::before {
  margin: 0 5px;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "/\00a0";
}