Menus

Menus 方法在 Site 物件中回傳一個菜單集合，每個菜單包含一個或多個項目，可以是扁平結構或嵌套結構。每個項目指向網站中的一個頁面或外部資源。

一個網站可以有多個菜單，例如主菜單和頁腳菜單：

hugo.
      
menus:
  footer:
  - name: 法律
    pageRef: /legal
    weight: 10
  - name: 隱私
    pageRef: /privacy
    weight: 20
  main:
  - name: 首頁
    pageRef: /
    weight: 10
  - name: 書籍
    pageRef: /books
    weight: 20
  - name: 電影
    pageRef: /films
    weight: 30

[menus]
  [[menus.footer]]
    name = '法律'
    pageRef = '/legal'
    weight = 10
  [[menus.footer]]
    name = '隱私'
    pageRef = '/privacy'
    weight = 20
  [[menus.main]]
    name = '首頁'
    pageRef = '/'
    weight = 10
  [[menus.main]]
    name = '書籍'
    pageRef = '/books'
    weight = 20
  [[menus.main]]
    name = '電影'
    pageRef = '/films'
    weight = 30

{
   "menus": {
      "footer": [
         {
            "name": "法律",
            "pageRef": "/legal",
            "weight": 10
         },
         {
            "name": "隱私",
            "pageRef": "/privacy",
            "weight": 20
         }
      ],
      "main": [
         {
            "name": "首頁",
            "pageRef": "/",
            "weight": 10
         },
         {
            "name": "書籍",
            "pageRef": "/books",
            "weight": 20
         },
         {
            "name": "電影",
            "pageRef": "/films",
            "weight": 30
         }
      ]
   }
}

此範本渲染主菜單：

{{ with site.Menus.main }}
  <nav class="menu">
    {{ range . }}
      {{ if $.IsMenuCurrent .Menu . }}
        <a class="active" aria-current="page" href="{{ .URL }}">{{ .Name }}</a>
      {{ else }}
        <a href="{{ .URL }}">{{ .Name }}</a>
      {{ end }}
    {{ end }}
  </nav>
{{ end }}

當查看首頁時，結果為：

<nav class="menu">
  <a class="active" aria-current="page" href="/">首頁</a>
  <a href="/books/">書籍</a>
  <a href="/films/">電影</a>
</nav>

當查看「書籍」頁面時，結果為：

<nav class="menu">
  <a href="/">首頁</a>
  <a class="active" aria-current="page" href="/books/">書籍</a>
  <a href="/films/">電影</a>
</nav>

通常您會使用部分模板來渲染菜單。由於每個頁面的活動菜單項目不同，請使用 partial 函數來調用模板。不要使用 partialCached 函數。

上述範例較為簡單。請參見菜單模板部分了解更多信息。

Microseconds Menu