+ extends
- embed
+ include
- loops
Los layouts son estructuras generales de código HTML que nos ayudan a reutilizarlas en distintas páginas (pages) o módulos (modules).
Un layout puede tener una hoja de estilo asociado para optimizar la percepción de velocidad de carga o CRP (Critical Rendering Path). Esto nos permitirá tener estilos predeterminados ya configurados y que nos permita reducir la cantidad de archivos CRP, ya que los agrupamos dentro de un mismo layout.
Tendremos dos tipos de layouts que se podrán utilizar en situaciones específicas.
Son los layouts que utilizamos hasta ahora, para la creación de páginas. Siempre deberán existir dos layouts que serán la base de nuestras páginas del proyecto:
- base.html.twig Es el layout que contiene el HTML básico para generar el resto de layouts. Solo los layouts de páginas pueden — o deben — extender de este layout.
- default.html.twig Es nuestro layout base para todas lás páginas. Este incluirá los componentes y secciones necesarias para la mayoría de páginas de nuestro proyecto.
A partir de aquí, se podrán generar otros layouts para páginas que requieran una estructura diferente. Por ejemplo, podríamos tener layouts para páginas con sidebar, páginas estáticas con una cabecera o footer distinto, etc.
Al extender de estos nuevos tipos de layouts recomendamos hacerlo de la siguiente manera:
{% extends ['layouts/statics.html.twig', 'layouts/default.html.twig'] %}De esta manera, tendremos un fallback en caso de que se elimine uno de estos layouts sin contemplar el uso que se le esté dando.
También podrán existir layouts de secciones. Estos nos permitirán reutilizar secciones de código HTML que se repitan en el proyecto. Estos layouts, a diferencia de los de páginas, no deberán extender de otro layout, solo contendrán código HTML con bloques definidos para su utilización. Por ejemplo, podríamos reutilizar una sección con un bloque lateral (30%) y otro de contenido (70%) que se comporta de una manera definida en distintos dispositivos. En vez de repetir el mismo código, podemos crear un layout section-aside.html.twig.
Dentro de una página podríamos utilizarlos gracias al tag de Twig {% embed %} que nos permitiría reutilizarlo dentro de un layout de página sin tener que crear archivos por cada sección que necesitemos incluir.
También se pueden utilizar dentro de los modules quienes podrán extender estos layouts para aprovechar la estructura definida.