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

こんにちはnasustです。

今回は、Hugoでパンくずリストを表示するテンプレートを解説します。 Googleの構造化データに対応しています。 構造化データとはGoogleの検索エンジンが認識しやすくする為の情報です。 今回の場合は検索エンジンが構造化データを認識して検索結果にパンくずリストを表示します。

この様に表示されます。パンくずリストの構造化データについては下記のページで解説されています。

パンくずリスト  |  検索  |  Google Developers

テンプレート

今回は3個のテンプレートを使用します。

Sectionの構造を取得するテンプレート

{{ return partial "get_parent" (dict "page" . "leaf_page" . ) }}
html
{{ $parent := false }}

{{ if .page.Parent }}
    {{ $parent = partial "get_parent" (dict "page" .page.Parent ) }}
{{ else if not .page.IsHome }}
    {{ $parent = partial "get_parent" (dict "page" .page.Site.Home ) }}
{{ end }}

{{ $list := slice .page }}
{{ if $parent }}
    {{ $list = $parent | append $list }}
{{ end }}

{{ return $list }}
html

HTMLをレンダリングするテンプレート

<div class="a-breadcrumbs">
    {{ $current_page := . }}
    {{ $parents := partial "function/get_parents_list.html" . }}
    {{ $position := 0 }}

    <script type="application/ld+json">
        {
          "@context": "https://schema.org",
          "@type": "BreadcrumbList",
          "itemListElement": [
          {{ range $parents }}
            {{ $position = add $position 1 }}
            {
                "@type": "ListItem",
                "position": {{ $position }},
                "name": {{ .Title }},
                "item": {{ .Permalink }}
            }{{ if gt ( len $parents ) $position  }} , {{ end }}
          {{ end }}
          ]
        }
    </script>

    <ul class="a-breadcrumbs__list" >
        {{ range $parents }}
            <li class="a-breadcrumbs__list-item">
                <a class="a-breadcrumbs__list-item-link" href="{{ .Permalink }}">
                    {{ if .IsHome }}
                        Home<span class="a-breadcrumbs__list-item-link-gt">{{ ">" }}</span>
                    {{ else }}
                        {{ .Title }}{{ if ne . $current_page }}<span class="a-breadcrumbs__list-item-link-gt">{{ ">" }}</span>{{ end }}
                    {{ end }}
                </a>
            </li>
        {{ end }}
    </ul>
</div>
html

テンプレートの解説

上記2つのテンプレートは、Sectionの構造を取得します。 1個目から始め、2個目からページの親を辿るよう再帰的に自分自身のテンプレートを読み込んでいます。

3個目のHTMLをレンダリングするテンプレートの$parentsにはページの親の配列が格納されています。

それを使用してリストのHTMLを記述すればパンくずリストが出来ます。

prevnext