Hugo框架中文文档 Hugo菜单

如果您全部所需的是一个简单的菜单，请看菜单模板中"给疏于打理的博客的区块菜单"

使用hugo菜单您可以:

在一个或者多个菜单中添加条目内容
无限深度的嵌套菜单
创建不绑定于任何内容的菜单项目
突出显示活动的菜单项目(以及活动的分支)

Hugo菜单

菜单是菜单条目的数组,这个数组可以通过.Site.Menus 站点变量使用名称来访问。比如，可以通过 .Site.Menus.main访问网站的main 菜单.

如果使用了多语言支持特性multilingual feature, 可以定义语言独立的菜单

参考 Menu Entry Properties 获得关于全部与菜单条目有关的变量和函数.

菜单添加内容

Hugo允许您通过内容的front matter来给菜单添加内容.

简单方式

如果您全部所需是添加菜单条目，这个简易方式做的非常不错.

在单一菜单中

1
2
3
---
menu: "main"
---

在多个菜单中

1
2
3
---
menu: ["main", "footer"]
---

高级设置高级菜单

1
2
3
4
5
6
---
menu:
  docs:
    parent: 'extras'
    weight: 20
---

菜单中添加非内容条目

也可以在菜单中添加没有绑定到内容的条目。这在Hugo项目的配置 文件中添加。

下面是从一个配置文件中抽取的代码片段举例:

config.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
menu:
  main:
  - identifier: about
    name: about hugo
    pre: <i class='fa fa-heart'></i>
    url: /about/
    weight: -110
  - name: getting started
    post: <span class='alert'>New!</span>
    pre: <i class='fa fa-road'></i>
    url: /getting-started/
    weight: -100

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
[menu]
  [[menu.main]]
    identifier = 'about'
    name = 'about hugo'
    pre = "<i class='fa fa-heart'></i>"
    url = '/about/'
    weight = -110

  [[menu.main]]
    name = 'getting started'
    post = "<span class='alert'>New!</span>"
    pre = "<i class='fa fa-road'></i>"
    url = '/getting-started/'
    weight = -100

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
{
   "menu": {
      "main": [
         {
            "identifier": "about",
            "name": "about hugo",
            "pre": "\u003ci class='fa fa-heart'\u003e\u003c/i\u003e",
            "url": "/about/",
            "weight": -110
         },
         {
            "name": "getting started",
            "post": "\u003cspan class='alert'\u003eNew!\u003c/span\u003e",
            "pre": "\u003ci class='fa fa-road'\u003e\u003c/i\u003e",
            "url": "/getting-started/",
            "weight": -100
         }
      ]
   }
}

菜单中URLs必须相对与上下文的根。如果baseURL是https://example.com/mysite/, 那么在菜单中的URL必须不包含上下文的根mysite. 使用绝对URL会覆盖baseURL. 如果上例中使用的URL是https://subdomain.example.com/, 那么输出是https://subdomain.example.com

菜单嵌套

菜单的所有嵌套通过parent节点.

菜单条目的父节点应该是另一个条目的标志符号identifier. 标志符号应该唯一(在一个菜单内).

下面的顺序用来确定标志符:

.Name > .LinkTitle > .Title

上面的.Title 将被使用除非.LinkTitle存在, 以此类推。实践中, .Name 和 .Identifier只用来构建菜单结构关系，因此不会被显示.

上面例子中, 菜单的顶层元素在site config file中定义。所有的内容条目通过.Parent和在这些顶层条目中的一个绑定。

参数

可以通过params域给菜单条目添加用户定义内容.

常见的用例是定义一个参数添加css类给特定菜单条目.