6.4. Twig ist eine neue Template-Engine für Drupal.

Wenn Sie die Datei page.html.twig des Stable-Themes öffnen:

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

werden Sie feststellen, dass sie sich vom Drupal 7 page.tpl.php Template unterscheidet, erstens durch die Dateiendung und zweitens durch die Vielzahl von geschweiften Klammern {}. Das liegt daran, dass Drupal die Twig Template-Engine verwendet.

<main role="main">
    <a id="main-content" tabindex="-1"></a>{# Link befindet sich 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 kann im Twig-Template nicht verwendet werden, daher sollten Sie nur Twig-Werkzeuge verwenden, die jedoch ausreichend sind, um die Seite zu gestalten.

Lassen Sie uns herausfinden, wie man mit Twig arbeitet.

Variablen in Twig

Wenn wir in PHP das Dollarzeichen $ für Variablen verwenden, dann nutzen wir in Twig geschweifte Klammern:

{{variable}}

Wir schreiben Variablen mit zwei öffnenden geschweiften Klammern, gefolgt von einem Leerzeichen, dem Variablennamen, einem weiteren Leerzeichen und zwei schließenden Klammern. Um eine Variable auszugeben, brauchen Sie keine print-Funktion wie in PHP, denn Twig verwendet kein PHP; Sie geben die Variable einfach in doppelten geschweiften Klammern an.

Es ist auch bequem, mit Objekt- und Array-Variablen zu arbeiten. Früher musste man wissen, dass $node ein Objekt und $form ein Array ist, jetzt ist es einfacher: Auf Eigenschaften von Variablen greifen Sie mit einem Punkt zu:

{{node.id}}

Wir können leicht Variablen erstellen:

{% set foo="bar" %}

Hi, hier ist meine Variable: {{ foo }}

Beachten Sie die Syntax: Beim Setzen einer Variable verwenden wir Prozentzeichen in geschweiften Klammern, beim Anzeigen einer Variable doppelte geschweifte Klammern.

Wir können nicht nur Strings, sondern auch Arrays definieren:

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

Twig Filter

Obwohl Twig keine vollwertige Programmiersprache ist, verfügt es über Werkzeuge zur Datenbearbeitung. Wahrscheinlich sind Filter das wichtigste Werkzeug. Filter werden mit einer Pipe | angegeben:

{{ variable|filter }}

Filter erlauben die Veränderung der Variablenausgabe, zum Beispiel:

{{node.title | length}} – gibt die Länge eines Strings aus

{{node.title | uppercase}} – gibt den String in Großbuchstaben aus

{{node.title | lowercase}} – gibt den String in Kleinbuchstaben aus

Eine vollständige Liste der Twig-Filter finden Sie in der offiziellen Twig-Dokumentation unter http://twig.sensiolabs.org/doc/filters/index.html

Drupal Twig Filter

Drupal fügt Twig auch eigene Filter hinzu, etwa für Zeilenumbrüche. Wenn wir früher die PHP-Funktion t() verwendet haben, können wir diese in Twig nicht benutzen. Deshalb gibt es Werkzeuge, die die Funktion t() ersetzen.

Beispiele sind:

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

Zeilenumbruch im Twig-Template

Twig verwendet Tags für Mehrsprachigkeit. Um einen Text zu übersetzen, verwendet man {% trans %}. Beachten Sie, dass Kontrollstrukturen Prozentzeichen % verwenden, um sich von Variablen abzugrenzen.

{% trans %} Hello world {% endtrans %}

Wir können auch Variablen in übersetzbare Strings einfügen:

{% trans %} Hello {{ name }} {% endtrans %}

Variablen können vor der Ausgabe mit Filtern bearbeitet werden:

{% set name = name|capitalize %}

{% trans %}
  Hello {{ name }}!
{% endtrans %}

Kommentare in Twig

{# Kommentar hier #}

If-Anweisung

Obwohl Twig nicht alle PHP-Funktionen bietet, stehen Kontrollstrukturen zur Verfügung. Zum Beispiel kann man prüfen, ob eine Variable existiert, bevor man sie ausgibt.

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

Twig Schleifen

Oft muss man in Templates über ein Array iterieren und jedes Element ausgeben. Dafür verwendet man in Twig eine for-Schleife (ähnlich foreach in PHP):

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

Man kann auch eine for-Schleife wie in PHP mit einem Zahlenbereich nutzen:

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

Man kann auch eine for-else-Konstruktion verwenden:

<ul>
{% for user in users %}
  <li>{{ user.username|e }}</li>
{% else %}
  <li><em>kein Benutzer gefunden</em></li>
{% endfor %}
</ul>