Ajouter une table des matières (TOC) à votre thème Ghost : un guide étape par étape

L’intégration d’une table des matières (TOC) dans votre blog Ghost améliore considérablement l’expérience du lecteur en facilitant une navigation fluide dans des articles plus longs. Ce didacticiel vous guidera tout au long du processus d’ajout d’une table des matières à n’importe quel thème Ghost à l’aide de TOCBOT, un plugin JavaScript qui génère automatiquement une table des matières à partir des titres présents dans vos articles.

Intégration de TOCBOT dans Ghost

TOCBOT construit efficacement une table des matières à partir des titres de vos articles. Suivez ces étapes simples pour l’installation :

Connectez-vous à votre tableau de bord d’administration Ghost et accédez à Settings > Code injection.
Dans la Site Headerzone, insérez le script TOCBOT et la feuille de style requis :

<script type="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.21.0/tocbot.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.21.0/tocbot.css"rel="stylesheet">

Ensuite, dans la Site Footersection, initialisez TOCBOT à l’aide du script suivant :

<script> document.addEventListener('DOMContentLoaded', function() { tocbot.init({ tocSelector: '.toc', contentSelector: '.post-content', headingSelector: 'h1, h2, h3, h4', scrollSmooth: true }); }); </script>

Assurez-vous que le contentSelectors’aligne sur la classe désignée dans votre thème pour le contenu de la publication. Les classes couramment utilisées incluent .post-content, .gh-content, ou .c-content.

Enfin, enregistrez vos modifications dans les Code injectionparamètres.

Insertion de l’espace réservé à la table des matières dans les publications

Pour mettre en valeur la table des matières dans vos articles, vous devrez placer un espace réservé à l’emplacement souhaité :

Modifiez un article dans lequel vous souhaitez inclure la table des matières.
Ajoutez une carte HTML à l’endroit de votre choix en tapant /htmldans l’éditeur.
Incluez le code suivant dans la carte HTML :

<div class="toc"></div>

Ce morceau de code crée un espace pour la table des matières. Une fois l’article consulté, TOCBOT remplira cet espace avec la table des matières générée dynamiquement à partir des titres de votre contenu.

Personnalisation de l’apparence de la table des matières

Vous pouvez personnaliser l’apparence de la table des matières pour mieux l’aligner avec la conception de votre thème :

Ci- Site Headerdessous Settings > Code injection, ajoutez des styles CSS personnalisés inclus dans une <style>balise :

<style> . toc { padding: 20px; border: 1px solid #e0e0e0; background-color: #f9f9f9; border-radius: 5px; } . toc a { text-decoration: none; color: #333; } . toc a:hover { text-decoration: underline; } </style>

N’hésitez pas à ajuster ces styles selon vos préférences.

Modification pour différents thèmes

Étant donné que les thèmes peuvent utiliser des noms de classe différents pour les sections de contenu, assurez-vous que la contentSelectorconfiguration TOCBOT correspond à la classe de contenu de votre thème :

Inspectez votre thème en commençant par n’importe quel message ouvert.
Faites un clic droit sur le contenu de l’article et choisissez Inspectd’accéder aux outils de développement de votre navigateur.
Recherchez le nom de classe associé à l’élément qui contient le contenu de votre publication, tel que .post-content.

Assurez-vous de mettre à jour contentSelectorle script TOCBOT en fonction de ce que vous trouvez.

Créer une table des matières accrocheuse

Pour garder la table des matières visible pendant que vos lecteurs font défiler la page, vous pouvez la configurer pour qu’elle soit collante :

Dans le Site Header, ajoutez ce CSS dans une <style>balise :

<style> . toc { position: sticky; top: 20px; } </style>

Cela positionnera la table des matières par rapport à la fenêtre d’affichage, garantissant qu’elle reste visible lorsque les utilisateurs font défiler la publication.

En mettant en œuvre ces instructions, vous pouvez enrichir votre blog Ghost avec une table des matières fonctionnelle, améliorant ainsi la navigation et l’interaction du lecteur tout au long de vos articles.

Source