菜单
概述
三个因素决定如何渲染菜单
下面的示例处理每种组合。
示例
此部分模板以递归方式“遍历”菜单结构,渲染本地化的、可访问的嵌套列表。
调用上面的部分,传递菜单 ID 和上下文中的当前页面。
layouts/_default/single.html
{{ 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
{{- range site.Menus.main }}
<a href="{{ .URL }}">
{{ .Name }}
{{- with .Page }}
{{- with .Params.version -}}
({{ . }})
{{- end }}
{{- end }}
</a>
{{- end }}
菜单条目参数
当您在站点配置中或在前言中定义菜单条目时,您可以包含一个params
键,如以下示例所示
这个简单的示例为每个锚元素渲染一个class
属性。使用with
或if
来防御性地处理未定义params.class
的条目。
本地化
Hugo 提供了两种方法来本地化您的菜单条目。请参阅多语言。