HUGO ja 非公式

  • ニュース
  • ドキュメント
  • テーマ
  • コミュニティ
  • GitHub
gohugoio Star づけ
  暫定公開中 2024/09/16 (94d7f576a 対応, 2024/09/15)
  • Hugo について
    • 本節
    • Introduction
    • Hugo の機能
    • Privacy
    • セキュリティ
    • ライセンス
  • インストール
    • 本節
    • macOS
    • Linux
    • Windows
    • BSD
  • はじめよう
    • 本節
    • クイックスタート
    • ディレクトリ構造
    • 基本操作
    • 設定
    • Configure markup
    • 用語集
    • 本書以外の学習リソース
  • クイックリファレンス
    • 本節
    • Emojis
    • Functions
    • Methods
    • Page collections
  • コンテント管理
    • 本節
    • コンテントの構成
    • ページバンドル
    • コンテントフォーマット
    • フロントマター
    • ビルドオプション
    • ページリソース
    • イメージ処理
    • ショートコード
    • 関連コンテント
    • Sections
    • Content types
    • アーキタイプ
    • 分類
    • Summaries
    • Links and cross references
    • URL 管理
    • メニュー
    • コメント
    • マルチ言語
    • Markdown attributes
    • シンタックスハイライト
    • Diagrams
    • Mathematics
    • Data sources
    • Content adapters
  • テンプレート
    • 本節
    • はじめに
    • Template types
    • Lookup order
    • 基本テンプレート
    • Home templates
    • Single templates
    • Section templates
    • Taxonomy templates
    • Term templates
    • 部分テンプレート
    • コンテントビューテンプレート
    • ショートコードテンプレート
    • サイトマップテンプレート
    • RSS テンプレート
    • 404 テンプレート
    • robots.txt templates
    • メニュー
    • ページネーション
    • Embedded templates
    • Custom output formats
  • 関数
    • 本節
    • cast
    • collections
    • compare
    • crypto
    • css
    • data
    • debug
    • diagrams
    • encoding
    • fmt
    • global
    • go template
    • hash
    • hugo
    • images
    • inflect
    • js
    • lang
    • math
    • openapi3
    • os
    • partials
    • path
    • reflect
    • resources
    • safe
    • strings
    • templates
    • time
    • transform
    • urls
  • メソッド
    • 本節
    • Duration
    • Menu
    • Menu entry
    • Page
    • Pager
    • Pages
    • Resource
    • Shortcode
    • Site
    • Taxonomy
    • Time
  • レンダーフック
    • 本節
    • Introduction
    • Blockquotes
    • Code blocks
    • Headings
    • Images
    • Links
    • Passthrough
    • Tables
  • Hugo モジュール
    • In this section
    • Configure Hugo modules
    • Use Hugo Modules
    • Theme components
  • Hugo パイプ
    • 本節
    • Introduction
    • Transpile Sass to CSS
    • PostCSS
    • PostProcess
    • JavaScript building
    • Babel
    • Asset minification
    • Concatenating assets
    • Fingerprinting and SRI hashing
    • Resource from string
    • Resource from template
  • CLI
  • トラブルシューティング
    • 本節
    • Logging
    • Inspection
    • Deprecation
    • Performance
    • FAQs
  • 開発ツール
    • 本節
    • Editor plugins
    • Front-ends
    • 検索
    • Migrations
    • Other projects
  • ホスティングと開発
    • 本節
    • Hugo Deploy
    • Deploy with Rclone
    • Deploy with Rsync
    • Host on 21YunBox
    • Host on AWS Amplify
    • Host on Azure Static Web Apps
    • Host on Cloudflare Pages
    • Host on Firebase
    • Host on GitHub Pages
    • Host on GitLab Pages
    • Host on KeyCDN
    • Host on Netlify
    • Host on Render
  • 貢献
    • 本節
    • Development
    • ドキュメント
    • Themes
  • メンテナンス
コンテント管理

メニュー

Create menus by defining entries, localizing each entry, and rendering the resulting data structure.

概要

サイト内にメニューを生成するには以下を行います。

  1. メニューエントリーを定義します。
  2. 各エントリーを ローカライズ します。
  3. テンプレート を使ってメニューをレンダリングします。

Create multiple menus, either flat or nested. For example, create a main menu for the header, and a separate menu for the footer.

There are three ways to define menu entries:

  1. Automatically
  2. In front matter
  3. In site configuration

Although you can use these methods in combination when defining a menu, the menu will be easier to conceptualize and maintain if you use one method throughout the site.

Define automatically

To automatically define a menu entry for each top-level section of your site, enable the section pages menu in your site configuration.

hugo.
     
sectionPagesMenu: main
sectionPagesMenu = 'main'
{
   "sectionPagesMenu": "main"
}

This creates a menu structure that you can access with site.Menus.main in your templates. See menu templates for details.

Define in front matter

To add a page to the “main” menu:

content/about.md
     
---
menus: main
title: About
---
+++
menus = 'main'
title = 'About'
+++
{
   "menus": "main",
   "title": "About"
}

Access the entry with site.Menus.main in your templates. See menu templates for details.

To add a page to the “main” and “footer” menus:

content/contact.md
     
---
menus:
- main
- footer
title: Contact
---
+++
menus = ['main', 'footer']
title = 'Contact'
+++
{
   "menus": [
      "main",
      "footer"
   ],
   "title": "Contact"
}

Access the entry with site.Menus.main and site.Menus.footer in your templates. See menu templates for details.

The configuration key in the examples above is menus. The menu (singular) configuration key is an alias for menus.

Properties

Use these properties when defining menu entries in front matter:

identifier
(string) Required when two or more menu entries have the same name, or when localizing the name using translation tables. Must start with a letter, followed by letters, digits, or underscores.
name
(string) The text to display when rendering the menu entry.
params
(map) User-defined properties for the menu entry.
parent
(string) The identifier of the parent menu entry. If identifier is not defined, use name. Required for child entries in a nested menu.
post
(string) The HTML to append when rendering the menu entry.
pre
(string) The HTML to prepend when rendering the menu entry.
title
(string) The HTML title attribute of the rendered menu entry.
weight
(int) A non-zero integer indicating the entry’s position relative the root of the menu, or to its parent for a child entry. Lighter entries float to the top, while heavier entries sink to the bottom.

Example

This front matter menu entry demonstrates some of the available properties:

content/products/software.md
     
---
menus:
  main:
  - params:
      class: center
    parent: Products
    pre: <i class="fa-solid fa-code"></i>
    weight: 20
title: Software
---
+++
title = 'Software'
[menus]
  [[menus.main]]
    parent = 'Products'
    pre = '<i class="fa-solid fa-code"></i>'
    weight = 20
    [menus.main.params]
      class = 'center'
+++
{
   "menus": {
      "main": [
         {
            "params": {
               "class": "center"
            },
            "parent": "Products",
            "pre": "\u003ci class=\"fa-solid fa-code\"\u003e\u003c/i\u003e",
            "weight": 20
         }
      ]
   },
   "title": "Software"
}

Access the entry with site.Menus.main in your templates. See menu templates for details.

Define in site configuration

To define entries for the “main” menu:

hugo.
     
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
         }
      ]
   }
}

This creates a menu structure that you can access with site.Menus.main in your templates. See menu templates for details.

To define entries for the “footer” menu:

hugo.
     
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
         }
      ]
   }
}

This creates a menu structure that you can access with site.Menus.footer in your templates. See menu templates for details.

The configuration key in the examples above is menus. The menu (singular) configuration key is an alias for menus.

Properties

The properties available to entries defined in front matter are also available to entries defined in site configuration.

Each menu entry defined in site configuration requires two or more properties:

  • Specify name and pageRef for internal links
  • Specify name and url for external links
pageRef
(string) The logical path of the target page, relative to the content directory. Omit language code and file extension. Required for internal links.
Kind pageRef
home /
page /books/book-1
section /books
taxonomy /tags
term /tags/foo
url
(string) Required for external links.

Example

This nested menu demonstrates some of the available properties:

hugo.
     
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://gohugo.io/
    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://gohugo.io/'
    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://gohugo.io/",
            "weight": 30
         }
      ]
   }
}

This creates a menu structure that you can access with site.Menus.main in your templates. See menu templates for details.

Localize

Hugo provides two methods to localize your menu entries. See multilingual.

Render

See menu templates.

関連項目

  • メニュー
  • Content adapters
  • Markdown attributes
  • Mathematics in Markdown
  • Passthrough render hooks

このページ内

  • 概要
  • Define automatically
  • Define in front matter
  • Define in site configuration
  • Localize
  • Render
最終更新日付: 0001/01/01
ページの変更
Hugo 作者より
Hugo Logo
  • Issue 報告
  • ヘルプ
  • @GoHugoIO
  • @spf13
  • @bepsays
 

Hugo Sponsors

Route4Me
Your Company?
 

The Hugo logos are copyright © Steve Francia 2013–2024.

The Hugo Gopher is based on an original work by Renée French.

  • ニュース
  • ドキュメント
  • テーマ
  • コミュニティ
  • GitHub
  • Hugo について
  • インストール
  • はじめよう
  • クイックリファレンス
  • コンテント管理
  • テンプレート
  • 関数
  • メソッド
  • レンダーフック
  • Hugo モジュール
  • Hugo パイプ
  • CLI
  • トラブルシューティング
  • 開発ツール
  • ホスティングと開発
  • 貢献
  • メンテナンス