CursosEmpresasBlogLiveConfPrecios

Contenido del curso

No sé dónde empezar

Manos a la obra con nuestro proyecto

Tomar examen

Plantillas Blade para vistas sin código repetido

Resumen

Cuando trabajas con varias vistas en Laravel y notas que repites la misma estructura HTML una y otra vez, llega el momento de crear una plantilla Blade. Esta técnica te permite centralizar el diseño en un solo archivo y dedicarte únicamente a administrar el contenido de cada página, algo clave para cualquier desarrollador que busque escribir código mantenible.

¿Por qué usar una plantilla Blade en Laravel?

Imagina que tienes tres vistas: home, blog y post. Las tres comparten el mismo encabezado, menú y estructura general. Si necesitas cambiar un enlace del menú, tendrías que editar los tres archivos. Con una plantilla, lo cambias en un solo lugar.

El beneficio real está en tener archivos cortos y fáciles de administrar. Cuando programas una aplicación, escribes el código una vez y lo mantienes muchas veces, así que entre menos repetición tengas, mejor.

¿Qué es una plantilla Blade? Es un archivo .blade.php que define la estructura HTML común de tu sitio y deja huecos llamados secciones donde otras vistas inyectan su contenido propio.

¿Cómo creo el archivo template.blade.php?

El primer paso es crear un archivo nuevo dentro de la carpeta de vistas, por ejemplo template.blade.php [01:00]. Dentro colocas la estructura HTML base de Laravel: encabezado, título y un menú con los enlaces que se van a repetir en todo el sitio.

Dentro del body defines un menú básico con dos enlaces, uno hacia el home y otro hacia el blog. Justo debajo agregas la directiva que actuará como contenedor del contenido variable.

blade

<body> <p> <a href="">Home</a> | <a href="">Blog</a> </p> <hr> @yield('contenido') </body>

La palabra contenido dentro de @yield es la etiqueta que luego usarás desde otras vistas para inyectar HTML específico de cada página.

¿Cómo extiendo la plantilla desde otras vistas?

En las vistas hijas, como home.blade.php, blog.blade.php y post.blade.php, borras toda la estructura HTML repetida y la sustituyes por dos directivas clave de Blade [02:15].

blade @extends('template')

@section('contenido')

<h1>Bienvenido al Home</h1> <p>Contenido específico de esta vista</p> @endsection

La directiva @extends indica de qué plantilla hereda la vista, mientras que @section('contenido') define qué HTML se va a inyectar exactamente en el @yield que dejaste reservado.

¿Cuál es la diferencia entre @yield y @section? @yield se usa en la plantilla para reservar el espacio. @section se usa en la vista hija para llenar ese espacio con contenido específico.

Al repetir este patrón en blog y post, terminas con archivos pequeños donde solo administras lo que cambia, lo cual facilita el mantenimiento a largo plazo.

¿Cómo nombro las rutas para construir los enlaces?

Para que los botones del menú funcionen sin escribir URLs a mano, necesitas darle un nombre a cada ruta en el archivo web.php [03:30]. El método name() se encarga de eso.

php Route::get('/', function () { return view('home'); })->name('home');

Route::get('/blog', function () { return view('blog'); })->name('blog');

Route::get('/post/{slug}', function ($slug) { return view('post', ['slug' => $slug]); })->name('post');

Fíjate que la ruta de post recibe un parámetro slug, porque cada publicación necesita identificarse con un valor único en la URL.

¿Cómo uso la función route() en mis enlaces?

Una vez que las rutas tienen nombre, puedes generar los enlaces de forma dinámica con la función route() dentro de las llaves dobles de Blade. En tu plantilla actualizas el menú así:

blade <a href="{{ route('home') }}">Home</a> | <a href="{{ route('blog') }}">Blog</a>

Laravel verifica si el nombre que pasas existe y construye la URL completa por ti. Si haces clic derecho en el navegador y revisas el HTML generado, verás los enlaces ya armados correctamente.

Para los enlaces de cada post dentro de la vista de blog, pasas el parámetro como segundo argumento [04:45]:

blade <a href="{{ route('post', $slug) }}">PHP</a> <a href="{{ route('post', $slug) }}">Laravel</a>

De esta forma, al hacer clic en PHP o en Laravel, el navegador te lleva al post correspondiente con su slug en la URL.

¿Por qué usar route() en vez de escribir la URL directa? Porque si cambias la URL en el archivo de rutas, todos los enlaces que usen el nombre de la ruta seguirán funcionando sin que tengas que editarlos uno por uno.

¿Qué gano al trabajar con plantillas y rutas con nombre?

Al combinar plantillas Blade con rutas nombradas obtienes tres ventajas concretas que vas a notar en cada proyecto:

  • Reducción de código duplicado en tus vistas.
  • Mantenimiento centralizado del diseño y los enlaces.
  • Escalabilidad para agregar nuevas páginas sin reescribir estructura.

Ahora te toca a ti replicar este ejercicio. Crea tu propia plantilla, define al menos dos vistas hijas y conecta los enlaces con route(). Cuéntame en los comentarios qué otros bloques reutilizables te gustaría aislar en tu plantilla.