Localizar la plantilla de twig en Drupal

Twig

Si estamos desarrollando un tema para Drupal, lo normal es que necesitemos encontrar y localizar la plantilla que necesitemos para ajustar a la perfección todo el diseño de la web. Si no sabemos donde podemos localizar los archivos que necesitamos, puede ser una pesadilla encontrarlos, pero por suerte Drupal siempre nos provee una herramienta, en este caso es una herencia de Twig, a si que veamos como poder encontrar las plantillas.

Activar el debug de Twig

Primero de nada, tenemos que activar el modo debug de Twig, esto nos permitirá localizar fácilmente la plantilla que se esta utilizando. Para ello, debemos editar el archivo /sites/default/services.yml, en caso de que no lo tengamos, podemos copiar el archivo /sites/default/default.services.yml y cambiarle el nombre a services.yml.

Image
El archivo services.yml de Drupal

Ahora que tenemos el archivo, vamos a editarlo, entre todas las opciones que están disponibles, nos interesa la opción debug dentro del apartado de twig, debemos estableces el valor a "true", por defecto es "false".

Image
Configuracion debug en el services.yml

Ahora limpiamos la cache de Drupal para que cargue el archivo con la nueva configuración, y listo, estamos listos para localizar la plantilla.

Localizar la plantilla

Teniendo el modo debug de Twig activo, es hora de ir al navegador y mirar el código html que tenemos. En este ejemplo, vamos a mirarlo en el titulo de la pagina.

Image
Inspeccionando el elemento en el navegador

Al inspeccionar el código html de la web con el modo debug de Twig activo, veremos muchísimos comentarios, estos nos dan información sobre la plantilla que se utiliza, donde se ubica y sugerencias sobre cuales podemos usar.

Image
El html que buscamos en el codigo.

Como podemos ver, la plantilla del titulo de la web, esta ubicada en core/themes/bartick/templates/page-title.html.twig, de modo que si queremos modificar esa plantilla, la copiamos a nuestro tema y modificamos (nunca debemos modificar los archivos de los módulos comunitarios o el core de Drupal, ya que los cambios se perderán al actualizarlos).

También podemos ver sugerencias para nombres de plantilla para el bloque que contiene el titulo de la pagina. Podemos ver algunas como block.html.twig, block--core.html.twig, block--page-title-block.html.twig; la que contenga una X es la que se este utilizando en ese momento, en este caso block.html.twig.

Las sugerencias de plantillas, son útiles para poder separar el código html por ejemplo en tipos de contenido, ya que por defecto, disponemos de node.html.twig, pero podemos crear diferentes, node--article.html.twig; esta plantilla se utilizaría unicamente en los nodos de tipo "article".

Image
Sugerencias de plantillas de Twig en Drupal

No usarlo en producción

Debemos recordar borrar el archivo services.yml o restaurar los a los valores por defecto de twig, las opciones de debug no se deben utilizan en entornos de producción.

Comparte este artículo:
Publicado por Borja
Image

Me metí en la aventura de Drupal con la versión 6, y aquí estoy, 10 años después, escribiendo articulos y haciendo videos sobre Drupal, quien me lo iba a decir. Aunque he probado otros framworks y cms, me quedo con Drupal de lejos, pero Symfony y Django estan entre mis favoritos. Aficionado a la montaña, la bicicleta, y el comer, de eso que no falte.