Génération automatique de la table des matières à l'aide de Tocbot

Un contenu plus long devient la norme avec une réception plus forte de Google et des utilisateurs. Mais il peut être un peu fatiguant de lire le contenu détaillé avec des tonnes de sous-titres à parcourir.

Entrez Tocbot, un générateur de table des matières gratuit construit sur JavaScript . Cela crée automatiquement une liste de TdC fixe sur n'importe quelle page et met à jour votre position lorsque vous faites défiler chaque en-tête.

La page principale comprend un aperçu complet avec la documentation que vous pouvez suivre pour obtenir cette configuration.

Tocbot n'a pas de dépendances et devrait fonctionner dans n'importe quel navigateur avec JavaScript activé. Vous n'avez qu'à inclure les fichiers Tocbot JS / CSS et les laisser s'exécuter. Simple!

Vous pouvez même utiliser les versions CDN si vous ne voulez rien télécharger localement. C'est une installation assez simple et vous pouvez même personnaliser la table des matières en fonction de vos besoins.

Cependant, cela nécessite un peu de JavaScript pour le faire fonctionner. Plus précisément, vous devez exécuter une fonction init () avec des paramètres defining où votre navigation devrait apparaître et quel (s) cap (s) vous voulez cibler (par exemple, H1-H6).

Jetez un coup d'œil au dépôt GitHub pour plus d'informations sur la configuration. Cela inclut le support du navigateur, tous les paramètres personnalisés et les instructions d'installation pour les principaux fichiers JS / CSS.

L'API est livrée avec beaucoup de fonctionnalités que vous pouvez éditer aussi:

• Liste pliante d'articles.
• Sous-titres dans le tableau.
• Offset pour la navigation de table.
• Nav fixe ou statique.
• Liens supplémentaires à ajouter dans la navigation.

Certains concepteurs préfèrent créer leur propre table des matières à partir de zéro. Mais c'est un processus assez technique et nécessite beaucoup d'effort manuel.

Avec Tocbot, vous n'êtes plus qu'une fonction JS loin d'une fonction de travail qui s'exécute de manière dynamique sur l'ensemble des titres de vos pages.

Pour en savoir plus, visitez la page d'accueil de Tocbot. Cela a toutes les informations de configuration dont vous avez besoin avec des liens de téléchargement vers les versions CDN (et locales) de tous les fichiers Tocbot.