Меню

Ты можешь это сделать:

• Размещение контента в одном или нескольких меню
• Обработка вложенных меню с неограниченной глубиной
• Создание пунктов меню без привязки к какому-либо контенту
• Различать активный элемент (и активную ветвь)

Что такое меню в Hugo?

menu - это именованный массив пунктов меню, доступных по имени через переменную сайта .Site.Menus. Например, Вы можете получить доступ к главному меню main Вашего сайта через .Site.Menus.main.

Смотрите свойства элемента меню для получения информации обо всех переменных и функциях, связанных с элементом меню.

Добавить контент в меню

Hugo позволяет Вам добавлять контент в меню через front matter.

Простое

Если все, что Вам нужно сделать, это добавить запись в меню, простая форма подойдет.

Одиночное меню

---
menu: "main"
---

Мультименю

---
menu: ["main", "footer"]
---

Продвинутое

---
menu:
  docs:
    parent: 'extras'
    weight: 20
---

Добавление записей, не относящихся к содержанию, в меню

Вы также можете добавлять элементы в меню, которые не связаны с частью контента. Это происходит в файле config file Вашего проекта Hugo.

Вот пример фрагмента, извлеченного из файла конфигурации:

menu:
  main:
  - identifier: about
    name: about hugo
    pre: <i class='fa fa-heart'></i>
    url: /about/
    weight: -110
  - name: getting started
    post: <span class='alert'>New!</span>
    pre: <i class='fa fa-road'></i>
    url: /getting-started/
    weight: -100

[menu]

  [[menu.main]]
    identifier = "about"
    name = "about hugo"
    pre = "<i class='fa fa-heart'></i>"
    url = "/about/"
    weight = -110

  [[menu.main]]
    name = "getting started"
    post = "<span class='alert'>New!</span>"
    pre = "<i class='fa fa-road'></i>"
    url = "/getting-started/"
    weight = -100

{
   "menu": {
      "main": [
         {
            "identifier": "about",
            "name": "about hugo",
            "pre": "\u003ci class='fa fa-heart'\u003e\u003c/i\u003e",
            "url": "/about/",
            "weight": -110
         },
         {
            "name": "getting started",
            "post": "\u003cspan class='alert'\u003eNew!\u003c/span\u003e",
            "pre": "\u003ci class='fa fa-road'\u003e\u003c/i\u003e",
            "url": "/getting-started/",
            "weight": -100
         }
      ]
   }
}

Вложенность

Все вложение контента выполняется через поле parent.

Родительский элемент записи должен быть идентификатором другой записи. Идентификатор должен быть уникальным (в пределах меню).

Для определения идентификатора используется следующий порядок:

.Name > .LinkTitle > .Title

Это означает, что .Title будет использоваться, если не присутствует .LinkTitle и т.д. На практике, .Name и .Identifier используются только для структурирования отношений и поэтому никогда не отображаются.

В этом примере верхний уровень меню определен в Вашем файле сайта config. Все записи содержимого прикрепляются к одной из этих записей через поле .Parent.

Параметры

Вы также можете добавить определяемый пользователем контент в пункты меню через поле params.

Типичным вариантом использования является определение настраиваемого параметра для добавления класса css к определенному пункту меню.

menu:
  main:
  - identifier: about
    name: about hugo
    params:
      class: highlight-menu-item
    pre: <i class='fa fa-heart'></i>
    url: /about/
    weight: -110

[menu]

  [[menu.main]]
    identifier = "about"
    name = "about hugo"
    pre = "<i class='fa fa-heart'></i>"
    url = "/about/"
    weight = -110
    [menu.main.params]
      class = "highlight-menu-item"

{
   "menu": {
      "main": [
         {
            "identifier": "about",
            "name": "about hugo",
            "params": {
               "class": "highlight-menu-item"
            },
            "pre": "\u003ci class='fa fa-heart'\u003e\u003c/i\u003e",
            "url": "/about/",
            "weight": -110
         }
      ]
   }
}

Рендеринг меню

Смотрите шаблоны меню для получения информации о том, как отображать меню Вашего сайта в Ваших шаблонах.