Wir haben zwei Arten von Menüs vordefiniert: main und footer, repräsentieren die oberen Menüs der App-Leiste bzw. die Fußzeilenmenüs.
In diesem Artikel wird die Verwendung der Menüs kurz vorgestellt.
Menüeintragseigenschaften
| Eigentum | Geben Sie | ein Beschreibung |
|---|---|---|
name | Zeichenfolge | Der Name des Menüs. |
identifier | Zeichenfolge | Die ID des Menüs. |
weight | Nummer | Die Gewichtung des Menüs, das für die Sortierung in aufsteigender Reihenfolge verwendet wird. |
parent | Zeichenfolge | Das identifier des übergeordneten Menüeintrags. |
url | Zeichenfolge | Die URL des Menüs. |
pre | Zeichenfolge | Die führende Zeichenfolge vor dem Menünamen. |
post | Zeichenfolge | Die abschließende Zeichenfolge nach dem Menünamen. |
params | Objekt | Menüparameter. |
params.divider | Boolescher Wert | true bedeutet Teiler. |
params.icon | Zeichenfolge | Das Symbol HTML. |
params.description | Zeichenfolge | Die Beschreibung gilt nur für die Dropdown-Menüs der oberen App-Leiste. |
Siehe auch Eigenschaften des Menüeintrags.
Nutzung
Konfiguration
Die Menükonfigurationsdatei befindet sich standardmäßig in
config/_default/menu.toml.
Nehmen wir als Beispiel das Menü main:
1[[main]]
2 identifier = "home"
3 name = "Home"
4 weight = 1
5 url = "https://vandenboom.online/"
6 [main.params]
7 icon = '<i class="fas fa-home"></i>'
8[[main]]
9 identifier = "blog"
10 name = "Blog"
11 weight = 2
12 [main.params]
13 icon = '<i class="fas fa-fw fa-blog"></i>'
14[[main]]
15 name = "Support"
16 identifier = "support"
17 weight = 40
18 [main.params]
19 description = 'The HBS Support Community'
20 icon = '<i class="fas fa-fw fa-info-circle"></i>'
21[[main]]
22 name = "Repository"
23 identifier = "repository"
24 parent = "support"
25 url = "https://github.com/razonyang/hugo-theme-bootstrap"
26 weight = 1
27 [main.params]
28 icon = '<i class="fab fa-fw fa-github text-primary"></i>'
29[[main]]
30 name = "Discussions"
31 identifier = "discussions"
32 parent = "support"
33 url = "https://github.com/razonyang/hugo-theme-bootstrap/discussions/new"
34 weight = 2
35 [main.params]
36 description = "Ask and discuss questions with others."
37 icon = '<i class="fas fa-fw fa-comments text-success"></i>'
38[[main]]
39 name = "Features Request"
40 identifier = "feature-request"
41 parent = "support"
42 url = "https://github.com/razonyang/hugo-theme-bootstrap/issues/new?template=feature_request.yml"
43 weight = 3
44 [main.params]
45 description = "Suggest new or updated features."
46 icon = '<i class="fas fa-fw fa-lightbulb text-warning"></i>'
47[[main]]
48 name = "Bug Report"
49 identifier = "bug-report"
50 parent = "support"
51 url = "https://github.com/razonyang/hugo-theme-bootstrap/issues/new?template=bug_report.yml"
52 weight = 3
53 [main.params]
54 description = "Tell us about a bug or issue."
55 icon = '<i class="fas fa-fw fa-bug text-danger"></i>'
56[[main]]
57 parent = "support"
58 weight = 4
59 [main.params]
60 divider = true
Siehe Symbole zum Importieren von Symbolen und zum Festlegen der Symbolfarbe.
Titelsache
Wir können das Menü auch über die Titelseite der Seite konfigurieren.
1[menu.main]
2 parent = "support"
3 weight = 6
4[menu.footer]
5 parent = "support"
6 weight = 6
7 [menu.footer.params]
8 icon = '<i class="fas fa-fw fa-question-circle"></i>'
Das Code-Snippet hängt die Seite an die Menüs main und footer an.
Es ist nicht erforderlich, die Parameter
urlundnameanzugeben.
Kommentare