Post Top Ad

Your Ad Spot

viernes, 31 de julio de 2020

Crear una plantilla de diseños en Laravel

Crear una plantilla de diseños en Laravel

Es hora de hacer que las cosas se vean un poco más bonitas de lo que tenemos hasta ahora. Hasta ahora, simplemente hemos estado enviando datos al navegador web sin formato o CSS especial aplicado de ninguna manera. De hecho, esta es una buena manera de comenzar, ya que nos ha permitido mantenernos completamente enfocados en los conceptos centrales de Laravel. Pronto, sin embargo, su lado de diseñador web quiere contribuir al juego para que las cosas se vean mejor. Esto es lo que vamos a seguir en este tutorial al ver cómo podemos configurar un sistema de plantillas de diseños para que podamos compartir marcas y activos html comunes en múltiples vistas. Echemos un vistazo a esta idea ahora.


Agregar una carpeta de diseños a recursos / vistas

Para comenzar, crearemos una carpeta de diseños que residirá en el directorio de recursos / vistas . Aquí, podemos almacenar nuestro archivo de diseño maestro . También podemos almacenar archivos de vista parcial si lo deseamos. Los archivos de vista parcial serían cosas como un pie de página o un encabezado. Aquí vamos.
carpeta de plantillas de diseños en laravel

Tenga en cuenta que ya tenemos una carpeta de juegos en el directorio de vistas. Esto contiene nuestro actual index.blade.phpshow.blade.phparchivos. Ahora que tenemos una carpeta de diseños , podemos poner una plantilla maestra allí. Por convención, generalmente se llama master.blade.phpasí que creemos ese archivo ahora y completemos con un poco de Bootstrap repetitivo.


Extraer contenido repetido a un archivo de diseño

Ahora podemos ver los archivos de vista que ya tenemos en nuestro sistema. Tenemos index.blade.phpshow.blade.php, y tienen superposición, o marcado repetido. Realmente no hay necesidad de preocuparse por mostrar todo ese estándar para cada nuevo archivo de vista que necesitamos usar. Así que sigamos adelante y extraigamos ese marcado repetitivo. Primero, podemos tomar el index.blade.phparchivo y cambiarlo desde esto:

A esto:

Y con eso, tenemos un pequeño diseño decente.
plantilla de diseños laravel

Tenga en cuenta que hemos descargado e instalado algunos archivos en la carpeta pública. Hemos colocado bootstrap.min.css y sticky-footer.css en public / css , así como jquery-3.1.1.slim.min.js, tether.min.js y bootstrap.min.js en public / js . Este enfoque es la forma en que los hombres pobres ensamblan activos front-end, pero es lo suficientemente bueno para este tutorial.


Rendimiento, Extensiones, Sección


rendimiento

Tiene sentido hablar un poco sobre el rendimiento, las extensiones y las palabras clave de sección con respecto a Blade ahora. En nuestro master.blade.phparchivo, había una línea que decía @yield ('contenido') . Esto le dice a Laravel que para cualquier archivo que se extienda master.blade.php, busque una sección de marcado que se identifique como 'contenido' e inserte ese marcado aquí.


Se extiende

Lo siguiente que hicimos fue visitar nuestro index.blade.phparchivo y eliminar el repetitivo. En su lugar, escribimos algo como @extends ('layouts.master') . Esto le dice a Laravel que queremos hacer uso de toda la plantilla que ahora contiene master.blade.php, pero no queremos escribirlo manualmente aquí. Entonces, en el index.blade.phparchivo, ahora estamos esencialmente construyendo sobre lo que está contenido master.blade.php.


Sección

Finalmente, agregamos un fragmento a nuestro index.blade.phparchivo que comenzó con @section ('contenido') y luego se completó con @endsection . Esto define un área de marcado que se identifica con la palabra 'contenido'. Recuerde cómo en nuestro master.blade.phparchivo, tenemos una parte del marcado que usa la declaración de @yield ('contenido'). Bueno, ahora que tenemos una sección definida en nuestro index.blade.phparchivo que se identifica como 'contenido', Laravel sabe tomar ese marcado que existe entre @section ('contenido') y @endsection , e insertarlo justo donde el @yield ('contenido ') declaración es.


Archivo de diseño para vista de página única

Tenemos una página de aspecto decente que enumera todos nuestros juegos. Ahora también arreglemos el show.blade.phparchivo de vista para que las cosas se vean bien cuando profundicemos también. Cambiaremos nuestro show.blade.phparchivo existente de esto:

A esto:

En el show.blade.phparchivo, utilizamos tarjetas bootstrap 4 que son nuevas y se ven bastante bien. También hemos colocado una imagen para cada juego en la carpeta pública para un ejemplo rápido y sucio de cómo se ven las imágenes en las cartas de bootstrap 4. Simplemente usamos el título de cada juego como el nombre del archivo de imagen. De esta manera, podemos configurar el src para la imagen en / {{$ game-> title}}. Png y todo funciona cuando hacemos clic en cada juego. ¡Echale un vistazo!
tarjetas de arranque de laravel blade


Uso de parciales para limpiar archivos de diseño

Las cosas se ven bien, pero tal como están ahora, nuestro master.blade.phparchivo todavía está un poco hinchado ahora que le hemos agregado mucho. Podemos hacer uso de parciales para extraer grupos lógicos de marcado en sus propios archivos. Una vez que se extraen, simplemente usamos la directiva @include en el master.blade.phparchivo principal para hacer uso de ellos. Ahora crearemos un directorio parcial en la carpeta resources / views . También colocaremos tres archivos nuevos en ese directorio parcial para mantener el marcado de nuestra sección de encabezado, nuestra barra de navegación y nuestra sección de pie de página.
parciales y diseños de laravel


recursos / vistas / parciales / headcontent.blade.php


recursos / vistas / parciales / navbar.blade.php


recursos / vistas / parciales / footercontent.blade.php


Nuevo diseño maestro

Con todos nuestros parciales ahora definidos, podemos simplificar nuestro archivo master.blade.php a algo tan simple como esto, y todo sigue funcionando muy bien.


Crear una plantilla de diseños en el resumen de Laravel

En este tutorial, vimos cómo estructurar el diseño de una aplicación web simple utilizando una plantilla maestra Aprendimos cómo Blade utiliza varias palabras clave como rendimiento, inclusión, sección y sección final para que este proceso funcione. Una vez que tengamos una buena plantilla maestra, podemos crear nuevos archivos de vista con un código mínimo simplemente usando la palabra clave extendidos para crear una nueva vista sobre los hombros de nuestra plantilla maestra. En ese archivo de vista que extiende el maestro, podemos hacer uso de la palabra clave de rendimiento para indicar dónde queremos insertar el contenido en el diseño maestro. También vimos cómo usar parciales e incluir declaraciones para hacer que la estructura general sea mucho más compartimentada y más fácil de razonar. ¡Vamos aquí para diseños maestros!

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas