Script Temps de lecture Webflow Multilingue
Ajoutez un temps de lecture estimé dynamique sur vos articles de blog. Script Vanilla JS, gestion automatique du pluriel et 100% Custom Attributes.
Description
Un script 100% Vanilla JS pour calculer et afficher automatiquement le temps de lecture de vos articles de blog ou pages CMS sur Webflow.
Son fonctionnement : Le script aspire le texte brut de votre article, compte le nombre exact de mots, et le divise par une vitesse de lecture moyenne (WPM). Il injecte ensuite le résultat dans l'élément de votre choix.
Caractéristiques :
- 🌍 Prêt pour l'international (i18n) : Définissez vos propres mots pour le singulier ("minute") et le pluriel ("minutes") directement via les attributs. Le script gère la bascule automatiquement !
- 🌐 Compatibilité Totale avec Webflow Localization : Si votre site est disponible en plusieurs langues, vous n'avez rien à modifier dans le code. Le script est conçu pour être piloté par les attributs, qui sont eux-mêmes traduisibles nativement dans Webflow.
- 🎯 100% Custom Attributes (Zéro classe CSS) : Placez votre texte où vous voulez dans votre design. Le script ne se sert que des attributs pour fonctionner.
- ⚙️ Vitesse personnalisable : Réglez le nombre de mots par minute (WPM) pour l'adapter à la complexité de votre contenu (par défaut : 200 WPM).
- ⚡️ Ultra léger & Zéro Dépendance : Moins de 1ko.
⚠️ Important
- Éléments requis : Le script a impérativement besoin d'une
source(le texte à lire) et d'undisplay(l'endroit où afficher le temps) pour fonctionner. S'il manque l'un des deux sur la page, le script s'arrête silencieusement pour éviter les erreurs dans la console. - Texte de remplacement : Dans le Designer Webflow, mettez un texte générique dans votre élément d'affichage (ex:
-- minou0 minute). Le script viendra l'écraser au chargement.
Custom attributes
Installation :
Étape 1 : ajoutez le script dans le before body de votre page
<!--{ NL-Reading-time }-->
<script src="https://cdn.jsdelivr.net/gh/nicolas-leitao/webflow-scripts/nl-reading-time.js" defer></script>
Étape 2 : Définir la source
Trouvez le composant qui contient le texte de votre article dans Webflow (généralement votre bloc Rich Text principal lié au CMS). Ajoutez-lui l'attribut personnalisé suivant :
- Nom :
nl-reading-time - Valeur :
source
<div nl-reading-time="source" class="mon-article-rich-text w-richtext">
</div>Étape 3 : Afficher le temps de lecture
Créez un simple bloc de texte (Text Block) là où vous souhaitez afficher le temps estimé (par exemple en haut de l'article, à côté de la date de publication). Ajoutez-lui cet attribut :
- Nom :
nl-reading-time - Valeur :
display
<div nl-reading-time="display"
nl-reading-time-wpm="200"
nl-reading-time-singular="minute de lecture"
nl-reading-time-plural="minutes de lecture"
class="text-reading-time">
00
</div>Étape 4 : Personnaliser la langue et la vitesse (Optionnel)
Sélectionnez votre élément d'affichage (display) et ajoutez des attributs supplémentaires pour configurer le rendu selon vos besoins :
- Gérer la traduction : Utilisez
nl-reading-time-singularetnl-reading-time-pluralpour définir les mots qui s'afficheront après le chiffre (ex: "min", "minutos", "Lesezeit"). Le script basculera automatiquement au pluriel si le temps est supérieur à 1. - Ajuster la vitesse : Ajoutez
nl-reading-time-wpm="250"si votre article cible des experts ou contient des mots très techniques qui se lisent plus lentement. La moyenne standard du web est de 200 mots par minute.