Hugoでのパンくずリスト

パンくずリストってWordpressとかだとプラグインでさっと出来たのですが、 Hugoでの実装方法がいまいちパッとしませんでした。

今回いい方法を思いついて実装できました。

Hugoでのパンくずリストについては公式のフォーラムもなかなかの長さになっております。

Implementing breadcrumb navigation in hugo? - support - Hugo Discussion

  • JavaScriptを使用
  • configFront Matterでのメンテナンスが必要
  • 表示がタイトルではなくてURLを分解したもの

だったりしたので、うーん・・・となっていました。欲しいのは

  • JavaScript不要
  • schema.org対応
  • ページタイトルでの表示
  • 完全自動生成

です。

で、思いついたのが以下の partial

./layout/partial/breadcrumbs.html

{{ $this := . }}
{{ $i := 1 }}
<div class="breadcrumbs">
  <ol itemscope itemtype="https://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope
        itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="/">
      <span itemprop="name">ホーム</span></a>
    <meta itemprop="position" content="{{$i}}" />
    </li>
    {{range sort .Site.AllPages "URL"}}
    {{ if ne .URL "/" }}
    {{ if eq $this.URL .URL }}
    <li itemprop="itemListElement" itemscope
        itemtype="https://schema.org/ListItem">
        <span itemprop="name">{{.Title}}</span>
      <meta itemprop="position" content="{{$i}}" />
    </li>
    {{ else if hasPrefix $this.URL (printf "%s/" .URL) }}
    {{ $i := add $i 1 }}
    <li itemprop="itemListElement" itemscope
        itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="{{.URL}}">
        <span itemprop="name">{{.Title}}</span></a>
      <meta itemprop="position" content="{{$i}}" />
    </li>

    {{ end }}
    {{ end }}
    {{ end }}
  </ol>
</div>

./static/css/styles.css

.breadcrumbs ol {
  list-style-type: none;
}

.breadcrumbs li {
  display: inline;
}

.breadcrumbs li:before {
  content: '>';
}

.breadcrumbs li:first-child:before {
  content: '';
}

これでパンくずリストを配置するテンプレートに{{ partial "breadcrumb" . }}を入れるだけで完成。 以下のようなパンくずリストになります。

ホーム > ブログ > パンくずリストとは

何をしているかというと、 .Site.AllPages で全ページをURL順にソートをかけてループし、 それぞれのURL + "/"現在のページのURL に前方一致した場合に リストに追加する。という事をしています。 記事数が数千とかになってくると多少重くなるかもしれませんが、Hugoなら大丈夫でしょう(?)

これでJavaSript不要、メンテナンスフリーなパンくずリストができました。

私の場合はこれで今の所完璧に動いています。