6.4. Twig est un nouveau moteur de templates pour Drupal.
Si vous ouvrez le fichier template page.html.twig du thème Stable :
/core/themes/stable/templates/layout/page.html.twig
Vous constaterez qu’il diffère du template page.tpl.php de Drupal 7, d’abord par l’extension, ensuite par l’abondance d’accolades {}. Cela s’explique par le fait que Drupal utilise le moteur de templates Twig.
<main role="main">
<a id="main-content" tabindex="-1"></a>{# le lien est dans html.html.twig #}
<div class="layout-content">
{{ page.content }}
</div>{# /.layout-content #}
{% if page.sidebar_first %}
<aside class="layout-sidebar-first" role="complementary">
{{ page.sidebar_first }}
</aside>
{% endif %}
{% if page.sidebar_second %}
<aside class="layout-sidebar-second" role="complementary">
{{ page.sidebar_second }}
</aside>
{% endif %}
</main>
Le PHP ne peut pas être utilisé dans un template Twig, vous devez uniquement utiliser les outils Twig, qui sont suffisants pour styliser le site.
Voyons comment travailler avec Twig.
Variables dans Twig
En PHP, on utilise le signe dollar $ pour les variables, dans Twig on utilise les doubles accolades :
{{ variable }}
On écrit donc les variables avec deux accolades ouvrantes, un espace, le nom de la variable, un espace, puis deux accolades fermantes. Pour afficher une variable, vous n’avez pas besoin d’ajouter la fonction print, on n’utilise pas PHP dans Twig ; il suffit d’indiquer la variable entre doubles accolades.
Il est aussi facile de travailler avec des objets et tableaux. Avant, il fallait savoir si $node était un objet et $form un tableau. Maintenant c’est plus simple, on accède aux propriétés via un point :
{{ node.id }}
On peut facilement créer des variables :
{% set foo = "bar" %}
Hi, here's my variable: {{ foo }}
Notez la syntaxe : pour définir une variable on utilise les accolades avec un pourcentage, pour afficher une variable on utilise les doubles accolades.
On peut aussi définir des tableaux :
{%
set foo_array = [
'foo',
'bar',
]
%}
Filtres Twig
Bien que Twig ne soit pas un langage de programmation complet, il propose plusieurs outils pour manipuler les données. Les filtres sont probablement les plus importants, ils s’appliquent avec le symbole pipe | :
{{ variable|filter }}
Les filtres permettent de modifier l’affichage des variables, par exemple :
{{ node.title | length }} - affiche la longueur d’une chaîne
{{ node.title | upper }} - affiche la chaîne en majuscules
{{ node.title | lower }} - affiche la chaîne en minuscules
Pour une liste complète des filtres Twig, consultez la documentation officielle : http://twig.sensiolabs.org/doc/filters/index.html
Filtres Twig dans Drupal
Drupal ajoute aussi ses propres filtres à Twig, comme ceux pour les retours à la ligne. Avant, on utilisait la fonction t() en PHP, mais comme Twig n’autorise pas le PHP, il faut un outil de remplacement.
Exemples de filtres Drupal :
- t
- passthrough
- placeholder
- drupal_escape
- safe_json
- without
- clean_class
- clean_id
Traductions dans Twig
Twig utilise des chaînes pour la traduction. Pour traduire une phrase, utilisez la balise {% trans %} :
{% trans %} Hello world {% endtrans %}
On peut aussi passer des variables dans les chaînes à traduire :
{% trans %} Hello {{ name }} {% endtrans %}
On peut modifier les variables avec des filtres avant affichage dans les chaînes traduites :
{% set name = name|capitalize %}
{% trans %}
Hello {{ name }}!
{% endtrans %}
Commentaires Twig
{# Commentaire ici #}
Conditionnelle if
Bien que Twig ne dispose pas de toutes les fonctionnalités PHP, il propose des constructions pour manipuler tableaux et variables. Par exemple, on peut vérifier si une variable existe avant de l’afficher :
{% if site_slogan %}
<div class="site-slogan">{{ site_slogan }}</div>
{% endif %}
Boucles Twig
Souvent dans les templates, il faut parcourir un tableau et afficher ses éléments un par un. Twig utilise une boucle for similaire à foreach en PHP :
{% for item in items %}
{{ item.content }}
{% endfor %}
On peut aussi utiliser une boucle for classique sous une autre forme :
{% for i in range(0, 3) %}
{{ i }},
{% endfor %}
Variable | Description |
items.index | Numéro de l’élément courant à partir de 1 |
items.index0 | Numéro de l’élément courant à partir de 0 |
items.revindex | Numéro de l’élément courant depuis la fin, à partir de 1 |
items.revindex0 | Numéro de l’élément courant depuis la fin, à partir de 0 |
items.first | TRUE si c’est le premier élément |
items.last | TRUE si c’est le dernier élément |
items.length | Longueur du tableau |
items.parent | Contexte parent |
On peut aussi utiliser la construction for else :
<ul>
{% for user in users %}
<li>{{ user.username|e }}</li>
{% else %}
<li><em>aucun utilisateur trouvé</em></li>
{% endfor %}
</ul>