パンくずリスト

はじめに

Hugoでパンくずリストを作成します。

実装例

Hugoのページの実装例にそのものの記載があります。この例では、orderd listを作成します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<ol  class="nav navbar-nav">
  {{ 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行目: breadcrumbnavを呼び出しています。引数は、(dict "p1" . "p2" .)です。
  • 4行目: breadcrumbnavの定義です。
  • 5行目: p1に親ページがあるか(.Parent)確認しています。その場合、p1を親要素(.p1.Parent)に設定して、breadcrumbnavを再帰呼び出しします。
  • 7行目: p1に親ページがない場合、トップページか(.IsHome)を確認し、そうでなければ、p1をトップページ(.p1.Site.Home)に設定して、breadcrumbnavを再帰呼び出しします。
  • 10行目: p1とp2が等しい場合は、最初に呼び出したページなので、class=activeを設定します。
  • 11行目: p1に対するリンクを作成します。

例えば、/a/b という構造がある場合、p1とp2は、以下のように変化していきます。class=acriveを出力する必要がなければ、p2は不要であることがわかります。

sequenceDiagram participant t as template participant b1 as breadcrumbnav participant b2 as breadcrumbnav participant b3 as breadcrumbnav t->>b1: p1=/a/b, p2=/a/b b1->>b2: p1=/a, p2=/a/b b2->>b3: p1=/, p2=/a/b Note over b3: "/" へのリンクを出力 b3->>b2: return Note over b2: "/a" へのリンクを出力 b2->>b1: return Note over b1: "/a/b" へのリンクを出力 b1->>t: return

最終更新日

January 23, 2021

inserted by FC2 system