Gabarit de base pour les vues (app.blade.php, @yield, @extends, @section, @parent)

Laravel offre un mécanisme pour optimiser le code de nos vues : les gabarits. En anglais, on les appelle « layouts ».

Le squelette des pages Web sera défini dans un fichier, nommé gabarit de base. Il s'agira généralement du fichier resources\views\layouts\app.blade.php.

Le contenu propre à une page sera défini dans une vue qui hérite du gabarit de base.

▼Publicité

Pour permettre aux vues de définir leur propre contenu, le gabarit de base utilisera une ou plusieurs directives @yield. Cette directive définit des sections où les différentes vues pourront spécifier le contenu.

Ex :

Fichier resources\views\layouts\app.blade.php (Blade)

<!DOCTYPE html>

<html lang="fr-CA">

<head>

    <title>@yield('titre')</title>

    <meta charset="UTF-8">

    ...

</head>

<body id="top">

...

{{-- ******************************************************************************************** --}}

{{-- contenu --}}

{{-- ******************************************************************************************** --}}

 

<h1>@yield('h1')</h1>

 

<div class="content">

    @yield('contenu')

    ...

Pour qu'une vue soit basée sur ce gabarit, elle devra débuter par la directive @extends.

Le paramètre à passer à cette directive est constitué du nom du sous-dossier suivi d'un point puis du nom du gabarit.

Ex :

Vue Laravel (Blade)

@extends('layouts.app')

La vue pourra ensuite spécifier le contenu de chaque section que le gabarit a mis à sa disposition.

Pour les sections qui ne contiennent qu'une simple information :

Vue Laravel (Blade)

@section('titre', 'Liste des produits à vendre')

ou, si l'information est tirée d'une variable :

Vue Laravel (Blade)

@section('titre', $page->titre)

Pour les sections qui contiennent de l'information plus élaborée :

Vue Laravel (Blade)

@section('contenu')

    <div class="container">

        ...

    </div>

@stop

Le code HTML ainsi généré sera comme un « Copier-coller » de la section définie dans la vue enfant vers les « trous » prévus dans le gabarit de base.

HTML

<!DOCTYPE html>

<html lang="fr-CA">

<head>

    <title>Liste des produits à vendre</title>

    <meta charset="UTF-8">

    ...

</head>

<body id="top">

...

{{-- ******************************************************************************************** --}}

{{-- contenu --}}

{{-- ******************************************************************************************** --}}

 

<h1>Nos produits</h1>

 

<div class="content">

    <div class="container">

        ...

    </div>

    ...

Voici donc un exemple de vue basée sur le gabarit layouts.app et qui définit le contenu de deux sections :

Vue Laravel (Blade)

@extends('layouts.app')

 

@section('titre', 'Liste des produits à vendre')

@section('h1', 'Nos produits')

 

@section('contenu')

    <div class="container">

         ...

    </div>

@stop

Remarquez qu'il aurait été possible d'utiliser la directive @endsection au lieu de @stop. Les deux directives sont équivalentes. On préférera cependant @stop puisque @endsection est un vestige de Laravel 3.

Si la vue ne contient pas de @section pour chaque @yield...

Il n'est pas obligatoire pour une vue de remplir chacune des sections prévues par le gabarit.

Si une vue ne contient pas de directive @section correspondant à un @yield, le @yield sera simplement ignoré.

Contenu par défaut d'une section

Dans un gabarit, il est possible de spécifier un contenu par défaut pour une section.

Fichier resources\views\layouts\app.blade.php (Blade)

@yield('unesection', 'contenu par défaut')

Lorsqu'une vue basée sur ce gabarit n'a pas de directive @section correspondant à un @yield, le contenu par défaut sera utilisé.

En résumé :

  • Si une vue contient une directive @section correspondant à un @yield, c'est le contenu spécifié dans la vue qui sera affiché.
  • Si une vue ne contient pas de directive @section correspondant à un @yield et que ce @yield a un contenu par défaut, le contenu par défaut sera affiché.
  • Si une vue ne contient pas de directive @section correspondant à un @yield et que ce @yield n'a pas de contenu par défaut, le @yield sera ignoré.

Contenu par défaut plus élaboré

Dans le cas où le contenu par défaut de la section est plus élaboré, on remplacera, dans le gabarit, la directive @yield par @section... @show.

Fichier resources\views\layouts\app.blade.php (Blade)

@section('unesection')

    <p>Contenu par défaut plus élaboré</p>

    ...

@show

Remarquez que la directive @show est conçue pour une utilisation dans le gabarit de base alors que @stop est conçue pour une utilisation dans les vues basées sur un gabarit.

Lorsqu'un gabarit contient des directives @section... @show, une vue basée sur ce gabarit a trois choix :

  • Remplacer le contenu par défaut à l'aide d'une directive @section correspondant au @section du gabarit de base. Le contenu par défaut sera alors ignoré.
  • Compléter le contenu par défaut à l'aide d'une directive @section suivie d'une directive @parent. Le contenu par défaut et le contenu spécifié dans la vue enfant seront tous deux affichés.
  • Afficher seulement le contenu par défaut en ne spécifiant pas de directive @section correspondant au @section du gabarit de base.

Ex :

Fichier resources\views\layouts\app.blade.php (Blade)

@section('unesection')

    @parent

    <p>Ce contenu sera affiché après le contenu par défaut.</p>

@stop

Pour plus d'information

« Blade Templates - Template Inheritance ». Laravel. https://laravel.com/docs/master/blade#template-inheritance

« The Basics: @stop vs. @endsection vs. @show ». Code by Jeff. http://codebyjeff.com/blog/2015/05/become-a-swashbuckler-with-laravel-blade

Merci de partager ! Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on StumbleUponEmail this to someone
Catégories