Article exemple avec table des matières

Cet article montre comment fonctionne la table des matières automatique dans le site. La fonctionnalité est activée grâce à l'attribut showToc: true dans le frontmatter et s'affiche par défaut repliée.

Vous pouvez également utiliser showTocOpen: true pour qu'elle apparaisse dépliée par défaut, comme sur cette page.

[[toc]]

La table des matières est un élément essentiel pour faciliter la navigation dans les articles longs. Elle permet aux lecteurs de :

1. Avoir un aperçu rapide du contenu
2. Naviguer directement vers une section spécifique
3. Comprendre la structure hiérarchique de l'article

Cette fonctionnalité est particulièrement utile pour les articles de tutoriel, guides techniques ou publications académiques.

La table des matières est générée automatiquement à partir des titres de niveau 2, 3 et 4 présents dans l'article. Pour cela, nous utilisons :

• Le plugin markdown-it-table-of-contents pour générer la table
• Le plugin markdown-it-anchor pour créer des ancres sur chaque titre

Pour activer la table des matières, il suffit d'ajouter ces attributs dans le frontmatter :

---
showToc: true       # Active la table des matières
showTocOpen: true   # Optionnel: Affiche dépliée par défaut
---

Et d'insérer la balise [[toc]] à l'endroit où vous souhaitez voir apparaître la table des matières.

Le style de la table des matières est défini dans le fichier src/assets/sass/06_components/_toc.scss et peut être facilement personnalisé.

La table des matières est particulièrement utile pour les articles techniques comportant de nombreuses sections et sous-sections.

Pour les pages de documentation, la table des matières facilite la recherche d'informations spécifiques.

Dans les tutoriels, la table des matières permet de voir toutes les étapes d'un processus et de naviguer entre elles.

L'utilisation d'une table des matières avec des ancres de titres présente plusieurs avantages pour le référencement :

1. Google peut utiliser ces liens pour générer des "sitelinks" dans les résultats de recherche
2. Les ancres permettent de partager des liens directs vers des sections spécifiques
3. La structure claire des titres aide les moteurs de recherche à comprendre l'organisation du contenu

Pour tirer le meilleur parti de cette fonctionnalité, voici quelques conseils :

1. Utilisez une hiérarchie claire et logique des titres (H2, H3, H4)
2. Créez des titres descriptifs et concis
3. Limitez-vous à 3-7 sections principales pour ne pas surcharger la table
4. Placez la table des matières après l'introduction et avant le contenu principal

La table des matières est un excellent moyen d'améliorer l'expérience utilisateur sur les articles longs tout en facilitant la navigation et le référencement. N'hésitez pas à l'utiliser pour tous vos contenus structurés en plusieurs sections.

• Documentation markdown-it-table-of-contents
• Documentation markdown-it-anchor
• Guide Eleventy pour les plugins Markdown