Tous nos scripts

Utilities

Temps de lecture d'un article ou d'un bloc de texte

<script>
function get_text(el) {
  ret = '';
  var { length } = el.childNodes;
  for (var i = 0; i < length; i++) {
    var node = el.childNodes[i];
    if (node.nodeType !== 8) {
      ret += node.nodeType !== 1 ? node.nodeValue : get_text(node);
    }
  }
  return ret;
}

var words = get_text(document.querySelector('[js-util-readcontent]'));
var count = words.split(' ').length;

document.querySelector('[js-util-readtime]').innerHTML = Math.round(count / 200).toFixed();
</script>

Etape 1 - Ajouter le script sur la page ou le projet Webflow

<!-- Scripts by Justa | Display Read Time -->
<script src="https://cdn.jsdelivr.net/npm/@justaa/scripts/dist/util/read-time.js"></script>
<script>
function get_text(el) {
  ret = '';
  var { length } = el.childNodes;
  for (var i = 0; i < length; i++) {
    var node = el.childNodes[i];
    if (node.nodeType !== 8) {
      ret += node.nodeType !== 1 ? node.nodeValue : get_text(node);
    }
  }
  return ret;
}

var words = get_text(document.querySelector('[js-util-readcontent]'));
var count = words.split(' ').length;

document.querySelector('[js-util-readtime]').innerHTML = Math.round(count / 200).toFixed();
</script>
Copier

Etape 2 - Ajouter les attributes correspondants

Rich Text - Identifier l'élément qui permettra de compter le temps de lecture

Nom

js-util-readcontent

Valeur

Ajouter l'attribute à l'élément pour lequel on souhaite compter le temps de lecture‍

Aucune valeur nécessaire

Paragraph - Identifier l'élément qui affichera le temps de lecture

Nom

js-util-readtime

Copié !

Valeur

Copié !

Ajouter l'attribute à l'élément qui servira à afficher le temps passé

Aucune valeur n'est nécessaire

Rich Text - Modifier le nombre de mots par minute OPTIONNEL

Nom

js-util-read-wpm

Valeur

[identifier]

Ajouter l'attribute au Rich Text soit au même niveau que l'attribute js-util-readcontent

‍

Le nombre de mots par minute est défini à 265 par défaut. Vous pouvez le changer pour ajuster le temps de lecture réel.

Nom

Valeur

Nom

Valeur

Nom

Valeur

Nom

Valeur

Tuto, template & scripts

Tuto

Template

Script

<script>
function get_text(el) {
  ret = '';
  var { length } = el.childNodes;
  for (var i = 0; i < length; i++) {
    var node = el.childNodes[i];
    if (node.nodeType !== 8) {
      ret += node.nodeType !== 1 ? node.nodeValue : get_text(node);
    }
  }
  return ret;
}

var words = get_text(document.querySelector('[js-util-readcontent]'));
var count = words.split(' ').length;

document.querySelector('[js-util-readtime]').innerHTML = Math.round(count / 200).toFixed();
</script>
Copier

Etape 2 - Ajuster le code pour votre besoin

Copié dans le presse-papiers
Logo Justa

Progressez sur Webflow

Oops! Une erreur s'est produite lors de la soumission du formulaire.