Séparation des templates et inclusion

Revenons à nos templates Twig.

Au lieu d'écrire tout le contenu dans un seul template, nous pouvons séparer des bouts de templates et les importer (inclure) dans d'autres templates.

Définition d'un template

Exemple pour notre liste de catégories. Nous pouvons tout à fait séparer le code qui génère la "card" Bootstrap :

{# templates/category/card.html.twig #}
<div class="card">
  <div class="card-body">
    <h5 class="card-title display-5">
      {{ category.name }}
    </h5>
    <p class="card-text">
      {{ category.articles|length }} articles
    </p>
    <a href="{{ path('category_item', {'id': category.id}) }}" class="btn btn-primary">Voir</a>
  </div>
</div>

Inclusion

Et ensuite, l'inclure pour chaque catégorie qu'on souhaite afficher, dans la page de liste. Pour ce faire, on va utiliser la méthode include de Twig :

{# templates/index/index.html.twig #}
{# ... #}
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
  {% for category in categories %}
  <div class="col">
    {% include 'category/card.html.twig' with {'category': category} %}
  </div>
  {% else %}
    <div>Aucune catégorie trouvée</div>
  {% endfor %}
</div>
{# ... #}

Chemin des templates

Attention au chemin vers le template, il est toujours relatif à votre dossier racine de templates, défini dans la configuration du package Twig (ici templates/)

Nous injectons dans le template inclus la variable category qui y sera consommée.

Nous pouvons donc réaliser notre barre de navigation de la même façon, par exemple : un template isolé représentant la barre de menu, puis dans le layout principal (fichier base.html.twig), une directive include permettant à Twig d'inclure ce template dans le fichier de base.