Twig: Cómo usar el motor de plantillas de Drupal 8 y Symfony2
Tras el reciente lanzamiento de Drupal 8, todos los desarrolladores deben conocer la nueva arquitectura que presenta tras su integración con Symfony2. En un post anterior ya hablamos de YAML, una de las principales novedades que nos íbamos a encontrar en Drupal 8.
Pero no es la única novedad que debemos conocer, existen una gran cantidad de componentes y funcionalidades nuevas que se incorporan a esta nueva versión. Una de las que más va a afectar a los desarrolladores de Drupal 8 es Twig, el nuevo motor de plantillas. Hasta ahora, las versiones anteriores de Drupal hacían uso del motor PHPTemplate, pero aunque esto ha cambiado, el objetivo final es el mismo, ofrecer la posibilidad de sobrescribir cualquier plantilla de Drupal 8 y personalizar su visualización.
Twig tiene muchos beneficios, como su velocidad, ya que compila el código de las plantillas a código PHP optimizado. También ganaremos en seguridad, debido a que Twig evalúa el código no confiable. Además, se va a mejorar la flexibilidad a la hora de crear las plantillas debido a la posibilidad que ofrece de implementar filtros y etiquetas personalizadas. Y por último, hay que reseñar que las plantillas generadas son muy fáciles de leer y entender, tanto por los desarrolladores, como por los diseñadores web.
Y no nos podemos olvidar de la comunidad que hay detrás de Twig. Lleva varios años siendo el principal motor de plantillas que se usa en Symfony2, lo que trae consigo una importante cantidad de desarrolladores que se han enfrentado a la mayoría de problemas y dudas que nos puedan surgir con su uso.
¿Cuál es su sintaxis?
Entrando un poco en la sintaxis de Twig, lo primero que debemos conocer es que trabaja principalmente con tres etiquetas distintas:
-
{{ … }} Sirve para mostrar el contenido de una variable o el resultado de una operación, de manera similar a la función echo o print de PHP.
-
{% … %} Esta etiqueta sirve para incluir la lógica de la plantilla. En su interior se pueden definir instrucciones de tipo if, for… Por lo que no perdemos ninguna de estas funcionalidades que ofrecían las plantillas PHP.
-
{# … #} Esta última etiqueta sirve para incluir comentarios. Todo lo que se incluya dentro de ella no se verá reflejado en el resultado final, por lo que es muy recomendable su uso para mejorar la legibilidad y mantenibilidad de las plantillas.
El siguiente aspecto importante de Twig que tenemos que conocer son los filtros, los cuales son funciones predefinidas que dotan de potencia a las plantillas. Por ejemplo {{ text|lower }} escribiría el contenido de la variable text en minúsculas.
Y no sólo podemos utilizar los filtros, Twig también nos permite utilizar una serie de funciones predefinidas que aumentan las posibilidades a la hora de crear una plantilla. Además, Twig nos permite crear y definir nuestras propias funciones, de manera que si tenemos una necesidad que no se resuelve con alguna de las muchas funciones predefinidas, podemos desarrollar una solución a nuestra medida y usarla cuantas veces necesitemos.
Algunos filtros y funciones útiles
Son muchos los filtros y funciones que tenemos a nuestra disposición. Sería imposible nombrarlos todos, pero algunos de los filtros más útiles usuales son:
-
abs Devuelve el valor absoluto de un número dado.
-
Ejemplo: {{ (-4)|abs }} mostraría siempre 4.
-
-
round Nos permite redondear números. Podemos usar diferentes opciones como common, floor o ceil para escoger el tipo de redondeo que necesitemos.
-
Ejemplo: {{ 13.89|round(1, ‘floor’) }} nos devolvería 13.8 ya que redondeamos por debajo con precisión de un decimal.
-
-
first - last Nos devuelven el primer elemento o el último de una lista, map o cadena.
-
Ejemplo: {{ abcd|first }} devuelve el carácter ‘a’.
-
-
slice Nos permite extraer una secuencia de caracteres indicados.
-
Ejemplo: {{ 12345|slice(2, 4) }} devolvería los valores 345 (los que se encuentran entre la posición 2 y 4).
-
-
upper - lower Convierte una cadena a mayúsculas o minúsculas.
-
Ejemplo: {{ ‘cadena’|upper }} mostraría CADENA.
-
Además de filtros, también hemos visto que existen funciones, algunas de las más útiles son:
-
date() Nos permite trabajar con fechas. Con la llamada a esta función sin argumentos obtendremos la fecha actual. Si le pasamos como argumento una fecha de php la transformaría a un formato con el que podemos trabajar y comparar fechas.
-
Ejemplo: {% if date(user.dateCreation) < date() %}.
-
-
dump() Es una función muy útil a la hora de depurar, ya que nos permite conocer el contenido de una variable o un objeto.
-
Ejemplo: {{ dump(user) }}
-
-
max() - min() Son funciones que reciben una lista de elementos y nos devuelven el máximo o el mínimo. No trabajan únicamente sobre listas numéricas, sino que puede hacerlo sobre maps.
-
Ejemplo {{ max({2: “red”, 1: “white”, 3: “yellow” }) }}
-
-
random() Esta función devuelve de manera aleatoria un elemento de una lista que le pasemos, o si le pasamos como argumento un número, nos devuelve otro número entre 0 y el elemento dado. También funciona recibiendo una cadena como parámetro y devolviendo un carácter de dicha cadena.
-
Ejemplo: {{ random([‘apple’, ‘orange’, ‘strawberry’]) }}
-
Herencia de plantillas
Al igual que con las clases, en Twig podemos utilizar la herencia entre plantillas. Esto es algo que nos abre muchísimas posibilidades. La mayoría de las webs comparten ciertos aspectos que se repiten en todas sus páginas, como pueden ser las cabeceras, pie de página u otros elementos recurrentes.
Para no repetir el código una y otra vez, una buena práctica es crear una plantilla base, y usar una característica de Twig que nos permite declarar bloques y posteriormente rellenarlos en las plantillas que extienden de esta base.
Por ejemplo, en una plantilla base podemos declarar un bloque para el título, que iremos sobreescribiendo en cada una de las páginas de nuestra web:
<title>
{% block title %}
{% endblock %}
</title>
Posteriormente, en cada plantilla hija rellenaremos el contenido de este bloque, y de todos los que hayamos definido en la primera, símplemente indicando al principio el nombre de la plantilla que estamos extendiendo:
{% extends ‘base.html.twig’ %}
{% block title %}
Página de prueba
{% endblock %}
Además de la herencia, Twig permite incluir plantillas directamente dentro de otras, esto lo podemos hacer de la siguiente manera:
{% include ‘ejemplo.html.twig’ %}
Y no sólo eso, sino que podemos incluso pasar parámetros a esta plantilla que incluimos:
{% include ‘ejemplo.html.twig’ with {‘key’: ‘value’} %}
Y hasta aquí hemos visto qué es Twig, sus ventajas y las posibilidades que nos ofrece, pero esto tan sólo es un vistazo general de la verdadera potencia que tenemos con este motor de plantillas. En la documentación oficial se puede profundizar mucho más, conocer todos los filtros, funciones, directivas, etc, con muchos ejemplos y consejos prácticos.
