HUGO
Menu
GitHub 87548 stars Mastodon

Hugo 配置菜單

Hugo 集中定義一個或多個菜單的菜單條目。

要了解 Hugo 的菜單系統，請參閱 菜單 頁面。

有三種方法可以定義菜單條目：

  1. 自動定義
  2. 在 front matter 中定義
  3. 在站點配置中定義

本頁面介紹站點配置方法。

示例

要為 “main” 菜單定義條目：

menus:
  main:
  - name: Home
    pageRef: /
    weight: 10
  - name: Products
    pageRef: /products
    weight: 20
  - name: Services
    pageRef: /services
    weight: 30

[menus]
  [[menus.main]]
    name = 'Home'
    pageRef = '/'
    weight = 10
  [[menus.main]]
    name = 'Products'
    pageRef = '/products'
    weight = 20
  [[menus.main]]
    name = 'Services'
    pageRef = '/services'
    weight = 30

{
   "menus": {
      "main": [
         {
            "name": "Home",
            "pageRef": "/",
            "weight": 10
         },
         {
            "name": "Products",
            "pageRef": "/products",
            "weight": 20
         },
         {
            "name": "Services",
            "pageRef": "/services",
            "weight": 30
         }
      ]
   }
}

這將創建一個菜單結構，您可以使用 Site 對象上的 Menus 方法訪問：

{{ range .Site.Menus.main }}
  ...
{{ end }}

詳見 菜單模板 獲取詳細示例。

要為 “footer” 菜單定義條目：

menus:
  footer:
  - name: Terms
    pageRef: /terms
    weight: 10
  - name: Privacy
    pageRef: /privacy
    weight: 20

[menus]
  [[menus.footer]]
    name = 'Terms'
    pageRef = '/terms'
    weight = 10
  [[menus.footer]]
    name = 'Privacy'
    pageRef = '/privacy'
    weight = 20

{
   "menus": {
      "footer": [
         {
            "name": "Terms",
            "pageRef": "/terms",
            "weight": 10
         },
         {
            "name": "Privacy",
            "pageRef": "/privacy",
            "weight": 20
         }
      ]
   }
}

以相同方式訪問此菜單結構：

{{ range .Site.Menus.footer }}
  ...
{{ end }}

屬性

菜單條目通常至少包含三個屬性：name、weight 以及 pageRef 或 url。對內部頁面目標使用 pageRef，對外部目標使用 url。

以下是可用的菜單條目屬性：

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) 一個非零整數，表示條目相對於菜單根目錄的位置，或對於子條目相對於其父條目的位置。較輕的條目浮到頂部，較重的條目沉到底部。
pageRef
(string) 目標頁面的 邏輯路徑。例如：
頁面類型 pageRef
首頁 /
頁面 /books/book-1
欄目 /books
分類法 /tags
術語 /tags/foo
url
(string) 目標 URL。僅用於外部目標。

嵌套菜單

這個嵌套菜單展示了一些可用屬性：

menus:
  main:
  - name: Products
    pageRef: /products
    weight: 10
  - name: Hardware
    pageRef: /products/hardware
    parent: Products
    weight: 1
  - name: Software
    pageRef: /products/software
    parent: Products
    weight: 2
  - name: Services
    pageRef: /services
    weight: 20
  - name: Hugo
    params:
      rel: external
    pre: <i class="fa fa-heart"></i>
    url: https://www.hugodoc.com/
    weight: 30

[menus]
  [[menus.main]]
    name = 'Products'
    pageRef = '/products'
    weight = 10
  [[menus.main]]
    name = 'Hardware'
    pageRef = '/products/hardware'
    parent = 'Products'
    weight = 1
  [[menus.main]]
    name = 'Software'
    pageRef = '/products/software'
    parent = 'Products'
    weight = 2
  [[menus.main]]
    name = 'Services'
    pageRef = '/services'
    weight = 20
  [[menus.main]]
    name = 'Hugo'
    pre = '<i class="fa fa-heart"></i>'
    url = 'https://www.hugodoc.com/'
    weight = 30
    [menus.main.params]
      rel = 'external'

{
   "menus": {
      "main": [
         {
            "name": "Products",
            "pageRef": "/products",
            "weight": 10
         },
         {
            "name": "Hardware",
            "pageRef": "/products/hardware",
            "parent": "Products",
            "weight": 1
         },
         {
            "name": "Software",
            "pageRef": "/products/software",
            "parent": "Products",
            "weight": 2
         },
         {
            "name": "Services",
            "pageRef": "/services",
            "weight": 20
         },
         {
            "name": "Hugo",
            "params": {
               "rel": "external"
            },
            "pre": "\u003ci class=\"fa fa-heart\"\u003e\u003c/i\u003e",
            "url": "https://www.hugodoc.com/",
            "weight": 30
         }
      ]
   }
}
Last updated: January 1, 0001
Improve this page