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.
Tenga en cuenta que ya tenemos una carpeta de juegos en el directorio de vistas. Esto es nuestra actual index.blade.php
y show.blade.php
archivos. Ahora que tenemos una carpeta de diseños , podemos poner una plantilla maestra allí. Por convención, generalmente se nombra, master.blade.php
así 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.php
y show.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.php
archivo y cambiarlo de esto:
A esto:
Y con eso, tenemos un pequeño diseño decente.
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.php
archivo, 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.php
archivo 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.php
archivo, ahora estamos básicamente construyendo sobre lo que contiene master.blade.php
.
Sección
Finalmente, agregamos un fragmento a nuestro index.blade.php
archivo 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.php
archivo, 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.php
archivo 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.php
archivo de vista para que las cosas se vean bien cuando también profundicemos. Cambiaremos nuestro show.blade.php
archivo existente de esto:
A esto:
En el show.blade.php
archivo, 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!
Uso de parciales para limpiar archivos de diseño
Las cosas se ven bien, pero tal como están ahora, nuestro master.blade.php
archivo 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.php
archivo 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.
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 maestra. Aprendimos 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!
0 Comentarios