Différences

Ci-dessous, les différences entre deux révisions de la page.

--- framework-web:symfony:templates [2018/01/30 00:45] – [Structuration de template] jcheron
+++ framework-web:symfony:templates [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 97: / Ligne 97: @@
 ===== Structuration de template =====
-Principe de l'héritage et des blocs dans les templates :
+Très souvent, les templates ont besoin de partager certains éléments : header, footer, barres de menus...
+Twig permet de répondre à cette problématique à partir de l'héritage et des blocs dans les templates :
 Soit un template père définissant le style, ainsi que quelques bloc nommés affichant ou non du contenu.\\
@@ Ligne 103: / Ligne 105: @@
 C'est ainsi que Twig permet de structurer un ensemble de pages, en uniformisant la présentation et en évitant les répétitions de code.
-==== Héritage ====
-==== Blocks ====
+==== Héritage et blocs ====
+Soit le template principal suivant :
+<sxh html;title:templates/base.html.twig>
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <title>{% block title %}Test Application{% endblock %}</title>
+    </head>
+    <body>
+        <div id="sidebar">
+            {% block sidebar %}
+                <ul>
+                    <li><a href="/">Home</a></li>
+                    <li><a href="/blog">Blog</a></li>
+                </ul>
+            {% endblock %}
+        </div>
+        <div id="content">
+            {% block body %}{% endblock %}
+        </div>
+    </body>
+</html>
+</sxh>
+Il est possible de définir un template enfant de la façon suivante :
+<sxh html;title:templates/blog/index.html.twig>
+{% extends 'base.html.twig' %}
+{% block title %}My cool blog posts{% endblock %}
+{% block body %}
+    {% for entry in blog_entries %}
+        <h2>{{ entry.title }}</h2>
+        <p>{{ entry.body }}</p>
+    {% endfor %}
+{% endblock %}
+</sxh>
 ==== Parent ====
+Il est possible de réutiliser le contenu affiché un bloc du template parent en utilisant la fonction **parent()** :
+<sxh html>
+{% block sidebar %}
+    <h3>Table of Contents</h3>
+    {# ... #}
+    {{ parent() }}
+{% endblock %}
+</sxh>
 ==== Inclusion ====
+Soit le template suivant affichant le détail d'un article :
+<sxh html;title:templates/article/article_details.html.twig>
+<h2>{{ article.title }}</h2>
+<h3 class="byline">by {{ article.authorName }}</h3>
+<p>
+    {{ article.body }}
+</p>
+</sxh>
+Il est possible de réutiliser ce template pour afficher la liste des articles, par inclusion :
+<sxh html;title:templates/article/list.html.twig>
+{% extends 'layout.html.twig' %}
+{% block body %}
+    <h1>Recent Articles<h1>
+    {% for article in articles %}
+        {{ include('article/article_details.html.twig', { 'article': article }) }}
+    {% endfor %}
+{% endblock %}
+</sxh>
+===== Liens =====
+Soit la route suivante définie dans le contrôleur Welcome :
+<sxh php;title:src/Controller/WelcomeController.php>
+use Symfony\Component\Routing\Annotation\Route;
+class WelcomeController extends Controller
+{
+    /**
+     * @Route("/", name="welcome")
+     */
+    public function index()
+    {
+        // ...
+    }
+}
+</sxh>
+Il est possible de générer l'url correspondant à cette route en passant à la fonction **path** la propriété **name** de la route : welcome
+<sxh html;gutter:false>
+<a href="{{ path('welcome') }}">Home</a>
+</sxh>
+Génération de route avec paramètres :
+<sxh php;title:src/Controller/ArticleController.php>
+use Symfony\Component\Routing\Annotation\Route;
+class ArticleController extends Controller
+{
+    /**
+     * @Route("/article/{slug}", name="article_show")
+     */
+    public function show($slug)
+    {
+        // ...
+    }
+}
+</sxh>
+<sxh html;title:templates/article/recent_list.html.twig>
+{% for article in articles %}
+    <a href="{{ path('article_show', {'slug': article.slug}) }}">
+        {{ article.title }}
+    </a>
+{% endfor %}
+</sxh>
+Génération d'url absolue, à partir de la function **url()** :
+<sxh html>
+<a href="{{ url('welcome') }}">Home</a>
+</sxh>