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.
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 :
<!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 :
@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 :
@section('titre', 'Liste des produits à vendre')
ou, si l'information est tirée d'une variable :
@section('titre', $page->titre)
Pour les sections qui contiennent de l'information plus élaborée :
@section('contenu')
<div class="container">
...
</div>
@endsection
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.
<!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 :
@extends('layouts.app')
@section('titre', 'Liste des produits à vendre')
@section('h1', 'Nos produits')
@section('contenu')
<div class="container">
...
</div>
@endsection
Remarquez qu'il aurait été possible d'utiliser la directive @stop au lieu de @endsection. Les deux sont équivalentes. Laravel utilisait @stop dans sa documentation jusqu'à la version 5.0 (https://laravel.com/docs/5.0/templates#blade-templating). Depuis Laravel 5.1, la documentation utilise la directive @endsection.
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é.
Dans un gabarit, il est possible de spécifier un contenu par défaut pour une section.
@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é :
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.
@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 @endsection (ou son équivalent @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 :
Ex :
@section('unesection')
@parent
<p>Ce contenu sera affiché après le contenu par défaut.</p>
@endsection
« 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
▼Publicité
