Menus

January 1, 1

概覽

要為您的網站創建選單：

定義選單項目
為每個項目進行 [本地化]
使用模板渲染選單

可以創建多個選單，無論是平面選單還是嵌套選單。例如，為頁首創建主選單，並為頁尾創建單獨的選單。

有三種方法可以定義選單項目：

自動定義
在 Front Matter 中定義
在網站配置中定義

自動定義

要為您的網站每個頂層區段自動定義一個選單項目，請在網站配置中啟用區段頁面選單。

hugo.

sectionPagesMenu: main

sectionPagesMenu = 'main'

{
   "sectionPagesMenu": "main"
}

這會創建一個選單結構，您可以在模板中使用 site.Menus.main 訪問。詳情請參見選單模板。

在 Front Matter 中定義

要將一個頁面添加到「主」選單：

content/about.md

---
menus: main
title: 關於
---

+++
menus = 'main'
title = '關於'
+++

{
   "menus": "main",
   "title": "關於"
}

在模板中使用 site.Menus.main 訪問此項目。詳情請參見選單模板。

要將一個頁面添加到「主」和「頁尾」選單：

content/contact.md

---
menus:
- main
- footer
title: 聯絡
---

+++
menus = ['main', 'footer']
title = '聯絡'
+++

{
   "menus": [
      "main",
      "footer"
   ],
   "title": "聯絡"
}

在模板中分別使用 site.Menus.main 和 site.Menus.footer 訪問此項目。詳情請參見選單模板。

屬性

在 Front Matter 中定義選單項目時，使用以下屬性：

identifier: (string) 當兩個或更多選單項目的 name 相同，或使用翻譯表進行 name 本地化時，必須指定。必須以字母開頭，後接字母、數字或底線。
name: (string) 渲染選單項目時顯示的文字。
params: (map) 用戶定義的選單項目屬性。
parent: (string) 父選單項目的 identifier。如果未定義 identifier，則使用 name。對於嵌套選單中的子項目，這是必須的。
post: (string) 渲染選單項目時附加的 HTML。
pre: (string) 渲染選單項目時前置的 HTML。
title: (string) 渲染的選單項目的 HTML title 屬性。
weight: (int) 表示項目相對於選單根部的位置或相對於其父項目的位置的非零整數。較輕的項目會浮到上面，而較重的項目會沉到底部。

範例

此 Front Matter 選單項目示範了可用的屬性：

content/products/software.md

---
menus:
  main:
    params:
      class: center
    parent: 產品
    pre: <i class="fa-solid fa-code"></i>
    weight: 20
title: 軟體
---

+++
title = '軟體'
[menus]
  [menus.main]
    parent = '產品'
    pre = '<i class="fa-solid fa-code"></i>'
    weight = 20
    [menus.main.params]
      class = 'center'
+++

{
   "menus": {
      "main": {
         "params": {
            "class": "center"
         },
         "parent": "產品",
         "pre": "\u003ci class=\"fa-solid fa-code\"\u003e\u003c/i\u003e",
         "weight": 20
      }
   },
   "title": "軟體"
}

在模板中使用 site.Menus.main 訪問此項目。詳情請參見選單模板。

在網站配置中定義

要為「主」選單定義項目：

hugo.

menus:
  main:
  - name: 首頁
    pageRef: /
    weight: 10
  - name: 產品
    pageRef: /products
    weight: 20
  - name: 服務
    pageRef: /services
    weight: 30

[menus]
  [[menus.main]]
    name = '首頁'
    pageRef = '/'
    weight = 10
  [[menus.main]]
    name = '產品'
    pageRef = '/products'
    weight = 20
  [[menus.main]]
    name = '服務'
    pageRef = '/services'
    weight = 30

{
   "menus": {
      "main": [
         {
            "name": "首頁",
            "pageRef": "/",
            "weight": 10
         },
         {
            "name": "產品",
            "pageRef": "/products",
            "weight": 20
         },
         {
            "name": "服務",
            "pageRef": "/services",
            "weight": 30
         }
      ]
   }
}

這會創建一個選單結構，您可以在模板中使用 site.Menus.main 訪問。詳情請參見選單模板。

要為「頁尾」選單定義項目：

hugo.

menus:
  footer:
  - name: 條款
    pageRef: /terms
    weight: 10
  - name: 隱私
    pageRef: /privacy
    weight: 20

[menus]
  [[menus.footer]]
    name = '條款'
    pageRef = '/terms'
    weight = 10
  [[menus.footer]]
    name = '隱私'
    pageRef = '/privacy'
    weight = 20

{
   "menus": {
      "footer": [
         {
            "name": "條款",
            "pageRef": "/terms",
            "weight": 10
         },
         {
            "name": "隱私",
            "pageRef": "/privacy",
            "weight": 20
         }
      ]
   }
}

這會創建一個選單結構，您可以在模板中使用 site.Menus.footer 訪問。詳情請參見選單模板。

屬性

每個在網站配置中定義的選單項目需要兩個或更多屬性：

為內部鏈接指定 name 和 pageRef
為外部鏈接指定 name 和 url

pageRef: (string) 目標頁面的邏輯路徑，相對於 content 目錄。省略語言代碼和文件擴展名。必須為內部鏈接提供。

Kind	pageRef
home	`/`
page	`/books/book-1`
section	`/books`
taxonomy	`/tags`
term	`/tags/foo`

url: (string) 必須為外部鏈接提供。

範例

這個嵌套選單示範了一些可用的屬性：

hugo.

menus:
  main:
  - name: 產品
    pageRef: /products
    weight: 10
  - name: 硬體
    pageRef: /products/hardware
    parent: 產品
    weight: 1
  - name: 軟體
    pageRef: /products/software
    parent: 產品
    weight: 2
  - name: 服務
    pageRef: /services
    weight: 20
  - name: Hugo
    params:
      rel: external
    pre: <i class="fa fa-heart"></i>
    url: https://gohugo.io/
    weight: 30

[menus]
  [[menus.main]]
    name = '產品'
    pageRef = '/products'
    weight = 10
  [[menus.main]]
    name = '硬體'
    pageRef = '/products/hardware'
    parent = '產品'
    weight = 1
  [[menus.main]]
    name = '軟體'
    pageRef = '/products/software'
    parent = '產品'
    weight = 2
  [[menus.main]]
    name = '服務'
    pageRef = '/services'
    weight = 20
  [[menus.main]]
    name = 'Hugo'
    pre = '<i class="fa fa-heart"></i>'
    url = 'https://gohugo.io/'
    weight = 30
    [menus.main.params]
      rel = 'external'

{
   "menus": {
      "main": [
         {
            "name": "產品",
            "pageRef": "/products",
            "weight": 10
         },
         {
            "name": "硬體",
            "pageRef": "/products/hardware",
            "parent": "產品",
            "weight": 1
         },
         {
            "name": "軟體",
            "pageRef": "/products/software",
            "parent": "產品",
            "weight": 2
         },
         {
            "name": "服務",
            "pageRef": "/services",
            "weight": 20
         },
         {
            "name": "Hugo",
            "params": {
               "rel": "external"
            },
            "pre": "\u003ci class=\"fa fa-heart\"\u003e\u003c/i\u003e",
            "url": "https://gohugo.io/",
            "weight": 30
         }
      ]
   }
}

這會創建一個選單結構，您可以在模板中使用 site.Menus.main 訪問。詳情請參見選單模板。

本地化

Hugo 提供了兩種方法來本地化您的選單項目。請參見多語言。

渲染

請參見選單模板。