Twig est un moteur de template très utilisé dans le monde php notamment par le framework symfony
Mise en place du projet
utiliser composer init et composer dump-autoload comme indiqué dans le chapitre sur l'autoload
Arborescence
Pour des raisons de sécurité, il est préférable de ne placer que le fichier index dans la partie publique.
Le reste, les templates, le contrôleur (routing), les applications tierces se trouvent en dehors de la zone directement accessible par le navigateur.
Installation de twig
composer require "twig/twig:^3.0"
Lancer le serveur
php -S localhost:8000 -t public
Appel des fichiers twig
Une première façon d'opérer est d'appeler les fichiers twig de la manière suivante :
<?php require '../vendor/autoload.php'; //on indique ici où se trouvent les fichiers twig $loader = new \Twig\Loader\FilesystemLoader(__DIR__ . '/../templates/'); // création de l'objet $twig $twig = new \Twig\Environment($loader, [ //'cache' => __DIR__ . '/../tmp', ]); // Appel des templates twig avec un paramètre name echo $twig->render('header.twig', ['name' => 'a']); echo $twig->render('main.twig', ['name' => 'b']); echo $twig->render('footer.twig', ['name' => 'c']);
Variables et boucles
Syntaxe pour récupérer une variable dans un fichier twig :
{{ name }}
Syntaxe pour parcourir une variable de type tableau
{% for card in cards %} <section> <h2><a href="/cards/{{ card.c_id }}">{{ card.c_question }}</a></h2> <p>{{ card.c_answer }}</p> </section> {% endfor %}
Exemple simple de fichier twig
header.twig
<!DOCTYPE html> <html> <head> <title>{{ name }}</title> </head>
main.twig
<body> <main> main {{ name }} </main>
footer.twig
<footer> footer {{ name }} </footer> </body> </html>
Héritage de template
Le mécanisme d'héritage de twig permet de créer un template squelette qui comprend tous les éléments communs et qui définit les "blocks" que les templates enfants pourront surcharger (overriding). Exemple :
base.twig
<!DOCTYPE html> <html> <head> {% block head %} <link rel="stylesheet" href="style.css" /> <title>{% block title %}{% endblock %} - Memo</title> {% endblock %} </head> <body> <div id="content">{% block content %}{% endblock %}</div> <div id="footer"> {% block footer %} © Copyright 2020 by <a href="https://coopernet.fr/">coopernet</a>. {% endblock %} </div> </body> </html>
home.twig
Repérez bien le tag "extends" qui permet la réécriture du fichier base.twig
Notez qu'une fois que l'on "étend" un template twig, il n'est pas possible décrire du code en dehors de "blocks" prédéfinis.
{% extends "base.twig" %} {% block title %}{{ title }}{% endblock %} {% block content %} <h2>Bienvenue sur Memo, le système de répétition espacée</h2> {% endblock %}