Después de mucho tiempo sin actualizar el blog, hoy traigo una entrada muy interesante. La cual va a consistir en ver cómo crear breadcrumbs dinámicos en Laravel de manera muy sencilla gracias a un paquete llamado “Laravel Breadcrumbs”.
Primero de todo vamos a instalar el paquete. Dependiendo de la versión de Laravel que tengas (si no tenéis aún, un proyecto de Laravel creado pasaros antes por este post), tendrás que instalar una versión o otra. En la documentación del paquete se puede ver una tabla con esa información.
Para instalarlo ejecutamos el siguiente comando:
|
1 |
composer require davejamesmiller/laravel-breadcrumbs:5.x |
Una vez finalice la instalación ejecutamos el siguiente comando para que nos publique los archivos de configuración del paquete en nuestro proyecto:
|
1 |
php artisan vendor:publish --provider="DaveJamesMiller\Breadcrumbs\BreadcrumbsServiceProvider" |
Con el archivo generado con este comando en config/breadcrumbs.php podremos cambiar las configuraciones del paquete. Podremos, por ejemplo, cambiar el estilo de breadcrumb, entre otras configuraciones. Yo voy a dejar el que viene por defecto, que es el estilo de Bootstrap 4. En la documentación del paquete puedes ver los diferentes estilos que hay o cómo crear uno personalizado.
Una vez tenemos esto, debemos crear un archivo llamado breadcrumbs.php (también podemos definirlo en el archivo de config) en el directorio routes.
Dentro de este archivo deberemos definir los diferentes niveles del breadcrumb según la página donde estemos. En el caso de prueba que he creado quedaría así (está basado en el de la documentación de Laravel Breadcrumbs):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<?php // Home Breadcrumbs::for('home', function ($trail) { $trail->push('Home', route('home')); }); // Home > Blog Breadcrumbs::for('posts.index', function ($trail) { $trail->parent('home'); $trail->push('Blog', route('posts.index')); }); // Home > Blog > [Category] Breadcrumbs::for('posts.category', function ($trail, $category) { $trail->parent('posts.index'); $trail->push($category->name, route('posts.category', $category->id)); }); // Home > Blog > [Category] > [Post] Breadcrumbs::for('posts.show', function ($trail, $post) { $trail->parent('posts.category', $post->category); $trail->push($post->title, route('posts.show', $post->id)); }); |
Como podemos ver hay diferentes niveles, el primero de todos es la home, después está el blog que será donde aparecerán el listado de posts, después el de categorías que será el listado de posts que pertenezcan a una categoría y por último la ficha del post.
Con el método parent le indicamos cual es el padre del nivel actual y con el método push le indicamos el nivel actual (el título que se mostrará y la ruta como parámetros).
Ya simplemente nos queda llamarlo en las vistas para que se muestre el breadcrumb. Para hacerlo debemos poner en las vistas que toque el siguiente código:
|
1 |
{{ Breadcrumbs::render('nombre') }} |
En mi caso serían 4:
|
1 2 3 4 5 6 7 |
{{ Breadcrumbs::render('home') }} // vista home {{ Breadcrumbs::render('posts.index') }} // vista posts.index {{ Breadcrumbs::render('posts.show', $post) }} // vista posts.show {{ Breadcrumbs::render('posts.category', $category) }} // vista posts.category |
El resultado sería este:
Esto es un simple ejemplo (basado en la documentación) de las cosas que se podrían hacer con este paquete, pero tiene muchísimas más cosas que pueden resultar bastante interesantes a la hora de querer añadir breadcrumbs en tu proyecto. Como por ejemplo la posibilidad de añadir el breadcrumb como JSON-LD para mejorar nuestro SEO y que Google detecte nuestro breadcrumb. Para más información acerca de Laravel Breadcrumbs consulta su documentación.
-
– https://github.com/davejamesmiller/laravel-breadcrumbs
Si hay cualquier tipo de error en el post o te surge cualquier duda, no dudes en ponerlo en los comentarios o enviarme un correo desde la página de contacto.
CONTACTAR