32. Como modificar la plantilla de Jetstream

En este capítulo de Laravel, aprenderás cómo personalizar la plantilla predeterminada de Jetstream en tu proyecto Laravel. Aprenderás cómo editar estilos CSS y archivos de Blade para modificar la apariencia y la funcionalidad de la plantilla. También cubriremos cómo mantener tus modificaciones actualizadas con las nuevas versiones de Jetstream y Laravel, y cómo crear tu propia plantilla personalizada desde cero utilizando Jetstream. Al final de este capítulo, tendrás un conocimiento profundo de cómo personalizar y crear plantillas con Jetstream.

Tema anterior Siguiente tema

1 comentarios

Inicia sesión para comentar

Iniciar sesión

Comentarios:

  • Walter

    Walter hace 8 meses

    📌 Personalizando la plantilla Jetstream

     

    📌 Middleware: es un filtro que aplicamos a nuestras rutas.

     

    📌 En routes\web.php:

    Route::middleware(['auth:sanctum', 'verified'])
	->get('/dashboard', function() {
		return view('dashboard');
	})
	->name('dashboard');

          Este middleware auth redirige a dashboard si estamos autenticados y en caso contrario nos redirige a la URL de login.

     

    📌 Vemos que la vista dashboard.blade.php extiende haciendo uso de los componentes de Blade:

    <x-app-layout>
	<x-slot name="header">
		<h2 class="font-semibold text-xl text-gray-800 leading-tight">
			{{ __('Dashboard') }}
		</h2>
	</x-slot>

	<div class="py-12">
		<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
			<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
				<x-jet-welcome />
			</div>
		</div>
	</div>
</x-app-layout>

     

    📌 La convención de nombres de componentes es CamelCase y la forma en que los llamamos es kebab-case, entonces para <x-app-layout> buscamos el método render en app\View\Components\AppLayout.php

    public function render() {
	return view('layouts.app');
}

          Entonces en la vista resources\views\layouts\app.blade.php tenemos la estructura básica que tendrán todas las páginas de nuestro sitio web.

     

    📌 Analizando la estructura básica de la plantilla

     

    <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

          El método app() está sacando el valor de idioma del archivo de configuración que se encuentra en config\app.php: 

    'locale' => 'en',

     

          En <title>{{ config('app.name', 'Laravel') }}</title> vemos que se usa el método config y nos dice que obtiene el valor del <title> de la variable app.name que está en el archivo de configuración .env

    APP_NAME=Laravel

     

          Siguiendo con la plantilla vemos que se llama a googlefonts y luego los estilos:

    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
@livewireStyles

          En primer lugar se llama a una hoja de estilos con el método asset que se posiciona en la carpeta public y a partir de ahí se le pasa la ruta que debe recorrer: public/css/app.css; este archivo tiene todos los estilos de Tailwind que podrán utilizar las páginas que extiendan de esta plantilla.

          Luego se incorporan los estilos de Livewire.

     

          Siguiendo con el head del archivo vemos que se está importando la librería alpine, o sea que todo lo referente a JS se estará trabajando con Alpine.

     

    📌 Ya no estamos llamando a esta plantilla con la directiva @extends sino como un componente. De igual forma para cambiar el contenido de esta plantilla ya no estamos definiendo las directivas @yield y @content sino que hacemos uso de los slots. En dashboard.blade.php tenemos un slot con nombre header y un slot sin nombre cuyo contenido está definido por el componente <x-jet-welcome /> que como tiene delante del nombre la palabra jet le indica a Laravel que no es un componente creado por nosotros sino que es un componente de Jetstream y debe buscarlo en la ruta vendor/laravel/jetstream/resources/views/components y en este caso se llama welcome.blade.php

     

    📌 Agregando links al menú de navegación

     

          Ahora en el body vemos que estamos llamando a un componte de Livewire:

    @livewire('navigation-dropdown')

          Este componente renderiza la vista navigation-dropdown.blade.php que se encuentra en resources/views/. 

     

    📌 Si analizamos esta vista vemos que hay dos grupos de links de navegación:

     

    • Los links para desktop están siendo impresos a través del componente <x-jet-nav-link>, y como vimos, este componente se encuentra en vendor/laravel/jetstream/resources/views/components/nav-link.blade.php:
    @props(['active'])
@php
$classes = ($active ?? false)
	? 'inline-flex items-center px-1 pt-1 border-b-2 border-indigo-400'
	: 'inline-flex items-center px-1 pt-1 border-b-2 border-transparent'
@endphp
<a {{ $attributes->merge(['class' => $classes]) }}>
	{{ $slot }}
</a>

          Lo primero que apreciamos es que se ha definido que debemos pasarle un atributo por el componente, ese atributo debe llevar el nombre active y puede ser true o false.

          Podemos agregar un link usando este componente:

    <x-jet-nav-link :active="false">
	Blog
</x-jet-nav-link>

          Para que el valor de active sea dinámico usamos:

          :active="request()->routeIs('blog')">

     

    • Los links para móviles están siendo impresos mediante el componente <x-jet-responsive-nav-link> que funciona igual que el anterior componente solo que varian los estilos que se van a asignar de acuerdo si están activos o no.

     

    📌 Modificando el logo del menú de navegación

     

          Vemos en el archivo navigation-dropdown.blade.php que la sección de logo está llamando al componente <x-jet-application-mark class="block h-9 w-auto" /> que es parte de los componentes de Jetstream.

     

    📌 No deberíamos modificar estas vistas de Jetstream porque si actualizamos la versión podrían pisarse los archivos y perder nuestros cambios; en su lugar debemos publicarlos:

    php artisan vendor:publish --tag-jetstream-views

          Así se copian todos los archivos a la carpeta resources/views/vendor/jetstream/components donde podremos modificar el archivo application-mark.blade.php con nuestro logo.