Icônes flèche noirecliquez ici
Accueil > Académie

Comment créer un sommaire automatique sur Webflow

Sommaire

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.

1. Copiez-collez ce bout de code Javascript dans le <head> de votre page

<!-- [Attributes by Finsweet] Table of Contents --> <script defer src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-toc@1/toc.js"></script>

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”

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 :

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..).

DERNIERS TUTORIELS

Découvrez nos autres tutoriels publiés récemment

Créer un effet holographique sur Figma

Figma

Créer un bouton avec un effet glowy sur Figma

Figma

Auto Layout : Comment créer un design dynamique sur Figma

Figma

Envie de recevoir du contenu exclusif ?

Nous vous envoyons un condensé d’informations UX, Webdesign, Webflow et Bonus 1 fois par mois dans votre boîte mail.