Hugoでパンクズリストをbootstrapで作成

パンくずリストを表示するためのpartial

bootstrapを使用したパンクズリストbreadcrumb partialの定義です。

[layouts/partials/breadcrumb.html]

{{- define "breadcrumb" }}
  {{- if .node.Parent }}
    {{- template "breadcrumb" (dict "node" .node.Parent "start" .start) }}
  {{- else if not .node.IsHome }}
    {{- template "breadcrumb" (dict "node" .node.Site.Home "start" .start) }}
  {{- end }}

  {{- if eq .node .start }}
    <li class="breadcrumb-item active">{{ .node.Title }}</li>
  {{- else }}
    <li class="breadcrumb-item"><a href="{{ .node.Permalink }}">{{ .node.LinkTitle }}</a></li>
  {{- end }}
{{- end }}

<nav>
  <ul class="breadcrumb">
    {{- template "breadcrumb" (dict "node" . "start" .) }}
  </ul>
</nav>

表示したいところで、以下のpartialを使用します

{{ partial "breadcrumb" . }}

以下のようなパンクズリストになると思います。

以下は調べた範囲で私が理解したメソッドの機能です。

正直参考資料が少ないので間違ってるかもなので、参考程度にお願いします。

• .Parent
  • 階層の親ページを参照するメソッド
• .Title
  • ページのタイトルを参照するたぶん文字列
• .start
  • 最初のページかどうか
• .Permalink
  • リンクを文字列で所得

まとめ

hugoでパンクズリストを作成しました、これでgoogle大先生が私のブログを効率よくクロールしてくれるはず…