Cet article est le second d'une série consacrée aux langages de templating côté serveur. Dans l'article précédent, nous avons vu les objectifs des templates et un panorama des principaux langages de templating. Entrons maintenant dans la technique pour aborder 2 fonctionnalités majeures des templates :
- l'injection de données dans les pages
- la gestion de la disposition des pages grâce à la relation d'héritage
Injecter des données dans les pages
Les langages de template fournissent des instructions pour intégrer facilement des données fournies par l'application dans les pages html. Un fichier template est donc un mélange de HTML/CSS classique et d'éléments de syntaxe spécifiques au langage de template, représentant des variables, des boucles, des conditions, etc.
Exemple : on peut utiliser un fichier template pour construire la liste des articles d'un blog à partir des métadonnées des articles (titre, date, tags...).
Le code PHP, Python, JavaScript ou autre fournit la collection des métadonnées, et le template parcourt cette collection pour construire une liste au format HTML (éléments <ul> <li>).
Voici un extrait de la première version du template Nunjucks que j'ai utilisé pour construire la liste des articles de mon blog. Il exploite une collection nommée category.posts contenant les articles d'une catégorie.
{# List of posts of the category #}
<ul id="postList">
{%- for post in category.posts %}
<li class="post" data-rank="0">
<a class="post-title" href="{{ post.url }}">{{ post.data.title }}</a>
<p>{{ post.data.description }}</p>
<div class="post-metadata">
<div class="post-taglist">Tags :
{%- for tag in post.data.tags %}<div class="post-tag">{{ tag }}</div>{%- endfor %}
</div>
<div>{{ labels.lastEdition }} :
<time class="post-date" datetime="{{ post.date | htmlDateString }}">{{ post.date | readableDate() }}</time>
</div>
</div>
</li>
{%- endfor %}
</ul>
Tout le code entre accolades est du code de template Nunjucks. 3 types d'accolades sont possibles :
{# #}pour les commentaires{% %}pour le contrôle du flux (boucles, conditions, etc.){{ }}pour évaluer ou afficher des expressions
On peut voir dans l'extrait précédent quelques éléments de syntaxe :
{%- for ... in ... %}...{%- endfor %}représente une boucle for{{ post.data.description }}affiche la description de l'article{{ post.date | readableDate() }}appelle la méthodereadableDatesurpost.Datepour formater la date de création de l'article.
Note
L'opérateur | (pipe) permet d'appeler une méthode en lui passant l'objet de départ en paramètre.
On peut enchaîner plusieurs | pour appeler différentes méthodes les unes à la suite des autres. Ainsi, l'expression {{ object | filter1() | filter2() }} appelle filter1() en lui passant object en paramètre, puis filter2() en lui passant le résultat de filter1() en paramètre. C'est ce qu'on appelle la composition de fonctions, qui est une fonctionnalité très puissante de certains langages de template.
Sans entrer plus dans le détail de la syntaxe Nunjucks, cet exemple t'a déjà donné un bon aperçu de la syntaxe de template pour intégrer des données dans le HTML. Voyons maintenant les techniques de mise en page et de composition.
Gérer les dispositions de pages avec l'héritage de template
Lorsqu'on crée des templates pour modéliser différents types de page (ex. : page d'accueil, page de liste d'articles, page d'article unitaire...), il est fréquent que ces templates aient des parties communes comme l'en-tête et le pied de page.
Au lieu de répéter le code de ces parties communes dans tous les templates, on le partage entre templates grâce à la notion d'héritage de templates. Il s'agit d'une notion similaire à celle qu'on trouve dans les langages de programmation orientée objets.
Warning
Les langages de templating évolués tels que Jinja2, Nunjucks, Twig, Django, Pug et Blade prennent en charge l'héritage, mais ce n'est pas le cas des langages plus simples tels que Handlebars, Mustache, HAML ou Markdown, ni même du langage Liquid.
Principe de l'héritage de template
La relation d'héritage consiste à créer un template de base contenant tous les éléments qu'on souhaite partager, et des templates dérivés représentant les différents types de pages dont on a besoin. Les templates dérivés héritent de tout le contenu du template de base, et peuvent ajouter ou redéfinir des éléments spécifiques (par exemple le contenu de la zone centrale de la page).
Par exemple, mon blog réalisé avec Eleventy utilise 5 templates Nunjucks correspondant aux différents types de pages, tous dérivés d'un template de base contenant l'en-tête (avec titre et menu principal) et le pied de page.
Les formes vertes représentent les pages de catégories et d'articles. Les articles sont des fichiers Markdown, mais ils peuvent tout de même hériter du layout Nunjucks post.njk grâce à une couche d'abstraction gérée par Eleventy, qui s'appuie sur des frontmatters placés au début des fichiers (plus d'infos sur cette page de doc). Mais dans les exemples de code qui suivent, pour ne pas t'embrouiller, je te présenterai la syntaxe d'héritage Nunjucks pur.
Note
On peut bien sûr étendre la relation d'héritage à plus de 2 niveaux afin de créer une hiérarchie de templates plus complexe.
Implémenter la relation d'héritage
Comme tu vas le voir, la technique est très simple.
Voici un exemple de structure pour le template de base :
<head>
<!-- head content -->
</head>
<body>
<header>
<!-- header content -->
</header>
<main>
{% block mainContent %}{% endblock %}
</main>
<footer>
<!-- footer content -->
</footer>
</body>{% block mainContent %}{% endblock %} est une syntaxe Nunjucks qui permet de définir un bloc nommé mainContent, qui est vide ici, mais qu'on pourra redéfinir dans les templates dérivés.
Dans tous les templates dérivés, on ajoute le code suivant pour implémenter l'héritage :
{% extends "base.njk" %}
{% block mainContent %}
<!-- code that describes the main content of the page -->
{% endblock %}
La première ligne permet de créer la relation d'héritage. Les lignes suivantes redéfinissent le bloc mainContent en y ajoutant le code propre au template dérivé.
A suivre
L'héritage de templates permet déjà de structurer efficacement un projet. Mais nous pouvons aller plus loin avec des techniques avancées de composition et de modularité, que nous explorerons dans la dernière partie de cette série.
En attendant, si cet article t'a été utile, merci de le liker pour aider à le faire connaître. 😉