Elias, Studio de branding, partenaire webflow

Créer un sommaire dynamique Webflow pour des articles de blog CMS

Votre marque, notre focus
Votre marque, notre focus
Votre marque, notre focus
Votre marque, notre focus
Webflow
Ressources
/
Webflow
/
Créer un sommaire dynamique Webflow pour des articles de blog CMS
Août 2022
5
min

Chez Elias, les articles de blog font souvent partie des demandes de nos clients pour leurs site web. Amélioration du SEO, visibilité, communication, nombreux sont les avantages d’intégrer un blog dans son site internet.

Aperçu de blog réalisé par Elias - safeteam.academy | 4you.fr | Audendi.fr

Afin de donner de la lisibilité à nos articles, nous proposons souvent l’intégration d’un outil bien pratique : un sommaire dynamique qui viendra cibler les Headings de notre article et qui s'adaptera automatiquement à l'arborescence de vos titres. Pour cela, nous utiliserons la librairie Finsweet, bien plus puissante que n'importe quelle librairie JavaScript qui pourraient être utilisées avec Webflow.

Qu'est ce que le CMS Webflow ?

Le CMS, ou "Content Management System" Webflow permet de gérer via une interface visuelle et simple d'utilisation les bases de données de votre site.

Une collection CMS peut être utilisée pour gérer des articles de blog par exemple. Paramétrez votre collection en ajoutant les champs requis (nom, description, image, contenu, métas-données). Mais une collection CMS n'est pas forcément pour des articles de blog. En effet, vous pouvez créer une collection "Auteurs", qui sera reliée à votre collection Blog Posts, ou encore une collection "Evènements" si votre site est un gestionnaire d'évènements par exemple. Une autre collection que nous avons l'habitude de mettre en place pour nos clients est la collection "Services", pour une startup qui propose différents services par exemple.

Toutes ces collections peuvent être paramétrées différement les unes des autres en fonction du besoin. Dans un premier temps, les champs de chaque collection devront être pertinents. Une collection "Articles" va par exemple avoir plusieurs éléments : un nom, une description, un auteur, une date de publication... et le plus important ici, un contenu. Le contenu sera un élément de type Rich Text, dans lequel pourront être intégrés des images, liens, headings... Cet élément est obligatoire dans le cas où vous souhaitez ajouter un sommaire dynamique dans votre article.

Comment ajouter sommaire dans un article

Utiliser la librairie Finsweet

La librairie Finsweet permet de mettre en place des fonctionnalités complexes (développées en JavaScript) avec très peu de code. Quelques attributs bien placé, un peu de style, une ligne dans le <Head> de la page, et hop, le tour est joué (un expert Elias a récemment réussi à mettre en place un sommaire dynamique en moins de 35 secondes... record à battre !)

La première étape sera donc d'ajouter le code suivant dans la partie <Head> de votre page. Il s'agit du script qui va utiliser la librairie Finsweet, qui elle-même s'occupera du reste :

<script defer src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-toc@1/toc.js"></script>

Ajouter des attributs au contenu à cibler

Aussi simple que bonjour, Finsweet a pensé à tout ! Une fois la librairie ajoutée, il faudra implémenter des attributs à différents éléments de votre page. Le premier sera à mettre sur votre Rich Text :

Name: fs-toc-element / Value: contents

ajouter l'attribut finsweet du contenu au rich text de son article de blog

Le sommaire sera donc généré en se basant sur les Headings de cet élément en particulier.

Ajouter des attributs aux liens à cibler

C'est exactement la même chose pour les liens qui vont faire office d'exemples pour le sommaire.

Pour aller plus loin...

Ajouter un "Current/Active state"

Définir un padding sur les Headings

Cacher l'ancre dans l'URL

Ajouter le Sommaire seulement sur certains articles

Si vous ne souhaitez pas ajouter le sommaire dynamique pour tous vos articles, il vous suffit d’ajouter un champ « Checkbox », nommé « Affichage sommaire » dans votre collection.

Ajoutez ensuite un Visibilité Conditionnelle sur le Div Block qui contient votre sommaire, et le tour est joué !

D'autres fonctionnalités Finsweet

Elias, Studio de branding, partenaire webflow

Brand Strategy
Brand Identity
Brand Experience
Naming
Copywriting
Brand Idea
Logo
Photographie
Illustration
3D & Motion
SEO
Website
Webflow
Custom Animation
Maintenance
Webdesgin

Nous sommes des créateurs de marque. Nous transformons des projets en marque forte, online.

Articles liés

Votre site Webflow, votre nouveau super-pouvoir

Brand Strategy
Brand Identity
Brand Experience
Brand Strategy
Brand Identity
Brand Experience