Logo de Jamstatic
Jamstatic

Créer des mises en page dynamiques avec Jekyll

Avatar de Frank Taillandier
(traducteur·trice)
4 min

Source : Creating dynamic layouts with Jekyll par Zander Martineau.

Voici comment nous avons tiré profit du YAML front matter pour pouvoir effectuer de nombreux changements au sein d’un même modèle pour différents articles sur le nouveau site de notre agence.

Extrait de la campagne Canon #unleashprint
Extrait de la campagne Canon #unleashprint

Les sites web créés avec Jekyll sont généralement simples et leurs mises en page prévisible. J'aimerais vous montrer comme j’ai créé une mise en page pseudo-dynamique pour des études de cas sur le nouveau site de TMW, en utilisant du YAML front matter et un peu de magie1

Chez TMW, nous travaillons sur des projets de toutes sortes et de toutes tailles. Des modèles de page classiques ne suffiraient pas, car nous faisons un travail extrêmement varié et les mises en page doivent refléter cela. Nous avons décidé, au tout début de la refonte de notre site, que chaque étude de cas devrait changer en fonction du projet et des types de contenu spécifiques. Cela constituait un défi intéressant à relever car Jekyll n'offre pas cette fonctionnalité nativement, j'ai dû donc faire preuve d’un peu d’imagination…

Du YAML front matter, une boucle for et pas mal de modules

Après quelques itérations, je me suis arrêté à une solution robuste et peu orthodoxe, qui faisait appel à des variables définies dans le YAML front matter (puis utilisées dans le Markdown de chaque étude de cas), une simple boucle for (dans le modèle de page des études de cas) et à beaucoup de modules pour chaque section.

Le YAML front matter

Nous avons ajouté un tableau YAML partials dans les entêtes YAML front matter de chaque étude de cas (comme vous pouvez le voir dans le code inséré ci-dessous). Chaque élément du tableau possède une propriété name qui correspond au name du partial/module qui sera utilisé.