Ce que j'apprécie grandement avec Eleventy, c'est la gestion des données. Il existe plusieurs manières de déclarer nos données, ce qui peut être intimidant à prendre en main. Ne vous inquiétez pas, je vais tout vous expliquer !

Quand Eleventy construit les pages du site, il regroupe l'ensemble des données et les compacte en un seul objet final. Les données sont alors distribuées dans les différentes pages pour être utilisées. Ce processus s'appelle la Data Cascade. Il faut voir ça comme l'ordre des opérations afin de combiner les données et résoudre les potentielles erreurs ou conflits.

Eleventy utilise des modèles (templates) et des mises en page (layouts) pour nos pages. Les templates sont les pages de notre site et les layouts représentent le design qu'auront les pages. Un layout peut être partagé par plusieurs templates, imaginons un layout qui contient le header ainsi que le footer de notre site. Ce layout sera appliqué à toutes nos pages pour éviter de réécrire le code HTML de ces deux éléments. Avec ce principe, les données ont une particularité : plus elles sont déclarées proches de la template, plus elles sont prioritaires sur les autres déclarations.

Définissons les différentes manières de déclarer des données dans Eleventy :

Global Data

Ces données sont globales à toutes les pages. Pour cela, dans notre dossier src, il faut créer un dossier _data. À l'intérieur de celui-ci, nous pouvons avoir des fichiers en JavaScript ou encore en JSON. Nous pouvons faire des appels API directement dans les fichiers JavaScript ou faire de la lecture de fichier, par exemple.

Directory Data

Descendons d'un cran dans l'arbre de la Data Cascade. Les données déclarées à ce stade sont appliquées à un ensemble de fichiers et de sous-fichiers présents dans le dossier où se trouve le fichier en JSON ou JS. Pour que le Directory Data s'applique, le nom du fichier doit porter le même nom que le dossier où il est créé.

Template Data

Le Template Data fonctionne exactement de la même manière que son homologue précédent. Néanmoins, ces données s'appliquent au template portant le même nom que ce fichier. Le Template Data n'est quasiment pas utilisé, car on peut exactement effectuer la même tâche en déclarant les données directement dans le template, ce qui est bien plus intuitif.

Layout front matter

Ici, les données sont déclarées dans le front matter de notre layout, c'est-à-dire à la mise en page. Ces données peuvent s'appliquer à l'ensemble des templates rattachées au layout. En définissant les données de cette sorte, nous nous concentrons plus sur les aspects généraux. Les metadata du site ne sont qu'un exemple, car elles servent dans l'ensemble du site. Les définir dans le layout de base est donc une bonne idée.

Template front matter

Enfin, comme pour le Layout front matter, les données se déclarent directement dans le front matter du template. Les données ont le plus de priorité, car elles sont les plus proches des templates.

Computed Data

Ce sont des données calculées à partir d'autres sources. Elles peuvent être définies à n'importe quel niveau de la Data Cascade. Les Computed Data sont évaluées par Eleventy qu'à la fin de la Data Cascade. Ce type de données est utilisé pour transformer des données complexes en données exploitables.

Eleventy a sa propre gestion des données, complexe de prime abord, mais une fois expliquée, il n'y a rien de plus facile à comprendre et à utiliser.