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.
Esta lección incluye un video premium
Regístrate para ver este video y cientos de lecciones exclusivas.
Mira el código en GitHub: actual, resultado, comparación.
Actualmente tenemos HTML duplicado tanto en notes.blade.php como en add-note.blade.php, esto no es un problema grande puesto que son solo 2 plantillas, pero imagina que tenemos 100. Vamos a evitar la duplicación haciendo uso de los layouts de Blade.
Comienza creando un nuevo archivo layout.blade.php dentro de resources/views/
A continuación abre notes.blade.php y add-note.blade.php, identifica las partes que se repiten -en este caso es todo el HTML fuera de la etiqueta <main>– corta la parte de arriba y pégala en layout.blade.php, haz lo mismo con la parte de abajo.
En el medio del HTML que has copiado y pegado agrega lo siguiente: @yield('content')
De vuelta a notes.blade.php y add-note.blade.php, agrega esto al principio de la plantilla: @extends('layout')
El resto del código de la plantilla lo vas a envolver en las directivas @section('content') y @endsection. Recarga la página y observa el resultado.
Como puedes ver el resultado es igual al de antes, pero ahora los cambios al layout los realizaremos en layout.blade.php, modificando así un solo archivo y no varios.
Blade nos permite además definir varias secciones, no una sola, por ejemplo imagina que queremos personalizar el título en nuestras plantillas, por ejemplo, para ello agrega esta línea debajo de la directiva @extends en notes.blade.php:
@section('title', 'Listado de notas')
Luego regresa a layout.blade.php y cambia el título HTML por <title>@yield('title') - Styde</title>, al recargar la página en el navegador deberías ver el título «Listado de notas – Styde».
Lamentablemente en notas/crear el título dice » – Styde», podemos solucionarlo agregando un título con @section('title', 'Agregar nota') pero antes también podemos definir un valor por defecto para todos los títulos pasando un segundo argumento a la directiva @yield desde layout.blade.php:
<title>@yield('title', 'App de notas') - Styde</title>
Como puedes ver desde las diferentes plantillas extendemos de un layout que contiene las partes de nuestro diseño que se repiten (generalmente header, footer, sidebar) pero el layout nos permite definir las áreas que queremos «ceder» y que pueden ser personalizadas con contenido proveniente de la plantilla.
También quiero recalcar que hay 2 formas de usar la directiva section, una que es conveniente para definir varias líneas de HTML con @section('content') y @endsection y otra para pasar simples cadenas y valores en línea como por ejemplo @section('title', 'Listado de notas')
Por último, el nombre de las secciones es completamente arbitrario, podría haberles colocado título y contenido (en español) o cualquier otro nombre.
Si quieres aprender más sobre Blade revisa la documentación de Laravel en español, más adelante trabajaremos con diseños más complejos que requerirán del uso de más directivas, mientras tanto vamos a hablar de URLs en la próxima lección.
Material Relacionado
Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.
Lección anterior Introducción a Blade el motor de plantillas de Laravel 6 Lección siguiente Generar URLs con Laravel 6