Navigation
Configurez les menus de navigation et les barres latérales dans le thème Jekyll Zer0-Mistakes.
Table of Contents
Navigation
Configurez les menus de navigation et les barres latérales de votre site.
Fichiers de navigation
La navigation est configurée dans _data/navigation/ :
_data/navigation/
├── main.yml # Top navigation bar
├── docs.yml # Documentation sidebar
├── quickstart.yml # Quick start sidebar
└── about.yml # About section sidebar
Navigation principale
Modifiez _data/navigation/main.yml :
- title: "Home"
url: /
- title: "Blog"
url: /blog/
- title: "Docs"
url: /docs/
- title: "About"
url: /about/
# Dropdown menu
- title: "Resources"
children:
- title: "Tutorials"
url: /tutorials/
- title: "API Reference"
url: /api/
- title: "Examples"
url: /examples/
Navigation de la barre latérale
Modifiez _data/navigation/docs.yml :
- title: "Getting Started"
children:
- title: "Installation"
url: /docs/installation/
- title: "Quick Start"
url: /docs/getting-started/quick-start/
- title: "Theme Guide"
url: /docs/getting-started/theme-guide/
- title: "Features"
children:
- title: "Mermaid Diagrams"
url: /docs/features/mermaid-diagrams/
- title: "MathJax"
url: /docs/features/mathjax-math/
- title: "Comments"
url: /docs/features/giscus-comments/
- title: "Customization"
children:
- title: "Layouts"
url: /docs/customization/layouts/
- title: "Styles"
url: /docs/customization/styles/
- title: "Navigation"
url: /docs/customization/navigation/
Utilisation de la barre latérale dans les pages
Indiquez la navigation à utiliser dans le front matter :
---
title: "My Documentation Page"
sidebar:
nav: docs
---
Créer une nouvelle navigation
Étape 1 : Créer le fichier de navigation
Créez _data/navigation/tutorials.yml :
- title: "Beginner"
children:
- title: "Tutorial 1"
url: /tutorials/beginner/part-1/
- title: "Tutorial 2"
url: /tutorials/beginner/part-2/
- title: "Advanced"
children:
- title: "Advanced Topic"
url: /tutorials/advanced/topic/
Étape 2 : Utiliser dans les pages
---
title: "Tutorial Page"
sidebar:
nav: tutorials
---
Liens externes
Ajoutez des liens externes avec external: true :
- title: "GitHub"
url: https://github.com/bamr87/zer0-mistakes
external: true
- title: "Documentation"
url: https://docs.example.com
external: true
Mettre en évidence la page actuelle
Le thème met automatiquement en évidence la page actuelle dans la navigation. La page active reçoit la classe active.
Sections repliables
Les sections de la barre latérale sont repliables par défaut. Pour garder une section dépliée :
- title: "Always Open Section"
expanded: true
children:
- title: "Page 1"
url: /page-1/
Icônes de navigation
Ajoutez des icônes avec Font Awesome ou Bootstrap Icons :
- title: "Home"
url: /
icon: "bi bi-house"
- title: "Settings"
url: /settings/
icon: "bi bi-gear"
Navigation conditionnelle
Affichez des éléments de navigation selon des conditions :
- title: "Admin"
url: /admin/
show_if: "site.admin_enabled"
Bonnes pratiques
- Restez simple — Ne submergez pas les utilisateurs d’options
- Regroupement logique — Regroupez les pages connexes
- Titres descriptifs — Utilisez des titres clairs et concis
- Limitez la profondeur — Évitez plus de 2 niveaux d’imbrication
- Testez sur mobile — Assurez-vous que la navigation fonctionne sur les petits écrans
- Mettez à jour régulièrement — Gardez la navigation synchronisée avec le contenu
Référence
Voir aussi
- [[Customization]]
- [[Sidebar Navigation System]]
- [[Breadcrumbs Navigation]]