Temps de lecture d’article sur Jekyll

https://unsplash.com/@sonjalangford
Twitter Facebook Google+
05 Jun 2017

 Environ 2 minutes de lecture

Cet article fait écho à un vieil article anglophone situé sur le net chez Carlos Alexandro Becker datant de 2015.

Cela fait plusieurs fois que je croise cette option sur différents blogs qui mettent en avant le temps de lecture d’un article. Je me suis un peu penché dessus et me suis aperçu que chez Jekyll, c’est une chose assez courante et que ce n’était pas trop compliqué à mettre en place.

J’ai choisi d’intégrer le code ci-dessous directement dans mon fichier post.html, responsable de la mise en forme de l’affichage de l’article entier. Ces lignes de codes sont exactement celles responsables du rendu actuel. On peut faire autrement, comme indiqué dans l’article original en faisant un include d’un fichier .html mais j’ai préféré faire ainsi et de même dans mon fichier post-list.html qui liste tous les articles du blog, en adaptant un peu le code pour que cela fonctionne. Vous le verrez dans la deuxième partie.

<p class="notice notice_info" style="text-align:center;">
<i class="fa fa-eye" aria-hidden="true"></i>&nbsp;Environ 
  {% assign words = content | number_of_words %}
  {% if words < 360 %}
    1 minute
  {% else %}
    {{ words | divided_by:180 }} minutes
  {% endif %} de lecture
</p>

Ce qui est bien ici, c’est que tout cela est rapide à mettre en place et pas d’installation de plugin. Vous pouvez adapter aussi le temps de lecture. Ici, la moyenne est fixée à 180 mots par minute.

Voici le code responsable de l’affichage du temps de lecture sur ma page listant les articles.

<span class="read-time"> 
    {% assign words = post.content | number_of_words %}
    {% if words < 360 %}
        1 minute
    {% else %}
        {{ words | divided_by:180 }} minutes
    {% endif %}
    de lecture
</span>

Le différence se situe dans la récupération des infos. Vu que l’on est sur une page qui “boucle” tous les articles, il faut lui préciser d’aller chercher les infos des articles et pas de la page actuelle post-list.html, comme c’était le cas dans la première partie de code. C’est pourquoi on a post.contentau lieu de content.

Vous couplez tout cela à un peu de CSS et c’est du tout bon.

TCho, Hamtaro.


Twitter Facebook Google+

Peut-être que ceci devrait vous plaire :