We hebben twee soorten menu’s voorgedefinieerd: main en footer, die respectievelijk de menu’s in de bovenste app-balk en de voettekst vertegenwoordigen. Dit artikel geeft een korte introductie over het gebruik van de menu’s.

EigenschapTypeBeschrijving
nameStringDe naam van het menu.
identifierStringHet ID van het menu.
weightNumberHet gewicht van het menu voor sortering in oplopende volgorde.
parentStringDe identifier van het bovenliggende menu-item.
urlStringDe URL van het menu.
preStringDe voorlooptekst vóór de menunaam.
postStringDe navolgende tekst na de menunaam.
paramsObjectMenuparameters.
params.dividerBooleantrue betekent scheidingslijn.
params.iconStringDe HTML voor het icoon.
params.descriptionStringDe beschrijving voor dropdownmenu’s in de bovenste app-balk.

Zie ook Menu Entry Properties.

Gebruik

Configuratie

Het menuconfiguratiebestand bevindt zich standaard in config/_default/menu.toml.

Laten we main-menu als voorbeeld nemen:

 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

Zie Iconen voor het importeren van iconen en het instellen van de kleur.

Front Matter

We kunnen het menu ook configureren via de front matter van een pagina.

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>'

Het codefragment voegt de pagina toe aan het main- en footer-menu.

Het is niet nodig de parameters url en name op te geven.