Comment gérer des données structurées avec Jekyll

Création du fichier de données

Les fichiers de données structurées doivent se trouver dans un dossier _dataà la racine de votre projet Jekyll. Il doit contenir des données au format YAML et le nom de fichier doit donc naturellement se terminer par un .yml ou .yaml.

Nous allons créer une liste de Système de Gestion de Contenu que nous aimons bien pour pouvoir utiliser ces informations dans nos pages web. Nous enregistrons ce fichier sous le nom de cms.yml dans le dossier _data.

- name: Wordpress
  home: http://wordpress.org/
  tag: cms
  code: PHP
  description: 'Wordpress est simplement le CMS le plus utilisé au monde'
  
- name: Dokuwiki
  home: http://dokuwiki.org/
  tag: wiki
  code: PHP
  description: 'Dokuwiki est un wiki aux fonctionnalités complètes qui ne nécessite pas de bases de données.'

- name: Joomla
  home: http://joomla.org/
  tag: cms
  code: PHP
  description: 'Joomla est le descendant d'un des premiers CMS Open Source et possède l'une des plus grandes communauté au monde.'
  
- name: Drupal
  home: http://drupal.org/
  tag: cms
  code: PHP
  description: 'Drupal a toujours été un cas à part dans le monde des CMS, à mi-chemin entre CMS et framework.'

Le premier intérêt de la démarche est évident. Si vous avez besoin de modifier un des éléments de votre liste, il est beaucoup plus facile de le faire dans ce type de fichiers que dans un fichier HTML. De plus, vous pouvez appeler n’importe quel élément de la liste ou la liste complète partout où cela vous semble justifié sur vos pages web.

Accès aux données du fichier

Nous pouvons accéder à nos données via la variable site.data.cms et utiliser une boucle classique avec Liquid Markup, le langage de templating de Jekyll pour afficher l’ensemble de ces données.

<ul>
{% for cms in site.data.cms %}
  <li>
    <a href="{{ cms.home }}">
      {{ cms.name }}
    </a>
    <p>{{ cms.description }}</p>
  </li>
{% endfor %}
</ul>

• site.data.cms indique à Jekyll d’aller chercher les données dans le fichier cms.yml ou cms.yaml situé dans le dossier _data du site.
• cms.home pointe sur l’attribut ou champ home du fichier cms.
• cms.namepointe sur l’attribut ou champ name du fichier cms et ainsi de suite.

C’est la même logique finalement qu’une base de données. À chaque fiche correspond des champs contenant des données.

Vous pouvez bien sur filtrer seulement certains éléments de votre liste avec ce style de code.

<ul>
{% for cms in site.data.cms %}
{% if cms.tag == 'wiki' %}
  <li>
    <a href="{{ cms.home }}">
      {{ cms.name }}
    </a>
    <p>{{ cms.description }}</p>
  </li>
{% endif %}
{% endfor %}
</ul>

Ce code permettra d’afficher uniquement l’entrée Dokuwiki, la seule possédant le tag wiki.

Un gros plus pour Jekyll

Cette fonctionnalité faisait vraiment défaut aux versions précédentes de Jekyll et obligeait à gérer ce genre de listes via des variables difficiles à maintenir. Vous pouvez aussi l’utiliser pour stocker des variables que vous placiez dans le fichier _config.yml de Jekyll. Ce système étant implémenté comme nous l’avons vu de façon simple, il devient donc agréable de gérer des listes simplement avec Jekyll.