メニュー

Hugo は、シンプルでありながら強力なメニューシステムを備えています。

On this page

概要

サイトのメニューを作成するには、以下のようにします。

メニューエントリを定義する
各エントリをローカライズします
テンプレートを使用してメニューをレンダリングします

フラットまたはネストされた複数のメニューを作成します。たとえば、ヘッダーにはメインメニューを作成し、フッターには別のメニューを作成します。

メニューエントリを定義するには、以下の 3 つの方法があります。

自動的に
フロントマターで
サイト設定で

自動的に定義する

サイトの最上位セクションごとにメニューエントリを自動的に定義するには、サイト設定でセクションページメニューを有効にします。

sectionPagesMenu: main

sectionPagesMenu = 'main'

{
   "sectionPagesMenu": "main"
}

これにより、テンプレートの site.Menus.main でアクセスできるメニュー構造が作成されます。詳細は、メニューテンプレートを参照してください。

フロントマターで定義する

「メイン」メニューにページを追加するには、以下のようにします。

---
menu: main
title: About
---

+++
menu = 'main'
title = 'About'
+++

{
   "menu": "main",
   "title": "About"
}

テンプレート内の site.Menus.main のエントリーにアクセスしてください。詳細は、メニューテンプレートを参照してください。

「メイン」メニューと「フッター」メニューにページを追加するには、以下のようにします。

---
menu:
- main
- footer
title: Contact
---

+++
menu = ['main', 'footer']
title = 'Contact'
+++

{
   "menu": [
      "main",
      "footer"
   ],
   "title": "Contact"
}

テンプレート内の site.Menus.main および site.Menus.footer を使用してエントリにアクセスします。詳細は、メニューテンプレートを参照してください。

プロパティ

これらのプロパティは、フロントマターでメニュー項目を定義するときに以下のように使用します。

identifier: (string) 2 つ以上のメニュー項目が同じ name を持つとき、または翻訳テーブルを使って name をローカライズするときに必要です。文字で始まり、その後にアルファベット、数字、アンダースコアが続く必要があります。
name: (string) メニューエントリをレンダリングするときに表示するテキストです。
params: (map) メニューエントリのユーザー定義プロパティです。
parent: (string) 親メニューエントリの identifier を指定します。 identifier が定義されていない場合は name を使用します。ネストされたメニューの子エントリに必要です。
post: (string) メニューエントリをレンダリングするときに後ろに追加する HTML。
pre: (string) メニューエントリをレンダリングするときに先頭に追加する HTML。
title: (string) レンダリングされたメニューエントリの HTML title 属性。
weight: (int) 0 ではない整数値で、メニューのルートからの相対的な位置、または子エントリの場合は親からの相対的な位置を表します。軽いエントリは上に浮き、重いエントリは下に沈みます。

例

このフロントマターのメニューエントリは、以下のような使用可能なプロパティの一部を示しています。

---
menu:
  main:
    params:
      class: center
    parent: Products
    pre: <i class="fa-solid fa-code"></i>
    weight: 20
title: Software
---

+++
title = 'Software'
[menu]
  [menu.main]
    parent = 'Products'
    pre = '<i class="fa-solid fa-code"></i>'
    weight = 20
    [menu.main.params]
      class = 'center'
+++

{
   "menu": {
      "main": {
         "params": {
            "class": "center"
         },
         "parent": "Products",
         "pre": "\u003ci class=\"fa-solid fa-code\"\u003e\u003c/i\u003e",
         "weight": 20
      }
   },
   "title": "Software"
}

テンプレート内の site.Menus.main のエントリーにアクセスしてください。詳細は、メニューテンプレートを参照してください。

サイト構成で定義する

「メイン」メニューのエントリを定義するには、以下のようにします。

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

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

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

これにより、テンプレートの site.Menus.main でアクセスできるメニュー構造が作成されます。詳細は、メニューテンプレートを参照してください。

「フッター」メニューのエントリを定義するには、以下のようにします。

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

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

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

これにより、テンプレートの site.Menus.footer でアクセスできるメニュー構造が作成されます。詳細は、メニューテンプレートを参照してください。

プロパティ

サイト構成で定義された各メニューエントリには、2 つ以上のプロパティが必要です。

内部リンクには name と pageRef を指定します
外部リンクには name と url を指定します

pageRef: (string) content ディレクトリを基準とした、ターゲットページのファイルパスです。言語コードとファイル拡張子を省略します。内部リンクには必須です。

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

url: (string) 外部リンクには必須です。

例

このネストされたメニューは、以下のような、利用可能なプロパティのいくつかを示しています。

menu:
  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

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

{
   "menu": {
      "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
         }
      ]
   }
}

これにより、テンプレートの site.Menus.main でアクセスできるメニュー構造が作成されます。詳細は、メニューテンプレートを参照してください。

ローカライズする

Hugo は、メニューエントリをローカライズする 2 つの方法を提供します。多言語対応を参照してください。

レンダリングする

メニューテンプレートを参照してください。