Es hora de hacer que las cosas se vean un poco más bonitas de lo que lo hemos hecho hasta ahora. Hasta ahora, simplemente hemos estado enviando datos al navegador web sin formato ni 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 del diseñador web querrá contribuir al juego para que las cosas se vean mejor. Esto es lo que buscaremos 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 es nuestra 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 nombra, master.blade.phpasí que creemos ese archivo ahora y lo rellenemos con un texto estándar de Bootstrap.


Extraer contenido repetido a un archivo de diseño

Ahora podemos mirar los archivos de vista que ya tenemos en nuestro sistema. Tenemos index.blade.phpshow.blade.php, y tienen marcas superpuestas o repetidas. Realmente no hay necesidad de preocuparse por renderizar todo ese texto estándar para cada nuevo archivo de vista que necesitamos utilizar. Así que sigamos y extraigamos ese marcado repetido. Primero, podemos tomar el index.blade.phparchivo y cambiarlo de esto:

A esto:

Y con eso, tenemos un pequeño diseño decente.
plantilla de diseños de 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 una especie de forma de los pobres para ensamblar activos de interfaz, pero es lo suficientemente bueno para este tutorial.


Rendimiento, se extiende, 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 texto estándar. En su lugar, escribimos algo como @extends ('layouts.master') . Esto le dice a Laravel que queremos hacer uso de todo el texto estándar ahora contenido master.blade.php, pero no queremos escribirlo manualmente aquí. Entonces, en el index.blade.phparchivo, ahora estamos básicamente construyendo sobre lo que contiene master.blade.php.


Sección

Finalmente, agregamos un fragmento a nuestro index.blade.phparchivo que comenzaba con @section ('contenido') y luego se completaba 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 ('content') y @endsection , e insertarlo justo donde el @yield ('content ') declaración es.


Archivo de diseño para vista de una sola página

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 también profundicemos. Cambiaremos nuestro show.blade.phparchivo existente de esto:

A esto:

En el show.blade.phparchivo, usamos 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 tarjetas bootstrap 4. Simplemente usamos el título de cada juego como el nombre del archivo de imagen. De esta manera, podemos establecer el src de la imagen en / {{$ juego-> título}}. Png y todo funciona cuando hacemos clic en cada juego. ¡Echale un vistazo!
tarjetas de arranque de hoja laravel


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 tanto. Podemos hacer uso de parciales para extraer grupos lógicos de marcado en sus propios archivos. Una vez extraídos, simplemente usamos la directiva @include en el master.blade.phparchivo principal para hacer uso de ellos. Ahora crearemos un directorio de parciales en la carpeta resources / views . También colocaremos tres archivos nuevos en ese directorio de parciales para contener el marcado de nuestra sección principal, 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.


Creación de una plantilla de diseños en resumen de Laravel

En este tutorial, vimos cómo estructurar el diseño de una aplicación web simple usando una plantilla maestraAprendimos cómo Blade hace uso de varias palabras clave como rendimiento, inclusión, sección y sección final para que este proceso funcione. Una vez que tenemos una buena plantilla maestra, podemos crear nuevos archivos de vista con un código mínimo simplemente usando la palabra clave extiende para construir 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 yield para indicar dónde queremos que se inserte el contenido en el diseño maestro. También vimos cómo hacer uso de parciales e incluir declaraciones para hacer que la estructura general esté mucho más compartimentada y sea más fácil de razonar. ¡Vamos aquí para diseños maestros!