Cómo utilizar herencia de plantillas en Blade
Blade es el motor de plantillas predeterminado de Laravel. Ofrece una sintaxis fácil de aprender y utilizar, lo que permite separar la lógica de presentación del código PHP. Esto se traduce en una mayor claridad y mantenimiento del código, ya que las vistas pueden extenderse y reutilizarse de manera eficiente.
A diferencia de otros motores de plantillas, Blade no impone una sobrecarga significativa en la aplicación, ya que sus plantillas son compiladas en código PHP nativo y posteriormente almacenadas en caché, lo que mejora el rendimiento de la aplicación.
Introducción a la Herencia de Plantillas
La herencia de plantillas es una característica clave de Blade que permite a los desarrolladores definir una estructura común en una plantilla base y luego extenderla en otras vistas. Esto es especialmente útil para mantener la coherencia en el diseño y la funcionalidad de las vistas, ya que evita la repetición de código.
Ventajas de Utilizar la Herencia de Plantillas
- Mantenimiento Simplificado: Si necesitas cambiar el diseño general de tu aplicación, puedes modificar la plantilla base y todos los cambios se reflejarán en las vistas que la extienden.
- Reutilización de Código: Puedes definir secciones comunes como encabezados, pies de página y menús de navegación en la plantilla base, evitando así la duplicación de código.
- Organización: Mantiene tu proyecto organizado al separar la estructura común del contenido específico de cada vista.
Cómo Configurar una Plantilla Base
El primer paso para utilizar la herencia de plantillas en Blade es crear una plantilla base que servirá como el esqueleto de todas las demás vistas.
Paso 1: Crear la Plantilla Base
Crea un archivo en la carpeta resources/views/layouts (puedes crear esta carpeta si no existe) llamado app.blade.php. Esta será tu plantilla base. Aquí tienes un ejemplo básico:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@yield('title', 'Mi Aplicación')</title>
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
<header>
@include('partials.header')
</header>
<main>
@yield('content')
</main>
<footer>
@include('partials.footer')
</footer>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>Explicación del Código
-
@yield('title', 'Mi Aplicación'): Define un área donde se puede insertar un título específico en cada vista que extienda esta plantilla. Si no se proporciona un título, se utiliza "Mi Aplicación" como valor predeterminado. -
@include('partials.header'): Incluye una vista parcial para el encabezado, que puede contener el menú de navegación u otros elementos repetidos en todas las páginas. -
@yield('content'): Define un área de contenido donde cada vista específica puede inyectar su contenido único. -
@include('partials.footer'): Similar al encabezado, incluye una vista parcial para el pie de página.
Paso 2: Crear una Vista que Extienda la Plantilla Base
Una vez que tengas tu plantilla base, puedes crear una vista que la extienda. Vamos a crear un archivo home.blade.php en la carpeta resources/views.
@extends('layouts.app')
@section('title', 'Página de Inicio')
@section('content')
<h1>Bienvenido a Mi Aplicación</h1>
<p>Esta es la página de inicio de mi aplicación.</p>
@endsectionExplicación del Código
-
@extends('layouts.app'): Indica que esta vista hereda de la plantilla baseapp.blade.php. -
@section('title', 'Página de Inicio'): Define el contenido de la seccióntitle, reemplazando el valor predeterminado de la plantilla base. -
@section('content'): Define el contenido principal de la página que se inyectará en el áreacontentde la plantilla base.
Uso de Secciones y Stack en Blade
Además de @yield y @section, Blade ofrece otras directivas para gestionar de manera más avanzada el contenido de las plantillas.
Directiva @stack y @push
Las directivas @stack y @push son útiles cuando necesitas añadir contenido específico en distintas partes de tu plantilla, especialmente cuando hay múltiples secciones que necesitan ser extendidas o complementadas.
Ejemplo con @stack y @push
En la plantilla base app.blade.php, puedes definir una pila para los scripts personalizados que desees cargar:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@yield('title', 'Mi Aplicación')</title>
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
@stack('styles')
</head>
<body>
<!-- Contenido de la plantilla base -->
<script src="{{ asset('js/app.js') }}"></script>
@stack('scripts')
</body>
</html>
Luego, en la vista home.blade.php, puedes añadir estilos y scripts específicos para esa vista:
@extends('layouts.app')
@section('title', 'Página de Inicio')
@push('styles')
<link rel="stylesheet" href="{{ asset('css/home.css') }}">
@endpush
@section('content')
<h1>Bienvenido a Mi Aplicación</h1>
<p>Esta es la página de inicio de mi aplicación.</p>
@endsection
@push('scripts')
<script src="{{ asset('js/home.js') }}"></script>
@endpush
Con esto, los estilos y scripts específicos para la página de inicio se inyectarán en los lugares definidos por @stack('styles') y @stack('scripts') en la plantilla base.
Directiva @include y Componentes de Blade
Además de la herencia de plantillas, Blade permite incluir fragmentos de código reutilizables mediante la directiva @include. Esto es útil para añadir partes de la interfaz que se repiten en varias vistas, como menús, encabezados o pies de página.
Ejemplo de Uso de @include
Imagina que tienes un menú de navegación común para todas las vistas. Puedes crear un archivo en resources/views/partials/header.blade.php:
<nav>
<ul>
<li><a href="/">Inicio</a></li>
<li><a href="/about">Sobre Nosotros</a></li>
<li><a href="/contact">Contacto</a></li>
</ul>
</nav>Luego, puedes incluir este menú en tu plantilla base o en cualquier otra vista utilizando:
@include('partials.header')Componentes de Blade
Laravel 7 introdujo componentes de Blade, que permiten encapsular HTML y lógica de vista en una clase de componente, proporcionando una manera más modular y reutilizable de construir la interfaz de usuario.
Para crear un componente, ejecuta el siguiente comando:
php artisan make:component Alert
Esto generará un archivo de vista en resources/views/components/alert.blade.php y un archivo de clase en app/View/Components/Alert.php.
Luego, puedes utilizar este componente en tus vistas como:
<x-alert type="success" :message="$message" />Los componentes de Blade son ideales para encapsular elementos repetitivos o complejos que requieren lógica adicional.
Conclusión
La herencia de plantillas en Blade es una herramienta poderosa que permite a los desarrolladores de Laravel crear aplicaciones más organizadas, mantenibles y escalables. Al utilizar plantillas base, secciones, @stack y componentes de Blade, puedes maximizar la reutilización de código y mantener un flujo de trabajo limpio y eficiente.
Si estás construyendo una aplicación con Laravel, dominar la herencia de plantillas en Blade es esencial para crear vistas coherentes y fácilmente mantenibles. Recuerda que, al mantener tus vistas organizadas y modulares, facilitas el mantenimiento a largo plazo y mejoras la calidad general de tu código.
¡Empieza a aplicar estas técnicas en tu próximo proyecto de Laravel y observa cómo mejora tu desarrollo web!😃😃
Jorge García
Fullstack developer