Bien, veamos en qué consiste Layouts. En
este capítulo, crearemos y utilizaremos, paso a paso, un "diseño",
aprendiendo cómo funciona exactamente la magia de los Diseños.
Para ver la sección de administración de Layouts, dirígete a /nglayouts/admin y encontrarás...
¡un formulario de acceso!
El formulario de acceso no tiene nada que ver con los Diseños...
es sólo que el área de administración de los Diseños requiere que te identifiques...
y ya he añadido un formulario de inicio de sesión a nuestro sitio.
¡Incluso hay un usuario en la base de datos!
Inicia sesión con doggo@barkbite.com, contraseña woof.
Y cuando lo enviamos...
¡acceso denegado!
No te preocupes: haz clic abajo en el icono de seguridad de la barra de herramientas de depuración web...
y ve a "Decisión de acceso".
Sí: se nos denegó el acceso porque buscaba un rol llamado ROLE_NGLAYOUTS_ADMIN.
Para acceder al área de administración de diseños, necesitamos tener este rol.
La forma más sencilla de añadirlo es ir a config/packages/security.yaml.
El usuario con el que hemos iniciado sesión tiene ROLE_ADMIN.
Así que, bajo role_hierarchy dale también a nuestro usuario ROLE_NGLAYOUTS_ADMIN:
Y ahora si volvemos a hacer clic, ¡tachán!
¡Bienvenido a la sección de administración de layouts!
Para entender lo que hace Layouts...
lo mejor es verlo en acción.
Empieza en esta sección de Diseños...
y haz clic para crear un nuevo diseño.
Esto nos muestra unos seis tipos de diseño diferentes entre los que podemos elegir. Como
verás, son mucho menos importantes de lo que parecen al principio, porque,
una vez que estás en una maqueta, puedes hacer lo que quieras,
incluso hacer flotar cosas a izquierda y derecha.
Yo suelo elegir el "Diseño 2".
Llámalo "Diseño de página de inicio" porque pienso utilizarlo en nuestra página de inicio.
Y... ¡bienvenido al editor de diseño!
Visita rápida: estos elementos del lado izquierdo se llaman "bloques",
y hay muchos tipos diferentes, desde simples bloques de título a mapas de Google...
hasta cosas más complejas como listas y cuadrículas en las que puedes mostrar colecciones dinámicas
de cosas, como recetas destacadas.
Lo principal que "hacemos" en esta página es elegir un bloque de la izquierda...
y arrastrarlo a una de las "zonas" del centro.
Coge un bloque "Título" y arrástralo a algún lugar de la página...
y dale un texto.
¡Genial! Es un comienzo modesto, pero, ¡bastante bueno!
En la parte superior derecha, pulsa "Publicar diseño".
Y ahora que tenemos este nuevo diseño, abre una segunda pestaña
y ve a la página de inicio para descubrir que...
¡no ha cambiado absolutamente nada!
Permíteme que reorganice mis pestañas. En
cualquier caso, nada ha cambiado porque, una vez que tienes un diseño, necesitas asign arlo
a una página o conjunto de páginas específico.
Ese es el trabajo de la sección de mapeo del diseño.
Estas son realmente las dos únicas secciones importantes del área de administración.
Aquí, añade una nueva asignación y luego ve a Detalles.
Hay varias formas de asignar un diseño a una URL específica.
Puedes utilizar, por ejemplo, la información de ruta, que es un término elegante que significa
"la URL, pero sin parámetros de consulta".
O puedes utilizar un prefijo de información de ruta, como utilizar este diseño
para todas las URL que empiecen por "/productos".
O incluso puedes asignar un diseño a un nombre de ruta específico.
Vamos a intentarlo.
Pulsa "Añadir objetivo".
Entonces... vamos a buscar el nombre de ruta de nuestra página de inicio: src/Controller/MainController.php.
Aquí está: app_homepage: Vuelve atrás, pega y dale a "Guardar objetivo".
Más adelante hablaremos de otras formas de mapear o "activar" una ruta para las páginas.
Pero la información sobre rutas y caminos es la más sencilla y flexible.
Dicen Si la ruta o URL actual coincide con lo que tenemos aquí, utiliza este diseño.
Pulsa Guardar cambios.
Para elegir qué maquetación va con este mapeo, pulsa "Vincular maquetación"
y selecciona el único "Diseño de página de inicio".
¡Estupendo! Ahora, cuando vayamos a la página de inicio, se utilizará el diseño de la página de inicio.
Pero... ¿qué significa eso?
Vamos a averiguarlo
Actualiza y...
¡seguimos sin ver ninguna diferencia!
¡Es la misma página estática de Symfony!
Ah, eso es porque nos hemos saltado un paso importante de la instalación.
¡Culpa mía! Ve a abrir la plantilla de esta página: templates/main/homepage.html.twig.
Ahora mismo, estamos ampliando base.html.twig: Y esa plantilla, como de costumbre,
tiene un bloque llamado body en el medio: Así que es una configuración súper tradicional.
Ahora, cambia el extends por una variable dinámica llamada nglayouts.layoutTemplate:
Prueba de nuevo la página.
¡Error! ¡Eso es un progreso!
Dice Diseño de página base, no especificado.
Para representar la página con Layouts, especifica el diseño de página base con esta configuración.
Todo esto tendrá más sentido dentro de un minuto.
Lo que quiere que hagamos es abrir config/packages/ y crear un nuevo archivo
-que puede llamarse como quieras- pero llamémoslo netgen_layouts.yaml.
Dentro, añade netgen_layouts y, debajo, pagelayout ajustado a nuestro base.html.twig:
Explicaré todo esto en un minuto.
Si refrescamos ahora...
¡el mismo error!
Es posible que Symfony no haya visto mi nuevo archivo de configuración...
así que voy a borrar la caché para asegurarme: Y ahora...
¡sí! ¡Funciona!
Excepto que... ¡sigue siendo la misma página estática!
Pero, por primera vez, abajo, en la barra de herramientas de depuración web,
se muestra que se está utilizando el "Diseño de página de inicio".
Así que se ha dado cuenta de que el diseño debería utilizarse...
pero no parece que lo esté mostrando.
Para solucionarlo, tenemos que hacer una última cosa...
luego retrocederemos y explicaremos lo que está pasando y lo genial que es.
En base.html.twig, alrededor de {% block body %}, añade {% block layout %}...
y después de {% endblock %}: Actualiza una vez más.
Y... ¡guau!
¡Nuestra página ha desaparecido!
Vale, aún tenemos el nav y el footer...
que vienen de arriba y de abajo de los bloques de base.html.twig, ¡pero el contenido real
de nuestra página ha desaparecido y ha sido sustituido por el bloque de título dinámico!
¿Qué magia negra es ésta?
En primer lugar, antes de explicarlo, permíteme decir que hay formas mucho más rápidas de empezar
con Netgen Layouts: tienen proyectos de inicio
para aplicaciones Symfony normales, aplicaciones Sylius y aplicaciones Ibexa CMS.
Pero hemos hecho todo este trabajo de configuración manualmente a propósito...
porque realmente quiero que entiendas cómo funcionan los Layouts: es sorprendentemente sencillo.
En primer lugar, nuestra página sigue accediendo a nuestra ruta normal - app_homepage -
y sigue ejecutando nuestro controlador normal y sigue renderizando nuestra plantilla normal.
No hay nada mágico.
Pero entonces, ampliamos nglayouts.layoutTemplate.
¿A qué apunta eso?
Si no hay ningún diseño asignado a una página concreta,
nglayouts.layoutTemplate se resolverá en base.html.twig.
Eso es gracias a la configuración que añadimos aquí: Pero si Layouts encuentra una asignación de diseño
para esta página, entonces nglayouts.layoutTemplate resuelve a una plantilla Layouts del núcleo.
En este caso, si pulsas Shift+Shift, se llamará layout2.html.twig...
ya que hemos seleccionado "Diseño 2".
Esto renderiza el diseño dinámico a través de estas etiquetas nglayouts_render_zone: cada una de ellas se refiere
a una sección -o "zona"- diferente dentro de nuestro diseño.
En cualquier caso, lo realmente importante es
que convierte el diseño en un bloque Twig llamado layout.
Luego extiende ngLayouts.pageLayoutTemplate, que resuelve a nuestro base.html.twig. El
resultado final es que nuestra página se renderiza con total normalidad
y sigue extendiendo base.html.twig...
pero se ha añadido un bloque llamado layout que contiene el contenido del diseño dinámico.
Por eso al principio no vimos ningún cambio en la página.
Hasta que incluimos {% block layout %} en base.html.twig, el diseño se estaba cargando...
sólo que no lo estábamos mostrando en ningún sitio. La conclusión
es la siguiente: si estás en una página que no está maquetada,
todo sigue exactamente igual que siempre.
Pero si estás en una página que se asigna a un diseño,
significa simplemente que ahora tienes un bloque llamado layout cuyo contenido es
igual a lo que tengas dentro de ese diseño.
Así que, como he dicho antes, no tenemos que añadir maquetaciones a todas las páginas de nuestro sitio:
podríamos añadirlo a la página de inicio y ¡listo!
Pero cada página que queramos que admita maquetaciones tiene que ampliar nglayouts.layoutTemplate. Lo
bueno es que, aunque ampliemos esto,
no ocurrirá nada a menos que asignemos realmente un diseño a esta página.
Así que no hay inconveniente en utilizarla en todas partes.
Actualizaré rápidamente login.html.twig para utilizarlo: luego list.html.twig y show.html.twig:
¡Realmente puedo moverme rápido cuando lo necesito!
De vuelta en el navegador, las páginas de lista de recetas y de presentación de recetas siguen teniendo el mismo aspecto...
porque no se ha resuelto el diseño.
Pero ahora están listas para utilizar maquetaciones, si queremos.
Ahora, por muy interesante que sea controlar dinámicamente el contenido
de la página de inicio, ¡hemos hecho demasiado!
Todo nuestro contenido antiguo ha desaparecido. ¿Es
posible mezclar contenido dinámico con parte
del contenido estático de nuestra plantilla Twig de página de inicio?
Por supuesto que sí.
Y eso es gran parte de lo que hace especiales a las plantillas.
Eso a continuación