Comment localiser la date en français dans Jekyll ?

- 900 mots

Edit : le contenu de ce post est déprécié et maintenu à titre d’archive souvenir. Pour formater les dates en français dans Jekyll, lisez cette notice « Traduire la date dans Jekyll » publiée le 19 mai 2017. - xtof

Vous venez d’installer Jekyll en 3 lignes de commande et souhaiteriez afficher toutes les dates en français ? Non programmeur comme moi, vous vous sentez déroutés par la doc officielle sur les templates et le langage de programmation Liquid de Shopify.

Pas de panique…

Sans avoir étudié le truc en profondeur, l’affichage des dates se fait en utilisant les tags page.date (ou post.date) fournis par Liquid.

Rappelons qu’en sortie de boîte, Jekyll dispose de deux pages html de structure intégrant des dates variables :

  • index.html à la racine
  • post.html dans le répertoire ‘_layouts’

Les filtres de dates date_to_string proposés à cette heure dans la documentation Jekyll affichent

{{ page.date | date_to_string }}
{{ page.date | date_to_long_string }}

Si beaucoup de sites utilisent ce format, vous pourriez trouver utile de reprendre la main sur la date ? Afficher par exemple le mois en français et sans lettre capitale comme dans les en-têtes de lettres.

Faute de pouvoir faire tourner le plugin de localisation i18n_filter recommandé par Toam, dans son excellent tutoriel de démarrage Jekyll, je me suis inspiré des très nombreux exemples fournis par Alan W. Smith pour utiliser le filtre “date:” de Liquid. Bookmarkez cette page ! c’est une mine d’or pour devenir un mage de la manipulation des quantièmes dans Jekyll.

Et par curiosité, jetez aussi un oeil au Filtre Date Liquid qui offre quelques éléments basiques pour la mise en page des dates.

Commencez doucement et simplement à vous entraîner en permutant quelques lettres de tag/filtre comme %B, %d %Y pour maîtriser les formats de dates simples en anglais (B étant substitué par le nom du mois écrit en toutes lettres, d le jour du mois de 01 à 31 et Y l’année).

{{ page.date | date: '%B, %d %Y' }}


Une date en français lisible-pour-les-humains

Si vous êtes n00b comme moi sur Jekyll, la localisation des dates en français vous demandera plus d’efforts. Cliquez ici pour visualiser les premiers échantillons de code utilisés pour afficher la date en langage clair comme suit :

{% assign dy = page.date | date: "%a" %}{% case dy %}{% when "Mon" %}Lundi{% when "Tue" %}Mardi{% when "Wed" %}Mercredi{% when "Thu" %}Jeudi{% when "Fri" %}Vendredi{% when "Sat" %}Samedi{% when "Sun" %}Dimanche{% else %}{{ dy }}{% endcase %} {% assign d = page.date | date: "%-d"  %}{% case d %}{% when '1' %}{{ d }}er{% else %}{{ d }}{% endcase %} {% assign m = page.date | date: "%-m" %}{% case m %}{% when '1' %}janvier{% when '2' %}février{% when '3' %}mars{% when '4' %}avril{% when '5' %}mai{% when '6' %}juin{% when '7' %}juillet{% when '8' %}août{% when '9' %}septembre{% when '10' %}octobre{% when '11' %}novembre{% when '12' %}décembre{% endcase %} {{ page.date | date: '%Y' }}

… et pour le plaisir, une variante tout en bas de casses et le nom du mois abrégé que j’adapterai pour lister les posts triés par dates en page d’accueil :

{% assign dy = page.date | date: "%a" %}{% case dy %}{% when "Mon" %}lundi{% when "Tue" %}mardi{% when "Wed" %}mercredi{% when "Thu" %}jeudi{% when "Fri" %}vendredi{% when "Sat" %}samedi{% when "Sun" %}dimanche{% else %}{{ dy }}{% endcase %} {% assign d = page.date | date: "%-d"  %}{% case d %}{% when '1' %}{{ d }}er{% else %}{{ d }}{% endcase %} {% assign m = page.date | date: "%-m" %}{% case m %}{% when '1' %}janv.{% when '2' %}févr.{% when '3' %}mars{% when '4' %}avr.{% when '5' %}mai{% when '6' %}juin{% when '7' %}juil.{% when '8' %}août{% when '9' %}sept.{% when '10' %}oct.{% when '11' %}nov.{% when '12' %}déc.{% endcase %} {{ page.date | date: '%Y' }}

Date-machine ISO-8601

Vous aurez aussi besoin d’une représentation iso 8601 pour intégration dans l’élément time. Utilisez %Y-%m-%d ou plus simplement le filtre date_to_xmlschema pour une version longue intégrant horaire et fuseau :

{{ page.date | date: "%Y-%m-%d" }} 
{{ page.date | date_to_xmlschema }}

Non programmeur, je serais vraiment intéressé pour trouver des solutions plus concises, propres et recommandables à ceux qui souhaitent essayer Jekyll en français ? Très preneur de vos frameworks, plugins et/ou tous vos points d’optimisation en langage clair pour compléter ce bout de code rapide et crade fonctionnel à cette heure en local sur la version 1.4.2.

Ressources externes

Réagir

Ce post reste ouvert à tous vos commentaires sur twitter - @xtof

“Comment localiser la date en français dans Jekyll ?” a été mise à jour le :
Améliorez cette page