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.
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.
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.
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>
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
Le sommaire sera donc généré en se basant sur les Headings de cet élément en particulier.
C'est exactement la même chose pour les liens qui vont faire office d'exemples pour le sommaire.
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é !
