Je ne vais pas ici vous apprendre à utiliser Liquid dans le détail (j’en suis bien incapable), l’idée est simplement de vous le faire connaître, et de vous dire en gros à quoi il sert car c’est une syntaxe nécessaire pour personnaliser les thèmes de Jekyll.

À quoi sert Liquid (dans Jekyll)

Liquid est donc un langage utilisé par Jekyll pour la création de ses templates.
Pour rappel, Jekyll est un générateur de sites statiques (c’est à dire sans PHP et sans base de données, tout est en HTML pur). Il utilise une version dérivée de Liquid, plus légère que celle de shopify et bien documentée ici.

Un tel site pourra avoir une structure statique écrite Liquid dans un contenant HTML. Ce qui permettra, au moment de la compilation qui va générer toutes les pages du site, d’aller chercher divers éléments statiques pré-construits (dans includes) d’un projet et de les insérer dans nos modèles de pages (dans layouts) en les transformant en HTML.

En découpant ainsi les composants d’un site pour les réutiliser on facilite le déploiement, la maintenance et toutes les mises à jours que l’on souhaiterait y apporter (sur le principe de XSLT qui est le langage de templating pour XML).

La syntaxe Liquid est simple et bien différenciée du HTML :

  • les accolades et le signe pourcentage {% %} pour les tags
  • la double accolade {{ }} pour les objects.

Quand Jekyll génère votre site, sa première action est l’interprétation du code Liquid pour “fabriquer” la structure des pages HTML. Elles vont ensuite recevoir leur contenu, vos billets et pages en markdown, généré lui par un convertisseur (Kramdown le convertisseur Markdown vers HTML de Jekyll). Le tout est ensuite parsé dans le modèle généré juste avant et les pages HTML sont enregistrées dans la section _site de votre dépôt.

De quoi est fait Liquid ?

Survol des trois principales composantes du langage.

Les objets (objects)

Les objets Liquid sont définis par des doubles accolades {{ }} dans lesquels on aura un objet et sa propriété {{site.title}} ici l’objet site fait appel à la propriété title, ainsi dans Jekyll l’information, c’est à dire dans ce cas le nom du site, sera récupérée de l’objet site, ces informations sont contenues dans le fichier .config.yml en syntaxe YAML.

Les tags (tag)

Les tags peuvent servir à des opérations logiques dans les templates

  • résoudre des conditions
{% if my_page.title %}
  {{ my_page.title }}
{% endif %}
  • invoquer des templates
<!DOCTYPE html>
<html>
<body>
  <header>
    {% include header.html %}
  </header>
</body>
</html>
  • créer des boucles
{% for post in site.posts%}
  {% include post_block.html %}
{% endfor %}

Il y a quatre types de tags

  • controle flow tag
  • Iteration tags
  • Theme tags
  • Variable tags

Les filtres (filters)

Deux éléments séparés par un pipe |, un paramètre à gauche du pipe, le filtre et éventuellement on peut encore passer des paramètres au filtre en utilisant les deux points :.

Les filtres sont utilisés sur objects ou des strings (entre ‘’) et servent à formater les données en sortie.

{{ site.title | upcase }}

donnera
LE TITRE DU SITE en capitale

Autre exemple avec un paramètre passé au filtre :

Pour afficher la date d’une page,
{{ page.date | date: "%F" }}
la sortie sera codée au format défini par le filtre, ici | date: %F et le rendu sera AAAA-MM-JJ.
Pour les formats de date en RUBY, tout est ici.

Il y en a 8 sortes de filtres

  • Array filters
  • Color filters
  • HTML filters
  • Math filters
  • Money filters
  • String filters
  • URL filters
  • Additional filters

Aller plus loin

Si vous avez besoin d’aller plus loin après ce survol du langage, rendez-vous sur cette page, l’essentiel s’y trouve avec pour chaque object, filtre ou tag, des explications et des exemples.

Autres sources:

  • La page consacrée au templating en pur Liquid
  • Une page avec l’essentiel de la syntaxe
  • Un tutoriel d’installation de Jekyll en français ou il est question de Liquid