Comment ajouter un script de table des matières automatique au blog de Blogger ?

Comment ajouter un script de table des matières automatique au blog de Blogger

La table des matières est un élément important de tout blog qui permet aux lecteurs de naviguer facilement dans les articles et de trouver rapidement les informations qu'ils cherchent. Si vous utilisez Blogger comme plateforme de blog, vous pouvez ajouter une table des matières automatique à vos articles à l'aide d'un script JavaScript. Voici comment faire :

Étape 1 : Ouvrir le modèle de votre blog

Tout d'abord, connectez-vous à votre compte Blogger et ouvrez le modèle de votre blog en cliquant sur (Thème) dans le menu de gauche, puis sur (Personnaliser) en haut de la page. Ensuite, cliquez sur (Modifier le HTML) pour accéder au code source de votre modèle.

Étape 2 : Ajouter le script JavaScript

Maintenant, vous devez ajouter le script JavaScript à votre modèle pour activer la table des matières. Vous pouvez utiliser le script suivant :

Code source : <script type='text/javascript'> // Table des matières automatique pour Blogger function autoTOC() { var headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6'); var toc = document.querySelector('.table-of-contents'); var tocList = document.createElement('ul'); var lastLevel = 0; var tocSection = tocList; for (var i = 0; i < headings.length; i++) { var heading = headings[i]; var level = parseInt(heading.tagName.charAt(1)); if (level > lastLevel) { for (var j = lastLevel; j < level; j++) { var newTocSection = document.createElement('ul'); tocSection.appendChild(newTocSection); tocSection = newTocSection; } } else if (level < lastLevel) { for (var j = level; j < lastLevel; j++) { tocSection = tocSection.parentNode.parentNode; } } var anchor = document.createElement('a'); anchor.setAttribute('href', '#' + heading.id); anchor.innerHTML = heading.innerHTML; var tocItem = document.createElement('li'); tocItem.appendChild(anchor); tocSection.appendChild(tocItem); lastLevel = level; } toc.appendChild(tocList); } document.addEventListener('DOMContentLoaded', function() { autoTOC(); }); </script>

Vous pouvez coller ce script juste avant la balise </head> de votre modèle. Si vous utilisez un thème personnalisé, vous devrez peut-être chercher l'endroit approprié pour le script.

Étape 3 : Ajouter la zone de la table des matières

Après avoir ajouté le script, vous devez ajouter la zone de la table des matières à votre article. Vous pouvez le faire en ajoutant une nouvelle section HTML avec la classe "table-of-contents" à l'endroit où vous souhaitez afficher la table des matières. Voici un exemple :

Code source : <div class="table-of-contents"></div>

Vous pouvez ajouter cette section à votre article en mode (Modification) de l'éditeur de blog. Placez la section à l'endroit où vous voulez afficher la table des matières.

Étape 4 : Vérifier la table des matières

Une fois que vous avez ajouté le script et la zone de la table des matières, vous pouvez vérifier si la table des matières fonctionne correctement en prévisualisant votre article. Vous devriez voir une table des matières automatique avec des liens cliquables vers chaque titre de section de votre article.

Voilà, vous avez maintenant ajouté une table des matières automatique à votre blog Blogger ! N'oubliez pas de vérifier régulièrement votre blog pour vous assurer que tout fonctionne correctement et que les lecteurs peuvent facilement naviguer dans vos articles.

Conclusion

L'ajout d'une table des matières automatique est un excellent moyen d'améliorer l'expérience de lecture de vos articles de blog et d'aider vos lecteurs à trouver les informations qu'ils cherchent plus rapidement. Avec ce guide, vous pouvez facilement ajouter une table des matières automatique à votre blog Blogger en quelques étapes simples.