Skip to main content

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 : 

  • {{ ... }} pour afficher une variable passée au template ou évaluer une expression
  • {% ... %} pour afficher du contenu en suivant une logique comme des conditions ou des boucles
  • {# ... #} pour afficher des commentaires qui ne seront pas rendus dans le HTML

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() }}

 

No Comments
Back to top