Les Templates Twig

Twig est un moteur de template HTML qui permet d'écrire des templates de pages HTML avec une syntaxe plus légère et plus lisible que du PHP Vanilla.

Les trois syntaxes principales de twig sont : 

Afficher des variables

Pour afficher une variable, utilisez la syntaxe {{ ... }} :

<p> Hellow {{ name }}<p/>

Si votre variable est une objet ou un tableau associatif, vous pouvez utiliser l'opérateur . pour accèder au champs d'un objet (publics ou exposé par getter / setter) ou à une valeur d'un tableau associatif :

<p> Hellow {{ user.name }}<p/>

Twig vous protège des attaques type faille XSS car il s'occupe d'échapper les caractères HTML.

Conditions

Pour afficher des conditions, on peut faire un simple if : 

{% if user.isLoggedIn %}
     Hello {{ user.name }}!
{% else %}
     You are not logged in
{% endif %}

Boucles

On peut afficher le contenu de colletions en utilisant des boucles : 

    <ul>
        {% for user in users %}
            <li>{{ user.username|e }}</li>
        {% endfor %}
    </ul>

Réutiliser un Template

On peut importer un Template dans un autre pour factoriser du contenu (et éventuellement lui passer des paramètres) :

{{ include('block/menu.html.twig', {user: user}) }}

Héritage et Layout

Twig permet à un Template d'hériter d'un autres. Cela est très utile notamment quand on a un squelette de page à répéter sur beaucoup d'autres avec un contenu différent. Le Template parent va donc définir des block nommés qui pouront être remplis par les templates enfant.

Par exemple avec le template parents suivant qui correspond à un squelette générique de page HTML :

<!DOCTYPE html>
<html>
    <head>
        {% block head %}
            <link rel="stylesheet" href="style.css" />
            <title>{% block title %}{% endblock %} - Website</title>
        {% endblock %}
    </head>
    <body>
        <div id="content">{% block content %}{% endblock %}</div>
        <div id="footer">
            {% block footer %}
                Legal notices : ...
            {% endblock %}
        </div>
    </body>
</html>

Un exemple d'enfant : 

{% extends "base.html" %}

{% block title %}Home{% endblock %}
{% block head %}
    <meta name="description" content="My website ...">
{% endblock %}
{% block content %}
    <h1>Home</h1>
    <p class="important">
        Welcome to my homepage.
    </p>
{% endblock %}

Il est également possible pour un block dans un enfant d'appeller le contenu du parent pour l'ajouter à son propre contenu au lieu de le remplacer : 

 {{ parent() }}

 


Revision #2
Created 3 October 2020 13:03:46 by Arsène Lapostolet
Updated 12 September 2021 13:45:53 by Arsène Lapostolet