Apr 23, 2019

Menus

[TOC]

Hugo verfügt über ein einfaches und dennoch leistungsfähiges Menüsystem.

Wenn nur ein einfaches Menü gewünscht ist, hilft “Section Menu for Lazy Bloggers” in Menu Templates weiter.

Folgendes ist möglich:

  • Inhalte in einem oder mehreren Menüs platzieren,
  • Handhabung verschachtelter Menüs mit unbegrenzter Tiefe,
  • Erstellen Sie Menüeinträge, ohne an einen Inhalt gebunden zu sein,
  • Unterscheidung zwischen aktivem Element (und aktivem Zweig).

Photo by Afifi Zulkifle on Unsplash

Was ist ein Menu in Hugo?

Ein Menü ist ein benanntes Array von Menüeinträgen, auf das über die site variable .Site.Menus mit Namen zugegriffen werden kann - beispielsweise über .Site.Menus.main auf das Hauptmenü der Website.

Bei der Nutzung von multilingual feature, können sprachunabhängige Menüs definiert werden.

Siehe Menu Entry Properties (Eigenschaften der Menüeinträge) für alle Variablen und Funktionen, die sich auf einen Menüeintrag beziehen.

Inhalte zu Menüs hinzufügen

Hugo ermöglicht es Ihnen, einem Menu Inhalte über die front matter (siehe auch hier) des Inhalts hinzuzufügen.

Simple

Um einen Eintrag zu einem Menu hinzuzufügen, funktioniert das einfache Formular gut.

A single menu

---
menu: "main"
---

Multiple Menus

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

Advanced

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

Hinzufügen von nicht inhaltlichen Einträgen zu einem Menu

Um Einträge zu Menüs hinzuzufügen, die nicht an einen Inhalt gebunden sind, genügt ein Eintrag in die Konfigurationsdatei config.toml des Hugo-Projekts.

Hier ist ein exemplarischer Ausschnitt aus einer Konfigurationsdatei:

[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

Die URLs müssen relativ zur Wurzelverzeichnis sein. Wenn die baseURL https://example.com/mysite/ ist, dann dürfen die URLs im Menu nicht mysite im Wurzelverzeinis enthalten. Die Verwendung einer absoluten URL überschreibt die baseURL. Wenn der Wert, der im obigen Beispiel für die URL verwendet wird, https://subdomain.example.com/ ist, lautet die Ausgabe https://subdomain.example.com.

Nesting (Verschachtelung)

Alle Verschachtelungen von Inhalten erfolgen über das übergeordnete Feld parent.

Der übergeordnete Teil eines Eintrags sollte der Identifikator eines anderen Eintrags sein. Der Identifikator sollte eindeutig sein (innerhalb eines Menüs).

Die folgende Reihenfolge wird verwendet, um einen Identifier zu bestimmen:

.Name > .LinkTitle > .Title

Das bedeutet, dass .Title verwendet wird, es sei denn, .LinkTitle ist vorhanden, etc. In der Praxis werden .Name und .Identifier nur zur Strukturierung von Beziehungen verwendet und daher nie angezeigt.

In diesem Beispiel wird die oberste Ebene des Menüs in der Konfigurationsdatei der Website definiert. Alle Inhaltseinträge werden über das Feld .parent an einen dieser Einträge angehängt.

Render-Menüs Unter Menu Templates finden sich Informationen darüber, wie Seitenmenüs innerhalb der Templates (Vorlagen) dargestellt werden können.