Definición de plantillas Twig en Drupal 8

En Drupal 8 el marcado HTML con el cual trabajamos está definido en plantillas, prácticamente todo el sitio consta de ellas, las cuales están categorizadas para diferentes secciones o elementos manteniendo un estándar y usando sintaxis Twig y así conseguir el uso dinámico entre diferentes situaciones.

Mediante el uso de plantillas definimos la estructura HTML, con eso contemplamos cada marcado del sitio como es el de las páginas, las regiones, los bloques, nodos, campos, formularios y muchos más.

Inicialmente Drupal consume las plantillas HTML desde su núcleo, ahí está el contenido HTML con el que se ha creado cada funcionalidad, pero con el uso de temas tenemos la flexibilidad de cambiar eso, por ejemplo:

Si estamos en una instalación Drupal que usa el tema Bartik, cada elemento HTML que tenga el sitio será consumido desde los archivos de las plantillas de ese tema, estos tienen una jerarquía mayor a los nativos ubicados en el núcleo y ocupan su lugar solamente con tener el mismo nombre, es decir el archivo page.html.twig inicial se encuentra ubicado en la siguiente ruta: drupal/core/modules/system/templates/page.html.twig pero como tenemos activo el tema Bartik este contiene un archivo de plantilla con ese mismo nombre por lo tanto ocupa el lugar del otro al momento del renderizado, el archivo no es “reemplazado” literalmente simplemente es dejado de lado al hacer el llamado para usarse el del tema activo /drupal/core/themes/bartik/templates/page.html.twig por eso es importante limpiar caché cuando se registra uno nuevo.

Está práctica se mantiene siempre, si un tema tiene como base otro (classy por ejemplo) debemos ejecutar la misma acción de usar una plantilla con el mismo nombre en el tema activo para que sea ese el que manipule el marcado que deseamos.

En Drupal 8 tenemos una técnica más con el asunto de el uso de plantillas, es importante para la manipulación de estos archivos conocer y usar el twig debug porque esto nos da la facilidad de identificar qué plantillas necesitamos para manipular una parte exacta de nuestra página:

Drupal nos proporciona el siguiente orden de especificidad, para nombrar una plantilla:

• page--node--edit.html.twig (El marcado aquí afectará a la página que corresponda a la edición del nodo 1)
• page--node--1.html.twig (El marcado aquí afectará a la página que corresponda al nodo 1)
• page--node.html.twig (El marcado aquí afectará a las páginas que sea nodos)
• page.html.twig (El marcado aquí afectará a absolutamente todas las páginas)

En la primera imagen podemos notar que la plantilla que usamos es la que está ubicada en nuestro tema “theme_name” con el nombre page.html.twig

Sin embargo queremos modificar la plantilla solo para las páginas de los nodos, entonces tenemos que crear un archivo llamado page--node.html.twig en dentro de nuestro tema, (NO RENOMBRAR el page.html.twig CREAR uno nuevo) luego debemos limpiar caché para que sea tomado en cuenta. Una vez ejecutado el proceso podremos notar el siguiente resultado en nuestro inspector.

En las últimas imágenes habrán notado en los nombres sugeridos de plantilla la opción de “page--node--type--event.html.twig”, para agregar esa opción pueden revisar el siguiente artículo Plantillas basadas en tipos de contenidos.