Nous avons prédéfini deux types de menus : main et footer, représentent respectivement les menus de la barre supérieure de l’application et les menus de pied de page.
Cet article présentera brièvement comment utiliser les menus.
Propriétés de l’entrée de menu
| Propriété | Tapez | Descriptif |
|---|---|---|
name | Chaîne | Le nom du menu. |
identifier | Chaîne | L’ID du menu. |
weight | Numéro | Le poids du menu utilisé pour le tri par ordre croissant. |
parent | Chaîne | Le identifier de l’entrée du menu parent. |
url | Chaîne | L’URL du menu. |
pre | Chaîne | La chaîne de début avant le nom du menu. |
post | Chaîne | La chaîne de fin après le nom du menu. |
params | Objet | Paramètres des menus. |
params.divider | Booléen | true signifie diviseur. |
params.icon | Chaîne | L’icône HTML. |
params.description | Chaîne | La description des menus déroulants de la barre d’application supérieure uniquement. |
Voir aussi Propriétés de l’entrée de menu.
Utilisation
###Configuration
Le fichier de configuration des menus se trouve par défaut dans
config/_default/menu.toml.
Prenons comme exemple le menu 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
Voir Icônes pour importer des icônes et définir la couleur de l’icône.
Questions préliminaires
Nous pouvons également configurer le menu via la page d’accueil.
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>'
L’extrait de code ajoute la page au menu main et footer.
Il n’est pas nécessaire de préciser les paramètres
urletname.