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

5 comentarios

Inicia sesión para comentar

Iniciar sesión

Comentarios:

  • It Vmc

    It Vmc hace 1 año

    una pregunta, ¿Ya no se usan las directivas blade yield, extends y section para hacer plantillas, osea ahora solo se usa componentes?

    • Victor Arana Flores hace 1 año

      Existe ambas, y puedes usar la que gustes.

  • Sergio ┏(-_-)┛┗(-_- )┓┗(-_-)┛

    Sergio ┏(-_-)┛┗(-_- )┓┗(-_-)┛ hace 1 año

    Saludos Victor

    En el video de "Como modificar la plantilla Jetstream"  donde recomiendas que para modificar el logo lo más conveniente es publicar los componentes ejecutando en la terminal:

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

    En la documentación ofician de laravel 10, al parecer ya no es requerido la linea anterior, solo mencionan que se deben de personalizar los siguientes componentes de blade:

    Y por consiguiente los componentes ya no vienen separados en un directorio vendor, sino que vienen en el mismo directorio en el que almacenamos y creamos nuestros propios componentes: resources/views/componets

    Entonces para la personalización del logo ya se hace directamente en estos archivos, es lo que noto de diferencia y es lo que entiendo, saludos a todos.

  • Eduardo Martínez

    Eduardo Martínez hace 1 año

    Buenas!

    Comenté en el vídeo anterior que ahora los componentes de jetstream vienen ya publicados en resources/views/components. Después de ver el comando que tomaste de la documentación de Laravel Jetstream he visto que ya no lo mencionan. De hecho han cambiado más cosas en la documentación.

    Lo que saco en conclusión es que con los últimos cambios de Laravel Jetstream, ya no se diferencian al llamarlos los componentes de Jetstream (ya no es hace uso de <x-jet-foo> sino que se escribe como con cualquier otro componente con <x-foo>) y parece que tampoco es necesario ejecutar ese comando para publicarlos y preservar sus modificaciones.

    Advierto que nada más son conjeturas en base a lo que estoy observando. Los componentes ya no van separados en un directorio vendor, sino que vendrán en el mismo directorio en el que almacenamos  nuestros propios componentes.

  • Marcos Forastiere

    Marcos Forastiere hace 2 años

    Por q dice curso Laravel 10 si hace varios videos que estamos con Laravel 8??????

    • Victor Arana Flores hace 2 años

      Porque el curso esta actualizado a la version 10. No voy a grabar un nuevo curso cada vez que sale una nueva versión cuando los cambios entre versión son minimos.

  • Walter

    Walter hace 2 años

    ? 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.