Contactez-nous

Utiliser les layouts Blade avec `@extends`, `@section` et `@yield` pour des templates réutilisables

Maîtrisez l'héritage de templates Blade avec `@extends`, `@section` et `@yield` pour créer des layouts HTML cohérents et réutilisables dans vos applications Laravel.

Layouts Blade : la clé de la cohérence et de la réutilisabilité (DRY)

Dans la plupart des applications web, de nombreuses pages partagent une structure HTML commune : un en-tête (header), une barre de navigation, un pied de page (footer), et souvent une barre latérale. Répéter ce code HTML sur chaque page individuelle serait non seulement fastidieux mais aussi un cauchemar à maintenir (principe WET : We Enjoy Typing, ou Write Everything Twice). Si vous deviez modifier la navigation, vous auriez à le faire sur des dizaines de fichiers. C'est ici qu'intervient le concept d'héritage de templates, une fonctionnalité puissante de Blade qui promeut le principe DRY (Don't Repeat Yourself).

Blade vous permet de définir un ou plusieurs "layouts" (ou gabarits) qui servent de squelette pour vos pages. Un layout contient la structure HTML commune et définit des "sections" que les vues enfants peuvent remplir avec leur contenu spécifique. Ainsi, chaque vue enfant n'a besoin que de spécifier le contenu unique qui la différencie des autres, tout en héritant de la structure et des éléments communs du layout.

Les trois directives principales pour implémenter l'héritage de templates dans Blade sont @extends, @section, et @yield. Comprendre leur interaction est fondamental pour construire des applications Laravel bien structurées, dont l'interface utilisateur est facile à maintenir et à faire évoluer.

Définir un layout de base : la directive @yield

Un layout Blade est simplement un fichier .blade.php (par exemple, resources/views/layouts/app.blade.php) qui contient la structure HTML de base de vos pages. A l'intérieur de ce layout, vous utilisez la directive @yield('nomDeLaSection') pour marquer les emplacements où les vues enfants pourront injecter leur propre contenu.

Voici un exemple simple de fichier layout :





    
    
    @yield('titrePage', config('app.name', 'Laravel')) 
    
    @stack('styles_specifiques') 


    

        
    


    

        @yield('contenuPrincipal') 
    


    

        
© {{ date('Y') }} {{ config('app.name', 'Laravel') }}. Tous droits réservés.

    


    
    @stack('scripts_specifiques')

Dans cet exemple :

  • @yield('titrePage', config('app.name', 'Laravel')) définit une section nommée titrePage. Le second argument est une valeur par défaut qui sera utilisée si la vue enfant ne fournit pas de contenu pour cette section.
  • @yield('contenuPrincipal') définit la section principale où le contenu spécifique de chaque page sera inséré.
  • @stack('styles_specifiques') et @stack('scripts_specifiques') sont des emplacements où les vues enfants peuvent "pousser" des balises ou @endpush

    Dans cet exemple :

    • @extends('layouts.app') indique que cette vue utilise app.blade.php comme layout.
    • @section('titrePage', 'Contactez-nous - Mon Application') est une forme courte pour définir une section qui ne contient qu'une simple chaîne de caractères. Elle remplit le @yield('titrePage') du layout.
    • Le bloc @section('contenuPrincipal') ... @endsection définit le HTML qui sera injecté à l'emplacement de @yield('contenuPrincipal') dans le layout.
    • @push('scripts_specifiques') ... @endpush ajoute un script à la pile scripts_specifiques définie dans le layout.

Sections avec contenu par défaut et héritage de section : @section/@show et @parent

Parfois, vous souhaitez qu'une section dans un layout ait un contenu par défaut, mais que les vues enfants puissent l'ajouter ou le remplacer. Au lieu de @yield, vous pouvez définir une section directement dans le layout en utilisant @section('nomDeLaSection') ... @show.

Une vue enfant peut alors choisir de :

  • Remplacer complètement cette section :
@section('barreLaterale')
    <h3>Menu Spécifique à la Page</h3>
    <p>Contenu unique de la barre latérale pour cette page.</p>
@endsection
  • Ajouter au contenu par défaut en utilisant la directive @parent à l'intérieur de sa propre définition de section. @parent injectera le contenu de la section telle qu'elle est définie dans le layout parent.
@section('barreLaterale')
    @parent 
    

    
Liens Additionnels

    
@endsection

Si une vue enfant n'inclut pas de directive @section('barreLaterale'), c'est le contenu par défaut défini avec @section/@show dans le layout qui sera affiché.

Inclusion de sous-vues (partials) : Pour des morceaux de code réutilisables qui ne constituent pas un layout entier (par exemple, un formulaire, une carte de produit, une barre de navigation), vous pouvez utiliser la directive @include('chemin.vers.la.partial'). Les données disponibles dans la vue parente le sont également dans la vue incluse. Vous pouvez aussi passer des données spécifiques à la vue incluse : @include('partials.alerte', ['type' => 'succes', 'message' => 'Opération réussie !']).







    @include('partials.navigation')

En combinant judicieusement @extends, @section, @yield, @parent, @push/@stack, et @include, vous pouvez construire des systèmes de templates très flexibles, modulaires et faciles à maintenir pour vos applications Laravel, peu importe leur complexité.