Avoir un blog sur son site internet est devenu indispensable si vous voulez booster votre visibilité. Mais créer un blog c’est une chose, créer un blog optimisé tant en terme d’UX que de SEO c’est autre chose. On ne va pas vous parler de l’intérêt d’un contenu pertinent, c’est une évidence. On va plutôt vous expliquer comment créer un sommaire automatique au sein de vos articles de blog.
Et pour ça, nous allons nous aider de l’attribut que Finsweet a mis en place et met à disposition gratuitement.
La documentation Finsweet est très bien construite, il est facile d’intégrer ce type de sommaire en suivant ce lien Fs attribut Table of Contents.
Mais pour vous éclairer, nous allons décortiquer ce tutoriel ensemble, et le rendre encore plus facilement utilisable.
⚠️ Attention, le sommaire sera généré automatiquement sur la base de vos headings (h2, h3, h4, etc...). Vos titres H1 ne seront pas pris en compte.
✅ Bon à savoir : Créez et désignez votre sommaire avant de commencer le tutoriel.
Tutoriel en français :
Suivez les étapes ci-dessous, et promis, dans quelques minutes, vous aurez un sommaire automatique au sein de votre article de blog, accessible et fonctionnel.
Étape 1 : Copiez-collez ce bout de code Javascript dans le <head> de votre page
Étape 2 : Ajoutez des attributs à l’élément Rich Text
Sélectionnez l’élément <Rich Text> de votre article. Direction la partie Attribut (sur la droite). Cliquez sur “add Atributes”.
Pour la partie “Name” on ajoute le contenu “fs-toc-element”
Pour la partie “Value“ on ajoutera “contents”
Étape 3 : Ajoutez des attributs sur les liens de votre sommaire
Sélectionnez le “text block” de votre lien template, puis rendez-vous de nouveau dans la partie Attribut.
Pour la partie “Name” on ajoutera “fs-toc-element”
Pour la partie “Value” on ajoute “link”
⚠️ Il est indispensable que chaque modèle de titre de lien ait une div wrapper et que cette div soit un enfant du numéro de titre précédent. Le visuel ci-dessous représente la structure requise dans Webflow Designer :
Étape 4 : Publiez votre site Webflow 🚀
Vous pouvez allez encore plus loin avec les attributs, pour avoir un sommaire automatique plus personnalisé (OFFSET TOP, OFFSET BOTTOM, HIDE URL HASH, ANIMATIONS..).
Si vous souhaitez en savoir plus et discuter avec un de nos experts Webflow n'hésitez pas à nous contacter !
