30 - Como personalizar la plantilla de Jetstream - Curso Laravel 10 desde cero
HTML-код
- Опубликовано: 15 окт 2020
- 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.
------------------------------------------------------------------------------------------------
CURSOS
🔴 Facturacion electronica Perú: youtube.codersfree.com/larave...
🟠 Laravel avanzado: youtube.codersfree.com/larave...
🟢 Ecommerce: youtube.codersfree.com/ecommerce
🔵 Api: youtube.codersfree.com/api-re...
🟠 Plataforma de cursos: youtube.codersfree.com/plataf...
🔴 Vue e Ineria: youtube.codersfree.com/vue-3-...
🟣 Eloquent Avanzado: youtube.codersfree.com/eloque...
🟡 Pasarela de pagos: youtube.codersfree.com/pasare...
⚫ Laravel Web Socket: youtube.codersfree.com/larave...
🟣 Notificaciones: youtube.codersfree.com/notifi...
🟢 Laravel Excel: youtube.codersfree.com/larave...
🔵 Digital Ocean: youtube.codersfree.com/despli...
🟡 Laravel Voyager: youtube.codersfree.com/larave...
🟣 Datatable Livewire: youtube.codersfree.com/datata...
🟠 Tenancy for Laravel: youtube.codersfree.com/multi-...
🔵 TDD Laravel: youtube.codersfree.com/tdd-la...
⚫ Traducir páginas: youtube.codersfree.com/traduc...
🟠 Wire UI: youtube.codersfree.com/livewi...
🔴 Acortador de links: youtube.codersfree.com/acorta...
🟡 Banhammer for laravel: youtube.codersfree.com/banham...
🟢 Laravel backup: youtube.codersfree.com/larave...
🔵 Actualizar a Laravel 10: youtube.codersfree.com/actual...
-----------------------------------------------------------------------
DONACIONES
Patreon: / codersfree
PayPal: www.paypal.com/paypalme/Coder...
-----------------------------------------------------------------------
Plataforma: codersfree.com/
Grupo: / 4314830498588670 Наука
Que bueno eres, me dejas loco, curso de Livewire con Alpine próximamente, lo espero con ansia. gracias, gracias y gracias....
Lo explicas tan fácil que hasta yo me entero de cómo funcionan los componentes.
Saludos desde Málaga - Andalucía - España
8:20 Modificar el título del Dashboard
10:29 Agregar Links al menú de navegación
15:50 Los elementos del menú están separados. Uno es para el responsive
16:58 Modificar el logo "x-jet-application-mark"
18:37 php artisan vendor:publish --tag=jetstream-views
Agradecido por la dedicación que le das a cada detalle en tus videos, Justamente realicé una consulta en la comunidad de facebook, referente al middleware con la ruta base y sobre los componentes públicos ya modificados para producción, una vez mas, Gracias por tener Vocación! Compartiré tus cursos en mis redes!
Como siempre magistral profe. Un abrazo grande.
Gracias Profe!! uff viene arduo trabajo, pero sin duda es vital. Voy a ir estudiando esa libreria javascript Alpine, no la conozco pero quiero saber de ella antes del próximo video! Gracias por mostrarnos lo mejor!!
Gracias.. Esperamos los proximos videos.. fulll
Muy bien estan excelentes los videos Saludos!!! \m/
Excelente, muy bien explicado!
Excelente muito bom, didático e de fácil assimilação.
excelente explicacion, muchas gracias
Buenísimo!! Gracias
Son muy buenos tus videos!
Gracias Susana 😊
Eres un crack bro
Excelente todos tus cursos, te lo agradezco enormemente. Podrías hacer un tuto para integrar las rutas de autenticación jetstream con las rutas web que uno pueda tener en un proyecto anterior? Traté de coger un proyecto viejo y cuando sigo el tutorial tuyo sobre rutas y si descomento la linea de las rutas del appserviceprovider me funcionan las web antiguas pero no las de jetstream
Buenaa gracias, jaja me fue de ayuda tu video el comando me sirvió, pero despues para cambiar el logo, no toque esos archivos con los svg, lo mejor es por ejemplo para cambiar el logo, ir a la vista y donde diga o algo asi colocar , saludos!!
Estimado Victor, una consulta: en mi vista app.blade.php usa mix() en vez de assets() y para llamar alpine usa {{ mix('js/app.js') }} y dentro de app.js hay un requiere alpine y un requiere bostrap. Es una versión diferente. Gracias
Hola tengo una duda, existe alguna diferencia en rendimiento al extender de una plantilla usando extends y no mediante componentes? o porque ahora se extiende de esa manera por componentes como queriendo reemplazar al extends. lo mismo con lo del yield y sections ahora son slots. No entiendo muy bien esa deferencia y el porque. Muchas gracias por el contenido.
hola, veo que en la última versión usa el método mix() en vez de asset(), ¿hay alguna diferencia o es solo cuestión de versiones? Gracias
Buenas tardes, mira un apregunta y duda, en lo que veo en tu proyecto tu importas todo a traves x-jet-nombre pero en mi proyecto creado en 10 con jestream livewire en ningun lado los componebtes los importa a treaves de x-nombrecomponente
Mi Layout en lugar de traer los recursos de CSS y JS con la función asset(), los esta trayendo con la función mix(). Que significa esta??
Un amigo canadiense me comentaba hace poco que: Cuando le tocó aprender Anular II, "debió desaprender todo lo que sabía acerca de Angular I", ya que todo era totalmente diferente. Laravel 8 apenas lo estoy conociendo y es tan o más interesante que sus hermanitos menores. He estado procrastinando para atacar el tema de los componentes blade, pero estoy viendo que no hay más opciones... Saludos a nuestros amigos programadores.
Que paginas me recomiendas para sacar plantillas de jetstream
Hola tengo una duda. si yo deseo modificar el campo de email en el registro para hacer es la creacion de usuario, es decir, usuario1, usuario 2, admin21, en fin, no quiero que sea con correo electronico donde puedo modificar esas lienas.
Amigo en dashboard.blade.php llama al componente . donde esta ese componente, no lo encuentro. es lo mismo que del welcome.blade la parte de abajo. lo elimino pero sigue apareciendo y no se cual es el archivo donde esta el component
Cuando abro la aplicación web por Xampp las opciones de usuario en el dashboard no me aparecen. En cambio cuando abro la aplicación con el server de Laravel (php artisan serve) si funciona todo correctamente. ¿Alguién puede decirme por qué?
Hola Victor, preguntas: ¿estoy en lo cierto cuando digo que hay que usar jetstream para los usuarios del sitio web y admin lte ó por ej spatie/laravelpermission aparte para la parte de administración? o ¿crees que se deberia usar Jetstream para ambos? gracias!
Animo a la gente a que se haga tu mecenas aunque eso suponga que cada vez tengas más usuarios y el trato contigo ya no sea tan directo :(, aunque realmente te lo mereces amigo. Gracias por tus cursos. Saludos desde Madrid - España ;)
Hola tanto jetstream y adminlte son plantillas. Si gustas podrias usar también jetstream en la parte administrativa.
Laravel Permission es para asignar permisos administrativos a tu web. Por ejemplo que cierta sección de la web sólo lo pueda ver ciertas personas y no todos
Holaaa, cuando entro en el login no me cargan los estilos de tailwild, lo acabe de instalar todo como tú lo dijiste y aparece como si no tuviera los estilos agregados... Aparece el icono azul grande y el formulario abajo a la izquierda sin estilos... Por favor que alguien me ayude, es urgente
Hola, me da este error "Unable to find component: [navigation-menu]" @livewire('navigation-menu') que reemplaza a @livewire('navigation-dropdown') y el archivo navigation-menu.blade.php existe
Por ejemplo si ya inicie sesion y quiero retornar al login, no deberia permitirmelo como configuro eso
exelente curso amigo, grande, lo engorroso de laravel es el monton de archivos y ficheros que trae, cuando se empieza es un poco abrumador, pero es de costumbre
no puedo hacer funcionar los estilos de tailwind no me funcionan ni los background ni los margenes alguien sabe que puede estar pasando?
como se personaliza el logo?
Entonces por cada elemento del menú superior debo de añadirlo siempre una vez en el archivo de escritorio y luego en el archivo de responsive?
Así es. Aunque también podríamos poner los elementos del menú en un array, y luego utilizarlo en un foreach, para imprimirlo tanto en el menú de deskopt como en el menú de móvil, y de esa manera si queramos agregar un nuevo link, solo lo agregamos en el array y se vería reflejado en ambos menús.
En próximos videos enseñaré cómo hacerlo
Victor gracias por el aporte!!, tengo un inconveniente no me cargan los estilos de tailwild, ejecute npm install y npm run dev. pero al ejecutar php artisan serve, si me cargan los estilos. como solucionaria los estilos, para no estar ejecutando ese comando?. muchas gracias de antemano
Hola bro, estuve dos días con ese problema hasta que el mismo chico de los videos contesto a alguien que en el archivo tailwind.conf.js hay que comentar la linea mode: 'jit' volver a correr npm rud dev y asunto resuelto :D
Hola!! Tengo una pregunta. hay alguna forma para que el menu de información de perfil se muestre en español? Tengo mi aplicación configurada con locales 'es', pero aún así lo muestra en inglés. Gracias por la ayuda que seguro encontraré en uds!!
ruclips.net/video/gL5oO63sT5I/видео.html
Lo de jet ya esta descatualizado amigo, ya jetstream crea la carpeta componentes en resources con todos los archivos ahí. Excelente video igualmente
Hola Saludos, espero se encuentren todos bien.
¿Hay alguna manera de cambiar el inicio de sesión de mail/password a username/password?
Hola Pablo, si hay forma. Te recomiendo que leas la documentación en la sección de autenticacion
puede ser que hayan cambiado cosas desde que hiciste este video? .. al instalarlo en vez de assets() pone mix() , no tengo la librería de alpine y los estilos de tailwind no funcionan por ejemplo los colores .. ¿ me ha fallado algo en la instalación o hay cosas nuevas?
Efectivamente, han cambiado algunas cosas. Ahira usan mix, en vez de asset, y Alpine ahora lo compilan en el archivo js.
Pero los paso siguen siendo los mismos, tienes que instalar npm y ejecutar npm run dev y tendrás cargado tailwind y Alpine en tu proyecto
En la última versión de tailwind eliminaron algunos colores como por ejemplo los tonos de naranja, por eso no se muestran
@@robertsosa3415 gracias por la aclaración ! .. como han pasado unos días no te lo puedo indicar con seguridad, pero diría que probé con otros colores, .. probaré de nuevo.
@@vaidenait Yo revisé en la documentación de tailwind y ahí fue que me di cuenta que eliminaron los tonos naranjas, allí puedes comprobar cuales colores están y cuales ya no
¿Es indistinto utilizar un componente blade o uno de livewire?, ¿cuando utilizar uno u otro?, gracias.
Un componente Livewiere se utiliza cuando quieres que una sección de tu página se actualoce dinámicamente con información de tu base de datos sin recargar la pagina. Por ejemplo para hacer un buscador, un crud en el que al agregar o eliminar un nuevo registro se actualice la tabla sin necesidad de recargar la pagina, etc.
Un componente de blade en cambio se utiliza para reutilizar código html, sin tener que estar copiando y pegando toda la estructura
@@CodersFree y mi pregunta es: ¿y como se hace si uno quiere reutilizar un componente livewire ?
? Pues lo llamas cuantas veces quieras utilizarlo
es un poco complicado entender la combinación de alpine liverwire blade y componentes :(, uno viene del mundo bootstrap donde era mas lindo o react
Soy el unico que se desespera cuando esta siguiendo los pasos y se detiene a decir "esto no lo veremos a fondo, pero hare un curso con respecto al tema" mejor explicalo todo igual lo entendemos xd
Disculpa mi desconocimiento.para ver un componente, debo generar una vista que a su vez debe tener una ruta, que a su vez llama al controlador así como dices en el video 4 debe pasar una ruta controlador el controlador llamaría la vista y la vista llamaría a los componentes, exactamente igual pero en vez de llamar directamente a la vista para este caso llamaría a (app/view/miComponente) o (app/liveware/miComponente) y este se encargaría de llamar la vistas. y gracias por responder o ayudarme
No te entendí 😅
Te sugiero que veas los dos videos anteriores, ahí me explayó sobre el uso y creación de los componentes.
@@CodersFree si me imagine porque nadie sabe. si vi todo los videos. pero tu usas la misma welcome no generas ninguna make:livewire solo crear un componente y lo llamas, desde la plantilla ya creada; pero desde la ruta no.! (spa) vueroute carga todo las vistas en una sola. eso es lo que me refiero.
Creo que estás confundiendo los componentes de blade con los componentes de Livewiere.
Los componentes de Livewiere aún no lo he tocado. Lo explicare en un curso aparte que iniciaré la próxima semana sobre livewiere