Héritage de templates (`extends`, `block`) pour une structure cohérente

Introduction à l'héritage de templates : le principe DRY appliqué aux vues

L'une des fonctionnalités les plus puissantes de Twig est son système d'héritage de templates. Ce mécanisme permet de définir un squelette de base (ou "layout") pour votre site web, contenant les éléments communs à toutes les pages (ou à un ensemble de pages), comme l'en-tête, le pied de page, la navigation, les inclusions de CSS et JavaScript, etc. Les templates enfants peuvent ensuite "hériter" de ce squelette et ne surcharger que les parties spécifiques qui diffèrent.

Ce concept est une application directe du principe DRY (Don't Repeat Yourself) à vos vues. Au lieu de copier-coller la structure HTML commune dans chaque page, vous la définissez une seule fois dans un template parent. Cela rend votre code de template beaucoup plus facile à maintenir : si vous devez modifier l'en-tête du site, vous ne le faites qu'à un seul endroit (le template parent), et la modification est répercutée sur toutes les pages qui en héritent.

L'héritage dans Twig repose sur deux tags principaux : {% extends '...' %} pour spécifier le template parent, et {% block nom_du_bloc %} ... {% endblock %} pour définir des zones de contenu que les templates enfants peuvent redéfinir.

Définir un template de base (layout) avec des `block`

Un template de base, souvent nommé base.html.twig et placé à la racine du répertoire templates/, définit la structure HTML globale de votre site. A l'intérieur de ce template, vous allez identifier les zones qui seront variables d'une page à l'autre et les marquer avec des tags {% block %}.

Chaque {% block %} a un nom unique. Ce nom servira de référence pour les templates enfants qui voudront surcharger son contenu. Un bloc peut avoir un contenu par défaut, qui sera utilisé si un template enfant n'en fournit pas de nouveau.

Voici un exemple simple de templates/base.html.twig :

    
    
    
    {% block stylesheets %}
        {# Exemple d'inclusion de CSS avec Webpack Encore #}
        {# {{ encore_entry_link_tags('app') }} #}
        
    {% endblock %}


    

        
    

    

        {% block body %}
            
        {% endblock %}
    

    

    {% block javascripts %}
        {# Exemple d'inclusion de JS avec Webpack Encore #}
        {# {{ encore_entry_script_tags('app') }} #}
        <script src="{{ asset('js/main.js') }}"></script>
    {% endblock %}

Dans ce layout, nous avons défini plusieurs blocs :

• title : Pour le titre de la page (dans la balise