Modificar páginas de ERROR en Laravel

En esta ocasión, volvemos con una pequeña entrada en la que vamos a aprender a modificar las vistas que Laravel nos lanza cuando ocurre un error, como por ejemplo, el error 404, que es el que nos indica que la página a la que intentamos acceder no se encuentra:

Personalizar las vistas de error en Laravel

Las vistas de error que nos muestra Laravel se encuentran en la siguiente ruta del framework: «\vendor\laravel\framework\src\Illuminate\Foundation\Exceptions\views», ahí encontraremos las vistas de los diferentes errores:

Podríamos modificar los errores en esta carpeta sin más, pero no es de buena práctica modificar nada que esté en vendor, por eso, tenemos otra alternativa muy fácil.

Modificando nuestras propias vistas

Para no modificar los archivos anteriores, lo que vamos a hacer es crear una carpeta en views, (resource/views) dentro de ésta crearemos la carpeta errors y aquí las vistas con el mismo nombre del error que queramos cambiar. De ésta forma, Laravel utilizará estas vistas en vez de las que tiene en Vendor

Modificando el error 404 en Laravel

Como ejemplo, vamos a utilizar la vista 404 para cambiar su contenido. Para modificar el contenido de las demás vistas, puedes hacer el mismo proceso.

Creamos en la carpeta errors la plantilla blade, llamada 404.blade.php y copiamos en ésta el contenido de la vista que estaba en vendor:

@extends('errors::illustrated-layout')

@section('code', '404')
@section('title', __('Page Not Found'))

@section('image')
<div style="background-image: url('/svg/404.svg');" class="absolute pin bg-cover bg-no-repeat md:bg-left lg:bg-center">
</div>
@endsection

@section('message', __('Sorry, the page you are looking for could not be found.'))

Modificando los mensajes de cada section, añadiendo un nuevo estilo a sus componentes y cambiando la imagen, podemos crear otra vista distinta:

@extends('errors::illustrated-layout')

@section('code', '404')
@section('title', __('Página no encontrada'))

@section('image')
<style>
    #apartado-derecho{
        text-align:center;
    }
    ul{
        text-decoration: none !important;
        list-style: none;
        color: black;
        font-weight: bold;
    }
</style>
<div id="apartado-derecho" style="background-color: #F5716C;" class="absolute pin bg-cover bg-no-repeat md:bg-left lg:bg-center">
    <h2>Encuentra lo que buscas en nuestro menú:</h2>
    <ul>
        <li><a href="/">Inicio</a></li>
        <li><a href="/">Blog</a></li>
        <li><a href="/">Dónde estamos</a></li>

    </ul>
</div>
@endsection

@section('message', __('No hemos encontrado la página que buscas.'))

De esta forma, hemos cambiado el contenido de los mensajes e incluso podemos añadir, por ejemplo ,un menú para que el usuario siga navegando por nuestra página, tenga una mejor experiencia, etc: