6.4. Twig es el nuevo motor de plantillas para Drupal.

Si abres el archivo de plantilla page.html.twig del tema Stable:

/core/themes/stable/templates/layout/page.html.twig

Verás que difiere del template page.tpl.php de Drupal 7, primero por la extensión y segundo por la abundancia de llaves dobles {}. Todo esto se debe a que Drupal usa el motor de plantillas Twig.

<main role="main">
    <a id="main-content" tabindex="-1"></a>{# el enlace está en html.html.twig #}

    <div class="layout-content">
      {{ page.content }}
    </div>{# /.layout-content #}

    {% if page.sidebar_first %}
      <aside class="layout-sidebar-first" role="complementary">
        {{ page.sidebar_first }}
      </aside>
    {% endif %}

    {% if page.sidebar_second %}
      <aside class="layout-sidebar-second" role="complementary">
        {{ page.sidebar_second }}
      </aside>
    {% endif %}

  </main>

No se puede usar PHP en la plantilla Twig, así que solo debes usar herramientas de Twig, las cuales son suficientes para maquetar el sitio.

Veamos cómo trabajar con Twig.

Variables en Twig

Si en PHP usamos el símbolo de dólar $ para variables, en Twig usamos llaves dobles:

{{ variable }}

Así escribimos variables: dos llaves de apertura, espacio, nombre de la variable, espacio, dos llaves de cierre. No necesitas usar la función print ni ningún código PHP, solo las llaves dobles.

También es cómodo trabajar con objetos y arrays de variables. En lugar de saber si $node es un objeto o $form un array, usamos punto para acceder a propiedades:

{{ node.id }}

Podemos declarar variables fácilmente:

{% set foo = "bar" %}

Hola, esta es mi variable: {{ foo }}

Nota la sintaxis: para definir usamos llaves con %, para mostrar usamos llaves dobles.

También podemos definir arrays:

{%
  set foo_array = [
    'foo',
    'bar',
  ]
%}

Filtros en Twig

Aunque Twig no es un lenguaje de programación completo, tiene herramientas para trabajar con datos. La más importante son los filtros, que se indican con el símbolo pipe |

{{ variable | filtro }}

Ejemplos:

{{ node.title | length }} - imprime la longitud de una cadena

{{ node.title | upper }} - muestra la cadena en mayúsculas

{{ node.title | lower }} - muestra la cadena en minúsculas

Consulta la lista completa de filtros en la documentación oficial: http://twig.sensiolabs.org/doc/filters/index.html

Filtros Twig en Drupal

Drupal añade filtros adicionales como:

• t
• passthrough
• placeholder
• drupal_escape
• safe_json
• without
• clean_class
• clean_id

Traducción de líneas en Twig

Para traducir texto, usa la etiqueta {% trans %}:

{% trans %} Hola mundo {% endtrans %}

También puedes insertar variables en la traducción:

{% trans %} Hola {{ name }} {% endtrans %}

O aplicar filtros antes de mostrar:

{% set name = name | capitalize %}

{% trans %}
  Hola {{ name }}!
{% endtrans %}

Comentarios en Twig

{# Comentario aquí #}

Condicionales If

Puedes verificar si una variable existe:

{% if site_slogan %}
  <div class="site-slogan">{{ site_slogan }}</div>
{% endif %}

Bucle for en Twig

Para recorrer un array, usamos for:

{% for item in items %}
  {{ item.content }}
{% endfor %}

También puedes hacer un for sobre un rango:

{% for i in range(0, 3) %}
  {{ i }},
{% endfor %}

Uso de for else

<ul>
{% for user in users %}
  <li>{{ user.username|e }}</li>
{% else %}
  <li><em>no se encontró ningún usuario</em></li>
{% endfor %}
</ul>