Layouts tradicionales con Laravel 10 y Blade

El motor de plantillas Blade incluido con Laravel nos brinda una manera muy sencilla de crear layouts para evitar la duplicación de código en nuestras plantillas, como veremos a continuación.

Mira el código en GitHub: actual, resultado, comparación.

Actualmente tenemos HTML duplicado tanto en notes.blade.php como en create.blade.php, esto no es un problema grande puesto que son solo 2 plantillas, pero imagina que tenemos 100 plantillas. Vamos a evitar la duplicación haciendo uso de los layouts de Blade.

Para incluir una plantilla usamos la directiva @include de Blade.

@include('layouts.header')

Con Blade, tenemos al menos dos alternativas mejores para la creación de plantillas. Podemos, por ejemplo, crear un único archivo que llamaremos app.blade.php dentro del directorio layouts. En este archivo, vamos a incluir el código del encabezado seguido del código del footer.

<header>
    <!-- Contenido de nuestro header -->
</header>

@yield('content')

<footer>
    <!-- Contenido de nuestro footer -->
</footer>

Con @yield, estamos creando un lugar para «inyectar» el contenido específico de cada página. Luego, en cada archivo de la página (como create.blade.php), cambiaremos el uso de @include por @extends para indicarle a Blade que queremos extender layouts.app, y envolveremos todo el contenido de la página en @section('content') y @endsection.

<!-- create.blade.php -->
@extends('layouts.app')

@section('content')
    <!-- ...código de la página... -->
@endsection

Este método también tiene la ventaja de poder definir diferentes secciones, por ejemplo, si queríamos personalizar el título de la página, todo lo que necesitamos hacer es definir una nueva sección con @section('title') en nuestro layout.

Podemos darle un valor por defecto a una sección pasándolo como segundo argumento de la directiva @yield en nuestra plantilla de layout, por ejemplo: @yield('title', 'Título por defecto').

En la siguiente lección aprenderemos a crear layouts mediante el uso de componentes.

Únete a nuestra comunidad en Discord y comparte con los usuarios y autores de Styde, 100% gratis.

Únete hoy

Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.