Comment afficher le temps de lecture d'un article dans Webflow avec Finsweet ?
Apprenez à afficher automatiquement le temps de lecture d'un article Webflow avec Finsweet Attributes Read Time.
Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment afficher automatiquement le temps de lecture d'un article dans Webflow avec Finsweet Attributes Read Time.
| Attribut | Élément | Valeur |
|---|---|---|
| fs-readtime-element | Élément texte source (Rich Text ou Div) | content |
| fs-readtime-element | Text Block d'affichage du résultat | result |
| fs-readtime-wordsperminute | Élément source | Nombre de mots par minute (défaut: 200) |
| fs-readtime-suffix | Élément source | Texte après le chiffre (ex: 'min de lecture') |
1. Ajoutez le script dans le head
<script src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-readtime@1/readtime.js" defer>script>2. Marquez votre contenu source
Sur votre élément Rich Text (ou tout élément contenant le texte à analyser), ajoutez fs-readtime-element="content". Finsweet compte le nombre de mots de cet élément pour calculer le temps de lecture.
3. Ajoutez l'élément d'affichage
Créez un Text Block à l'endroit où vous voulez afficher le temps de lecture (ex: dans le header de votre article, à côté de la date). Ajoutez fs-readtime-element="result". Finsweet injecte automatiquement le chiffre calculé.
4. Personnalisez le calcul et le format
La vitesse de lecture par défaut est 200 mots/minute. Pour ajuster : fs-readtime-wordsperminute="250" sur l'élément source. Pour ajouter un suffixe automatique ("min de lecture") : fs-readtime-suffix=" min de lecture". Le résultat sera "5 min de lecture" directement.
Conclusion
Le temps de lecture améliore l'engagement sur les articles longs. Cas d'usage :
- Articles de blog avec indication "X min de lecture"
- Pages de documentation avec estimation de temps
- Newsletters ou guides PDF avec durée de lecture estimée
bon à savoir
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
