Hugo没有对站点呈现的HTML结构做任何假设, 它仅仅提供了您需要的构建菜单的所有功能.

下面是菜单模板例子:

layouts/partials/sidebar.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
37


<!-- sidebar start -->
<aside>
    <ul>
        {{ $currentPage := . }}
        {{ range .Site.Menus.main }}
            {{ if .HasChildren }}
                <li class="{{ if $currentPage.HasMenuCurrent "main" . }}active{{ end }}">
                    <a href="#">
                        {{ .Pre }}
                        <span>{{ .Name }}</span>
                    </a>
                </li>
                <ul class="sub-menu">
                    {{ range .Children }}
                        <li class="{{ if $currentPage.IsMenuCurrent "main" . }}active{{ end }}">
                            <a href="{{ .URL }}">{{ .Name }}</a>
                        </li>
                    {{ end }}
                </ul>
            {{ else }}
                <li>
                    <a href="{{ .URL }}">
                        {{ .Pre }}
                        <span>{{ .Name }}</span>
                    </a>
                </li>
            {{ end }}
        {{ end }}
        <li>
            <a href="#" target="_blank">Hardcoded Link 1</a>
        </li>
        <li>
            <a href="#" target="_blank">Hardcoded Link 2</a>
        </li>
    </ul>
</aside>

疏于打理的博客作者的区块菜单

为启动这个菜单, 在站点config中配置sectionPagesMenu:

1

sectionPagesMenu = "main"

菜单名称随意,但是要记住这个名称.

这会创建一个菜单，所有的区块作为菜单的子项目, 所有的区块的页面作为"shadow-members". 此处_shadow_意味着页面本身并没有作为菜单单元表现, 但是这允许您创建一个顶层的菜单, 类似下面这个:

1
2
3
4
5
6

<nav class="sidebar-nav">
    {{ $currentPage := . }}
    {{ range .Site.Menus.main }}
    <a class="sidebar-nav-item{{if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }} active{{end}}" href="{{ .URL }}" title="{{ .Title }}">{{ .Name }}</a>
    {{ end }}
</nav>

上面,如果菜单单元位于当前区块的list页面或者在区块中某页面上,此单元会标记为active。

站点配置菜单

上面的菜单已经足够。但是如果需要定制菜单单元,比如,改变菜单项目的顺序、名称、或者链接的标题属性等, 您可以在站点配置文件中手工定制菜单

config.
     
1
2
3
4
5
6
7

menu:
  main:
  - identifier: blog
    name: This is the blog section
    title: blog section
    url: /blog/
    weight: -110

1
2
3
4
5
6
7

[menu]
  [[menu.main]]
    identifier = 'blog'
    name = 'This is the blog section'
    title = 'blog section'
    url = '/blog/'
    weight = -110

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

{
   "menu": {
      "main": [
         {
            "identifier": "blog",
            "name": "This is the blog section",
            "title": "blog section",
            "url": "/blog/",
            "weight": -110
         }
      ]
   }
}

在页面前言设定中设置菜单条目

从页面(.md文件)中创建菜单条目也是可能的.

这是yaml例子:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

---
title: Menu Templates
linktitle: Menu Templates
menu:
  docs:
    title: "how to use menus in templates"
    parent: "templates"
    weight: 130
---
...

在菜单中使用.Page变量

如果使用前言设定中定义菜单条目的方法, 那么可以访问.Page变量. 这样允许您使用可以从 page variable访问的每个变量.

这个变量仅在菜单条目是在页面前言设定中定义的时候设置。在站点配置文件中定义的菜单条目对.Page一无所知.

所以需要使用go模板的with关键字或者您模板语言中其他类似的功能.

这是一个例子:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<nav class="sidebar-nav">
  {{ range .Site.Menus.main }}
    <a href="{{ .URL }}" title="{{ .Title }}">
      {{- .Name -}}
      {{- with .Page -}}
        <span class="date">
        {{- dateFormat " (2006-01-02)" .Date -}}
        </span>
      {{- end -}}
    </a>
  {{ end }}
</nav>

在菜单中使用.Params

菜单单元上用户定义的内容可以通过.params访问:

这是例子:

1
2
3
4
5
6
7

<nav class="sidebar-nav">
  {{ range .Site.Menus.main }}
    <a href="{{ .URL }}" title="{{ .Title }}" class="{{ with .Params.class }}{{ . }}{{ end }}">
      {{- .Name -}}
    </a>
  {{ end }}
</nav>