Sur cette page

• Déclarer des entrées dans la configuration
• Ajouter une page depuis son front matter
• Surcharger ou désactiver une entrée
• Afficher le menu

Construire un menu de navigation

Cecil gère les menus de navigation comme des collections d’entrées (nom, URL, poids) que vous pouvez déclarer dans la configuration ou directement dans les pages, puis afficher n’importe où dans vos templates.

Déclarer des entrées dans la configuration

Ajoutez une section menus dans cecil.yml. Chaque menu (ex. : main, footer) est une liste d’entrées avec un id unique :

menus:
  main:
    - id: about
      name: "About"
      url: /about/
      weight: 1
  footer:
    - id: github
      name: "GitHub"
      url: https://github.com/Cecilapp/Cecil
      weight: 99

Ajouter une page depuis son front matter

Une page peut s’ajouter à un ou plusieurs menus avec la variable menu. Le nom de l’entrée est le title de la page et l’URL est son chemin :

---
title: Our Expertise
menu:
  main:
    weight: 15
  footer:
    weight: 15
    name: "Expertise" # surcharge le nom de l’entrée dans ce menu
---

Surcharger ou désactiver une entrée

Utilisez l’ID de la page comme id pour surcharger une entrée existante, ou enabled: false pour la retirer :

menus:
  main:
    - id: index
      name: "Home"
      weight: 1
    - id: about
      enabled: false

Afficher le menu

Bouclez sur site.menus.<menu>, trié par poids, et comparez l’ID de chaque entrée avec celui de la page courante pour mettre en évidence l’élément actif :

<nav>
  <ul>
  {% for entry in site.menus.main|sort_by_weight %}
    <li>
      <a href="{{ url(entry.url) }}"{% if entry.id == page.id %} aria-current="page" class="active"{% endif %}>{{ entry.name }}</a>
    </li>
  {% endfor %}
  </ul>
</nav>

Une entrée peut aussi être atteinte directement par son ID :

{% if site.menus.main.about is defined %}
  <a href="{{ url(site.menus.main.about.url) }}">{{ site.menus.main.about.name }}</a>
{% endif %}