Puntos clave
- Los diseños de hoja te permiten reutilizar una plantilla maestra en varias páginas.
- Utiliza @extends, @section y @yield para gestionar limpiamente el contenido de las páginas.
- @include te ayuda a dividir los diseños en componentes reutilizables.
- Pasa datos dinámicos a las vistas para personalizar el contenido.
- Un diseño Blade estructurado mantiene tu aplicación Laravel escalable y organizada.
Los diseños suelen ser el punto de partida de muchos proyectos de desarrollo web.
Si eres nuevo en Laravel, Blade es la forma más sencilla de crear y gestionar el diseño HTML de tu sitio web para producir diseños y temas elegantes. En lugar de escribir el mismo código (como encabezados y pies de página) en cada página, Blade te ayuda a reutilizarlos, ahorrando tiempo y manteniendo las cosas organizadas.
En esta guía, trataremos:
- Crear un diseño maestro (para evitar repetir código)
- Dividir las páginas en componentes (encabezados, pies de página, etc.)
- Ampliar diseños en diferentes vistas
- Renderizado de vistas con rutas básicas
Al final, sabrás cómo estructurar el frontend de una aplicación Laravel utilizando Blade. Esto es ideal para principiantes en Laravel que quieran entender cómo se estructuran las páginas web del mundo real en Laravel.
Empecemos…
- Cómo es la estructura básica de una plantilla de cuchillas
- Requisitos previos
- Paso 1: Establece tus rutas
- Paso 2: Crear la estructura del directorio Vistas
- Paso 3: Crear la hoja Incluye
- Paso 4: Crear el archivo de diseño maestro
- Paso 5: Crear las páginas de inicio y de contacto
- Paso 6: Ver tus páginas en el navegador
- Conclusión
Cómo es la estructura básica de una plantilla de cuchillas
Piensa en las plantillas Blade como si estuvieras construyendo con bloques de Lego. Empiezas con una placa base (tu archivo de diseño) que lo mantiene todo unido, y luego añades diferentes piezas (tus vistas) encima.
La Fundación (layout.blade.php):
<!DOCTYPE html>
<html>
<head>
<title>@yield('page_title', 'Default Title')</title>
<!-- Common CSS/JS files go here -->
</head>
<body>
<header>@yield('header_content')</header>
<main>
@yield('main_content')
</main>
<footer>@yield('footer_content', 'Default footer text')</footer>
</body>
</html>
Piezas clave:
- @yield() – Son marcadores de posición a la espera de ser rellenados
- Contenido por defecto (opcional) – Se muestra si no se proporciona una sección
- Elementos comunes – Como archivos CSS/JS utilizados en todas las páginas
Requisitos previos
Antes de empezar, asegúrate de que tienes instalado PHP 8.2+ y Composer:
1. Instala el proyecto Laravel
Si aún no lo has hecho, puedes crear un nuevo proyecto Laravel ejecutando:
composer create-project laravel/laravel laravel-blade-layouts
A continuación, navega hasta el directorio de tu proyecto:
cd laravel-blade-layouts
2. Inicia el Servidor de Desarrollo Local
Una vez configurado tu proyecto, puedes iniciar el servidor de desarrollo integrado de Laravel:
php artesano servir
Visita http://127.0.0.1:8000 en tu navegador. Deberías ver la pantalla de bienvenida de Laravel.
Paso 1: Establece tus rutas
Definamos las páginas que queremos crear: una página de Inicio y una página de Contacto. Por defecto, Laravel probablemente tiene una ruta predeterminada como ésta:
Route::get('/', function () {
return view('welcome');
});
Let’s change that.
Open the routes/web.php file and replace its contents with the following:
<?php
use Illuminate\Support\Facades\Route;
Route::get('/', function () {
return view('pages.home');
});
Route::get('/contact', function () {
return view('pages.contact');
});
Estas rutas indican a Laravel que cargue resources/views/pages/home.blade.php cuando alguien visite la página de inicio (/) y resources/views/pages/contact.blade.php cuando vayan a /contact.
Pero antes de que funcionen, tenemos que crear esas vistas y el diseño que utilizarán.
Paso 2: Crear la estructura del directorio Vistas
Asegurémonos de que nuestras opiniones están organizadas de forma que tengan sentido.
Dentro del directorio resources/views/, crearemos tres carpetas:
- layouts → contendrá nuestra plantilla principal
- includes → aquí se almacenarán las partes reutilizables como el encabezado, el pie de página ylas metaetiquetas
- páginas → esto contendrá cada página individual como inicio y contacto
Así que ve a resources/views/ y crea estas tres carpetas:
Ahora vamos a empezar a llenar estas carpetas con los archivos que necesitamos.
Paso 3: Crear la hoja Incluye
Blade incluye ayuda para dividir tu diseño en piezas reutilizables. Esto es muy útil porque mantiene tu código limpio y DRY (Don’t Repeat Yourself). Piensa que es como construir con Legos: estos son los bloques.
Vamos a crear una sección de encabezado, una barra de encabezado y un pie de página.
A) Crea la sección <head>
Esto incluirá metadatos, un título y un enlace CSS. En resources/views/includes, crea un archivo llamado head.blade.php y pega esto:
<title>Laravel Blade Layout</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: sans-serif;
margin: 0;
padding: 0;
}
header, footer {
background-color: #f4f4f4;
padding: 1em;
text-align: center;
}
main {
padding: 2em;
}
</style>
Este es el código estándar que va en la sección <head> de cada página web. Hace cosas importantes como
- Establece la codificación de caracteres de la página (para que las letras se muestren correctamente)
- Hace que la página se vea bien en teléfonos y ordenadores
- Añade un título que se muestra en la pestaña del navegador
- Añade opcionalmente CSS de Bootstrap para dar estilo
B) Crear la Cabecera (Navbar)
Ahora, en la misma carpeta includes/, crea header.blade.php y pega el código que se menciona a continuación:
<h2>My Site Header</h2> <nav> <a href="/">Home</a> | <a href="/contact">Contact</a> </nav>
Ahora tenemos una sencilla barra de navegación Bootstrap que enlaza con nuestras páginas de Inicio y Contacto.
C) Crear el pie de página
Aún en i ncludes/, crea footer.blade.php y pega el código que se menciona a continuación:
<p>© 2025 Laravel Blade Example</p>
Paso 4: Crear el archivo de diseño maestro
Ahora vamos a reunir esos includes en un archivo de diseño principal. Piensa en este archivo como el esqueleto de cada página: una estructura común que no queremos repetir.
En la carpeta layouts/, crea un archivo llamado default.blade.php:
<!DOCTYPE html>
<html>
<head>
@include('includes.head')
</head>
<body>
<header>
@include('includes.header')
</header>
<main>
@yield('content')
</main>
<footer>
@include('includes.footer')
</footer>
</body>
</html>
Me explico:
- @include() es la forma de introducir archivos parciales como la cabecera, el pie de página y la sección head.
- @yield(‘contenido’) es un marcador de posición. Cada página individual inyectará aquí su contenido único utilizando @section(‘contenido’).
Ahora vamos a hacer algunas páginas que utilicen este diseño.
Paso 5: Crear las páginas de inicio y de contacto
En la carpeta pages/, crea home.blade.php:
@extends('layouts.default')
@section('content')
<h1>Welcome to the Home Page</h1>
<p>This content is unique to the home page.</p>
@endsection
Y ahora crea contact.blade.php:
@extends('layouts.default')
@section('content')
<h1>This is the Contact Page</h1>
@stop
¿Te has fijado en que ambas páginas utilizan @extends(‘layouts.default’)? Así es como Blade sabe que debe utilizar el diseño que hemos creado.
Entonces, el contenido de @section(‘content’) es lo que se introduce en el marcador de posición @yield(‘content’) del diseño.
Paso 6: Ver tus páginas en el navegador
Ahora vuelve a tu navegador y actualiza la página de inicio. Asegúrate de que tu servidor de desarrollo está funcionando:
php artesano servir
Entonces:
- Visita http://127.0.0.1:8000/ → Deberías ver tu página de inicio personalizada con la cabecera y el pie de página.
- Visita http://127.0.0.1:8000/contact → Verás la página de contacto, de nuevo envuelta en el mismo diseño.
Técnicas Avanzadas de Disposición de las Hojas
Una vez que hayas puesto en marcha el diseño básico, probablemente te preguntes: «Vale, esto está muy bien… ¿pero cómo consigo que parezca un sitio real con contenido real?».
Buena pregunta.
Exploremos ahora la posibilidad de pasar datos dinámicos a las vistas Blade (porque los sitios reales no se limitan a repetir «Bienvenido a la página de inicio» eternamente).
¿Listo para poner en marcha tus proyectos Laravel?
Configura los diseños de Blade y prepara tu aplicación Laravel para un alojamiento de alto rendimiento.
Pasar datos a tus vistas de hoja
No siempre quieres que tus plantillas escupan el mismo texto. Quizá quieras saludar a un usuario por su nombre, mostrar la fecha de hoy o cargar datos de una base de datos. Ahí es donde entran en juego los datos de la vista.
Supongamos que quieres personalizar la página de inicio con un nombre.
Abre tu archivo routes/web.php y actualiza la ruta de tu página de inicio de este modo:
// routes/web.php
Route::get('/', function () {
return view('pages.home', ['name' => 'Abdul Rehman']);
});
Ahora actualiza home.blade.php para utilizar esos datos:
@extends('layouts.default')
@section('content')
<h1>Welcome, {{ $name }}!</h1>
<p>This content is unique to the home page.</p>
@endsection
Actualiza la página en tu navegador y pum, ya lo verás:
¡Bienvenido, Abdul Rehman!
Esto es útil cuando quieres personalizar la experiencia del usuario o rellenar páginas con datos reales.
¿Quieres probarlo más a fondo?
Prueba a cambiar Abdul Rehman por «Zara» o «David» y vuelve a actualizar la página. Esto demuestra que tu vista responde a una entrada dinámica.
Por qué es importante:
Pasar datos a las vistas es la base para dar vida a tu aplicación. Aunque este ejemplo está codificado, la misma técnica funciona cuando se extraen datos de una base de datos o API más adelante.
Conclusión
Con esto terminamos nuestra guía sobre el uso de Laravel Blade para crear diseños limpios y reutilizables. Laravel Blade te permite separar la estructura de tu sitio de su contenido, facilitando la gestión de encabezados, pies de página y otros elementos compartidos sin repetirte en cada página.
Esto es lo que analizamos en este blog:
- Empezamos por lo básico: crear un diseño maestro con @yield, dividir la página en elementos como la cabecera, el pie de página y el encabezado, y ampliar los diseños en vistas individuales con @extends y @section.
- En la parte avanzada, exploramos cómo pasar datos dinámicos a las vistas Blade, haciendo que tus páginas parezcan más personalizadas y preparadas para el mundo real.
Con estos fundamentos, ahora tienes un punto de partida sólido para estructurar el código frontend de Laravel de la forma correcta.
Preguntas frecuentes
P) ¿Qué es un Blade en Laravel?
A) Blade es el motor de plantillas de Laravel que ayuda a separar el código PHP del HTML, haciendo que las vistas sean dinámicas y reutilizables. Simplifica la herencia de plantillas y la reutilización de componentes.
P) ¿Cuál es el propósito de usar diseños Blade en Laravel?
A) Los diseños Blade estructuran tus vistas Laravel separando el contenido del diseño, garantizando la reutilización del código y un mantenimiento sencillo.
P) ¿Existen diseños predefinidos de Blade en Laravel?
A) Sí, Laravel incluye un diseño por defecto, app.hoja.phpen resources/views/layouts/y puedes crear plantillas personalizadas para organizar mejor el proyecto.
P) ¿Cómo defino e incluyo secciones reutilizables en una maqueta Blade?
A) Utiliza @rendimiento para definir secciones y @include para insertar componentes reutilizables en las plantillas Blade, haciéndolas modulares y mantenibles.
P) ¿Puedo ampliar varios diseños de Blade en Laravel?
A) No, sólo puedes ampliar un diseño Blade utilizando @ampliacionespero puedes incluir varias plantillas utilizando @include para componentes reutilizables.
P) ¿Cómo creo un archivo Blade en Laravel?
A) Para crear una plantilla Blade, añade un archivo .blade.php dentro de recursos/vistas/ y estructura tu contenido dinámico utilizando directivas Blade.
P) ¿Qué es la directiva @yield en Laravel?
A) El @rendimiento define secciones en un diseño Blade que las vistas hijas pueden rellenar, permitiendo una inyección de contenido flexible en las plantillas.
P) ¿Cómo puedo crear una directiva Blade personalizada en Laravel?
A) Registra una directiva personalizada en AppServiceProvider utilizando Hoja::directiva()y utilízala en las vistas para conseguir una lógica de código más limpia y reutilizable.
P) ¿Cómo puedo crear un diseño de Laravel 9 Blade?
A) Instala Laravel, configura un controlador, define rutas, crea un diseños añade parciales, estructura tus archivos Blade y utiliza @extends y @sección para gestionar el contenido.
Abdul Rehman
Abdul es un experto en tecnología, aficionado al café y al marketing creativo al que le encanta estar al día de las últimas actualizaciones de software y aparatos tecnológicos. También es un hábil escritor técnico capaz de explicar conceptos complejos de forma sencilla para un público amplio. Abdul disfruta compartiendo sus conocimientos sobre el sector de la Nube a través de manuales de usuario, documentación y entradas de blog.
