layouts/_partials/menu.html

2026/02/02 09:48

% 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に挿入
- 子メニューがある場合は、再帰的に同じテンプレートを呼び出し

このテンプレートは、複数レベルのメニュー構造（ドロップダウンメニューなど）をサポートし、現在のページに応じてメニュー項目のアクティブ状態を適切に設定する、柔軟で再利用可能なメニューシステムを提供します。