WEBTODESIGN

Hugoでパンくずリストを設置する

Hugoでパンくずリストを追加したので、共有します🍞

型を用意する

Hugoの公式ドキュメントを参考に少し修正して、下記のようなテンプレートを用意しました👏公式ドキュメントの例でも十分使えるのですが、少し変えたい部分があったので追記しています。

様々なページで使い回せるようにpartialsにbreadcrumb.htmlを作ってパーツ分けしました。もちろんテンプレートにそのまま記述してもOKです。

以下はbreadcrumb.htmlの中身です。

<ol>
  {{ 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 .p1.IsHome }}
      <a href="{{ .p1.Permalink }}">Top</a>
    {{ else }}
      <a href="{{ .p1.Permalink }}">{{ .p1.Title }}</a>
    {{ end }}
  </li>
{{ end }}

親の階層があればそのページのリンクとタイトルを出力、なければトップページのリンクとタイトルを出力するようになっています。クラス等は適宜追加してください。

サイトのタイトルが表示されると長いので、トップページの場合は「Top」と表示されるようにしています！

型を挿入する

テンプレートの追加したい場所に以下のように記述します。記事ページの場合はlayouts/_default/single.htmlですね。

{{ partial "breadcrumb.html" . }}

これでbreadcrumb.htmlの中身がそのまま挿入されます👌
あとはCSSで整えれば完了です！

親の階層とは？

「親の階層があった場合」と言いましたが、その親の階層って何が出力されるのでしょう。

答えはそのページが所属するセクションです！セクションは、content下のディレクトリのことです。このページの場合だと、content下のhugoフォルダのbreadcrumb.mdファイルなので、パンくずリストは「トップページ ＞ hugo ＞ このページ」となります。

このフォルダのディレクトリの出力名は、content下に_index.htmlを作って以下のようにフロントマターでtitleを追加することで自由に設定できます。

---
title: "タイトル"
---

CSS紹介

参考までに、＞で区切るシンプルな横並びのパンくずリストのCSSを置いておきます🍞

ol{
  display: flex;
  flex-wrap: wrap;
}
li{
  display: flex;
  align-items: center;
}
li::after{
  content: '';
  display: block;
  width: .5em;
  height: .5em;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  transform: rotate(45deg);
  margin: 0 .6em 0 .3em;
}
li:last-of-type::after{
  content: none;
}
a{
  text-decoration: none;
  font-size: .8rem;
  transition: color .3s;
}
a:hover{
  color: #999;
}

＞部分は::beforeで作っています。

おわりに

パンくずリストはユーザービリティを高めるだけでなくSEOにも有利ということなので、積極的に導入したいところですね😏

RECOMMENDATION

NEWEST