6.4. Twig is een nieuwe template-engine voor Drupal.

Als je het bestand page.html.twig van het thema Stable opent:

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

Dan zul je zien dat het verschilt van het page.tpl.php-template van Drupal 7, ten eerste door de extensie en ten tweede door het overvloedige gebruik van accolades {}. Dit komt doordat Drupal gebruikmaakt van de Twig-template-engine.

<main role="main">
    <a id="main-content" tabindex="-1"></a>{# link staat in 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>

PHP kan niet worden gebruikt in Twig-templates, dus je moet alleen Twig-hulpmiddelen gebruiken — en die zijn ruim voldoende om een site te themen.

Laten we uitzoeken hoe we met Twig werken.

Variabelen in Twig

Als we in PHP het dollarteken $ gebruiken voor variabelen, gebruiken we in Twig accolades:

{{ variable }}

We schrijven dus de variabele tussen twee openings- en twee sluitaccolades met spaties ertussen. Om een variabele weer te geven, hoef je geen print-functie toe te voegen — we gebruiken immers geen PHP in Twig-templates. Het volstaat om de variabele tussen dubbele accolades te plaatsen.

Het werken met objecten en arrays is ook eenvoudig. Waar je eerder moest weten dat $node een object was en $form een array, kun je nu eenvoudig verwijzen naar eigenschappen via een puntnotatie:

{{ node.id }}

We kunnen gemakkelijk variabelen aanmaken:

{% set foo = "bar" %}

Hallo, hier is mijn variabele: {{ foo }}

Let op de syntaxis: bij het instellen van een variabele gebruiken we procenttekens {% %}, en bij het weergeven gebruiken we dubbele accolades {{ }}.

We kunnen niet alleen strings, maar ook arrays instellen:

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

Twig-filters

Hoewel Twig geen volwaardige programmeertaal is, beschikt het over een reeks hulpmiddelen voor het werken met gegevens. Het belangrijkste hulpmiddel zijn filters. Filters worden aangeduid met een pijp |.

{{ variable|filter }}

Filters maken het mogelijk om de uitvoer van variabelen te wijzigen, bijvoorbeeld:

{{ node.title | length }} — geeft de lengte van een tekenreeks weer.

{{ node.title | upper }} — toont de tekst in hoofdletters.

{{ node.title | lower }} — toont de tekst in kleine letters.

De volledige lijst met Twig-filters vind je in de officiële Twig-documentatie:
http://twig.sensiolabs.org/doc/filters/index.html

Drupal Twig-filters

Drupal voegt ook zijn eigen filters toe aan Twig, zoals filters voor regeleinden. Als we eerder de functie t() gebruikten, die in PHP werd geïmplementeerd, maar we nu geen PHP-code in Twig kunnen gebruiken, dan hebben we een hulpmiddel nodig dat t() vervangt.

Voorbeelden van Drupal-filters zijn:

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

Tekstvertaling in Twig

Twig ondersteunt meertalige teksten. Om een regel te vertalen gebruik je de tag {% trans %}. Let op hoe besturingsstructuren worden geschreven — ze gebruiken het procentteken % om zich te onderscheiden van variabelen.

{% trans %} Hallo wereld {% endtrans %}

We kunnen ook variabelen aan de vertaalde tekst meegeven:

{% trans %} Hallo {{ name }} {% endtrans %}

We kunnen variabelen ook aanpassen met filters voordat ze in de vertaalde tekst worden weergegeven:

{% set name = name|capitalize %}

{% trans %}
  Hallo {{ name }}!
{% endtrans %}

Opmerkingen in Twig

{# Opmerking hier #}

Voorwaardelijke instructies (If)

Hoewel we niet over alle functies van PHP beschikken in Twig, hebben we wel structuren om met arrays en variabelen te werken. Zo kunnen we controleren of een variabele bestaat voordat we deze weergeven:

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

Lussen in Twig

Vaak moet je in templates door een array itereren en elk element afzonderlijk weergeven. Hiervoor gebruiken we in Twig de for-lus (vergelijkbaar met foreach in PHP):

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

We kunnen de for-lus ook gebruiken zoals een klassieke for-lus in PHP, maar dan in een iets andere vorm:

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

We kunnen ook de for … else-constructie gebruiken:

<ul>
{% for user in users %}
  <li>{{ user.username|e }}</li>
{% else %}
  <li><em>geen gebruiker gevonden</em></li>
{% endfor %}
</ul>