Blog

TWIG desde 0

11/01/2016

Mi intención con este post, es que se aprenda lo básico sobre TWIG, características, funciones, filtros, etc… Espero que os sirva de ayuda.

 

¿Qué es TWIG?

Es un motor y lenguaje de plantillas usado en symfony 2. Ahora con la llegada de Drupal 8, se ha adaptado y ofrece múltiples ventajas a los desarrolladores Drupal.

 

Características TWIG

– Sistema encapsulado de trabajo.

 

– Flexible y rápido.

 

– Herencia de plantillas y extensiones.

 

– Adios PHP en plantillas.

 

– Amigable, tanto para el diseñador como para el desarrollador.

 

– Queda bien definida la separación entre lógica funcional y capa de presentación.

 

– Seguro.

 

 

¿Cómo funciona TWIG?

Ahora vamos a ver (en general), como funciona TWIG por dentro.

 

Se resume en 4 pasos:

– Cargar la plantilla: Si la plantilla está cargada, se va al último paso “Evaluación de la plantilla”, sino:

 

  •      Analizador léxico: reduce la plantilla (código fuente) a pequeñas piezas(secuencia de símbolos) para poder compilarlas fácilmente.
  •      Analizador sintáctico: convierte esa secuencia de símbolos en “el árbol de sintáxis abstracta”.
  • El compilador → coge ese árbol de nodos y lo transforma a código PHP. 
  • Evaluación de plantilla → llama al método display() de la plantilla compilada adjuntando el contexto. 

 

Nomenclatura TWIG

Para leer TWIG, solamente hacen falta unas pequeñas «pautas» básicas sobre su sintaxis, las vamos a ver ahora.

 

Sintaxis básica: 

  •   {{ informacion }} → Mostramos información. 
  •   {# comentarios #} → Comentarios en la plantilla. 
  •   {% Código %} → Ejecutar lógica.

 

Variables

Para crear variables utilizamos la función «set» de la siguiente forma: 

 

  • {%set nombre = ‘Pepito’ %} → Mi nombre el {{ nombre }}

Aquí definidos la variable «nombre» y le asignamos el valor «Pepito». Luego para acceder a él, basta con poner el nombre de la variable entre {{ }} para mostrarla por pantalla.

 

Existen dos tipos de variables:

 

 

  • Variables simples: {{ variable_simple }}
  • Variables complejas: {{ variable.title }}

Una de las ventajas de TWIG, es que cuando tiene que leer una variable compleja, si no recibe una respuesta contempla variables posibilidades de entenderla. A continuación, pongo en orden las posibilidades que contempla TWIG sino recibe respuesta:

 

  • $variable[‘title’] → Array con clave asociativa. 
  • $variable -> title → Objeto y atributo. 
  • $variable-> title() → Método. 
  • $variable -> getTitle() → Get. 
  • $variable -> isTitle() → Is.

Sino recibe respuesta de ninguna de estas maneras, ya devuelve «null».

 

Herramientas TWIG

TWIG tiene herramientas muy útiles que facilitan cualquier cosa que queramos hacer.

 

Filtros

Los filtros pueden modificar variables de la forma que queramos. Para utilizarlos basta con poner «|» al final del nombre de la variable, seguido del nombre del filtro.

 

Aquí un ejemplo:

 

  • {{‘Users’| upper}}

Aquí en la variable «Users» aplicamos el filtro «upper», que nos colocará el contenido de la variable en mayúsculas.

 

Aquí una lista de los diferentes filtros:

 

abs – batch – capitalize – convert_encoding – date – date_modify – default – escape – first – format – join – json_encode – keys – last – length – lower – merge – nl2br – number_format – raw – replace – reverse – round – slice – sort – split

 

Drupal 8 incorpora un filtro que hace traducible una variable. Se puede utilizar así:

 

  • {{‘Users’|t}} → Cadena para traducir

Funciones

Las funciones se utilizan para generar contenido. 

 

Aquí una lista de funciones:

 

attribute – block – constant – cycle – date – dump – include – max – min – parent – random – range

 

 

Depuración TWIG

Podemos depurar utilizando la función «dump».

 

En Drupal 8, cada plantilla tiene una lista de variables (en los comentarios) a modo de información para que las utilicemos. Si utilizamos «dump(nombre_variable)» el navegador nos mostrará como está estructurada la variable y su contenido.

 

Existe otra función llamada «kint» (para ella necesitamos tener activado un sub-módulo de devel «devel_kint»)

 

 

Herencia de plantillas

Permite crear una plantilla «base» (definiendo bloques genéricos) y después crear plantillas hijas en las que se podrán definir bloques específicos.

 

Aquí un ejemplo:

 

  • base.html.twig

 

En esta plantilla base podemos ver una página que tiene 2 columnas (sidebar y contenido). Cada una de las columnas están compuestas por un bloque (block sidebar y block body).

 

  • blog.html.twig (Plantilla hija)

 

Aquí tenemos una plantilla «hija», lo sabemos por la etiqueta «extends», que indica que es una plantilla hija de la de «base.html.twig». En esta plantilla simplemente se define el bloque «body» en el cuál aparecerán los títulos de las entradas de los blogs y un párrafo de descripción.

 

A continuación se muestra como quedará finalmente:

 

 

Este sistema de herencias permite tener organizado nuestro código para que sea fácilmente comprensible para cualquier desarrollador que vea nuestro código.

 

Consejos

  • Si utilizas la etiqueta {% extend %}, debe ser la primera de la plantilla.
  • Si copias y pegas varias veces el contenido, mejor meterlo en una plantilla a parte y añadirla donde queramos con un “include”.
  • Si deseas obtener contenido de la plantilla padre → {{parent()}}.
  • Configuración TWIG: https://www.drupal.org/node/1903374

 

 

 

Esto ha sido todo espero que os haya servido de ayuda.

 

Muchas gracias.

 

También te puede gustar…

Caso de éxito: Fronda

Caso de éxito: Fronda

Fronda, es una cadena de centros de jardinería que cuenta con una tienda online que opera por toda España con la que hemos colaborado.

ASPgems icon
C/ Sextante, 9
28023 Madrid,
España

Hablemos.

A %d blogueros les gusta esto: