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