layouts/_partials/menu.html
% cat themes/my-theme/layouts/_partials/menu.html 21:45:32 [9/198]
{{- /*
Renders a menu for the given menu ID.
@context {page} page The current page.
@context {string} menuID The menu ID.
@example: {{ partial "menu.html" (dict "menuID" "main" "page" .) }}
*/}}
{{- $page := .page }}
{{- $menuID := .menuID }}
{{- with index site.Menus $menuID }}
<nav>
<ul>
{{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
</ul>
</nav>
{{- end }}
{{- define "_partials/inline/menu/walk.html" }}
{{- $page := .page }}
{{- range .menuEntries }}
{{- $attrs := dict "href" .URL }}
{{- if $page.IsMenuCurrent .Menu . }}
{{- $attrs = merge $attrs (dict "class" "active" "aria-current" "page") }}
{{- else if $page.HasMenuCurrent .Menu .}}
{{- $attrs = merge $attrs (dict "class" "ancestor" "aria-current" "true") }}
{{- end }}
{{- $name := .Name }}
{{- with .Identifier }}
{{- with T . }}
{{- $name = . }}
{{- end }}
{{- end }}
<li>
<a
{{- range $k, $v := $attrs }}
{{- with $v }}
{{- printf " %s=%q" $k $v | safeHTMLAttr }}
{{- end }}
{{- end -}}
>{{ $name }}</a>
{{- with .Children }}
<ul>
{{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
</ul>
{{- end }}
</li>
{{- end }}
{{- end }}
このコードは、Hugoの部分テンプレート (partial) で、指定されたメニューIDに基づいてナビゲーションメニューをレンダリングするものです。以下に詳細な解説をします:
メインの部分テンプレート (_partials/menu.html)
コンテキストパラメーター:
page: 現在のページオブジェクトmenuID: レンダリングするメニューのID(例: “main”)
メニューの取得と表示:
{{- with index site.Menus $menuID }} <nav> <ul> {{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }} </ul> </nav> {{- end }}site.Menusから指定された$menuIDのメニューを取得- メニューが存在する場合、
<nav>と<ul>タグでメニューをラップ - メニューエントリの処理を
inline/menu/walk.html部分テンプレートに委譲
インライン部分テンプレート (inline/menu/walk.html)
メニューエントリの再帰的処理:
- 渡されたメニューエントリをループ処理
- 各エントリに対して属性(href、クラスなど)を設定
- 必要に応じて子メニューを再帰的に処理
アクティブ状態の管理:
{{- if $page.IsMenuCurrent .Menu . }} {{- $attrs = merge $attrs (dict "class" "active" "aria-current" "page") }} {{- else if $page.HasMenuCurrent .Menu .}} {{- $attrs = merge $attrs (dict "class" "ancestor" "aria-current" "true") }} {{- end }}- 現在のページがメニューアイテムと一致する場合:
class="active" aria-current="page" - 現在のページが子メニューを含むメニューアイテムの下にある場合:
class="ancestor" aria-current="true"
- 現在のページがメニューアイテムと一致する場合:
多言語対応:
{{- $name := .Name }} {{- with .Identifier }} {{- with T . }} {{- $name = . }} {{- end }} {{- end }}- メニュー項目の表示名を設定
- 識別子がある場合、翻訳関数
Tを使用して翻訳テキストを取得
HTML出力:
- 各メニュー項目に対して
<li>要素とその中に<a>要素を生成 - 属性を動的に設定し、安全にHTMLに挿入
- 子メニューがある場合は、再帰的に同じテンプレートを呼び出し
- 各メニュー項目に対して
このテンプレートは、複数レベルのメニュー構造(ドロップダウンメニューなど)をサポートし、現在のページに応じてメニュー項目のアクティブ状態を適切に設定する、柔軟で再利用可能なメニューシステムを提供します。