菜单模板

  2 分钟阅读  

Menu Templates - 菜单模板

https://gohugo.io/templates/menu-templates/

​ 在您的模板中使用菜单变量和方法来渲染菜单。

概述

​ 在定义菜单条目之后，使用菜单变量和方法来渲染菜单。

​ 有三个因素决定如何渲染菜单：

  1. 定义菜单条目的方法：自动定义、在前置元数据中定义或在站点配置中定义
  2. 菜单结构：平面或嵌套
  3. 用于本地化菜单条目的方法：站点配置或翻译表

​ 下面的示例处理了每种组合。

示例

​ 这个局部模板递归地"遍历"菜单结构，渲染本地化、可访问的嵌套列表。

layouts/partials/menu.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

{{- $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 }}
    <li>
      <a
        {{- range $k, $v := $attrs }}
          {{- with $v }}
            {{- printf " %s=%q" $k $v | safeHTMLAttr }}
          {{- end }}
        {{- end -}}
      >{{ or (T .Identifier) .Name | safeHTML }}</a>
      {{- with .Children }}
        <ul>
          {{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
        </ul>
      {{- end }}
    </li>
  {{- end }}
{{- end }}

​ 调用上面的局部，传递一个菜单ID和当前页面的上下文。

layouts/_default/single.html

1
2

{{ partial "menu.html" (dict "menuID" "main" "page" .) }}
{{ partial "menu.html" (dict "menuID" "footer" "page" .) }}

页面引用

​ 无论您如何定义菜单条目，与页面相关联的条目都可以访问页面变量和方法。

​ 这个简单的示例在每个条目的name旁边渲染一个名为version的页面参数。使用with或if来处理(a) 指向外部资源的条目，或者(b) version参数未定义的条目。

layouts/_default/single.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

{{- range site.Menus.main }}
  <a href="{{ .URL }}">
    {{ .Name }}
    {{- with .Page }}
      {{- with .Params.version -}}
        ({{ . }})
      {{- end }}
    {{- end }}
  </a>
{{- end }}

菜单条目参数

当您在站点配置或前置元数据中定义菜单条目时，可以包括params键，如以下示例所示：

​ 当您在站点配置中定义菜单条目或在前置元数据中定义菜单条目时，您可以像这些示例中那样包含一个params键：

​ 这个简单的示例为每个锚点元素呈现一个class属性。使用with或if来处理params.class未定义的条目。

layouts/partials/menu.html

1
2
3
4
5

{{- range site.Menus.main }}
  <a {{ with .Params.class -}} class="{{ . }}" {{ end -}} href="{{ .URL }}">
    {{ .Name }}
  </a>
{{- end }}

本地化

​ Hugo提供了两种本地化菜单条目的方法。详见多语言。

另请参阅

最后修改 May 22, 2023: 第一次提交 (9f24e27)