Theming in Drupal 8 - alles neu mit Twig? (Teil 2)

Nachdem der erste Teil der Blogpostreihe eher allgemein auf Twig eingegangen ist, soll im zweiten Teil der Syntax anhand von Codebeispielen näher erklärt werden. Um die Unterschiede besser aufzuzeigen, stelle ich im Blogpost die uns bekannte Syntax direkt in den Vergleich zur neuen Twig-Syntax. Alle hier gezeigten Beispiele basieren auf dem aktuellen Entwicklungsstand der Drupal 8 Twig-Sandbox.


Der Themer sollte sich im Normalfall eigentlich nur noch um die Ausgabe vordefinierten Variablen (Platzhalter) oder einfacher Kontrollstrukturen (if-Abfragen oder for-Schleifen, die bspw. in Listen verwendet werden) kümmern müssen. Komplexere eigene Logik sollte man nicht in Templates hinterlegen - hier hat sich sicherlich jeder mal ausgetobt, um im Template 'eben mal schnell' noch einen View zu laden oder einzelne Felder benutzerdefiniert auszugeben. Dies führte am Ende meist zu recht komplexen und unübersichtlichen Templates, die nach einer gewissen Zeit eher schlecht wartbar wurden. Dies lag vor allem an der Tatsache, dass in PHP alle Möglichkeiten offenstanden und diese dann auch ausgiebig genutzt wurden.

Ausgabe von Variablen

Beispiel für die Ausgabe von Variablen und einer einfachen if-Anweisung in PHPTemplate:

[gist:5011792:taxonomy-term.tpl.php]

Beispiel für die Ausgabe von Variablen und einer einfachen if-Anweisung in Twig:

[gist:5011792:taxonomy-term.html.twig]

Im gezeigten Beispiel sieht man schon die Unterschiede - statt der PHP-Funktionen print bzw. der Drupal eigenen render-Funktion wird in Zukunft zur Ausgabe nur noch {{ name_der_variable }} verwendet. Auch der Zugriff auf Array bzw. Objekt-Konstrukte innerhalb der Templates wurde vereinfacht. Hier setzt man nun auf eine konsistente Syntax, die nun - wie im Beispiel zu sehen - auf eine Punkt-Syntax setzt. Dabei spielt es keine Rolle, ob man auf Arrayelemente oder Objektelemente zugreifen möchte.

Beispiel aus einem Views-Exposed-Filter in PHPTemplate:
[gist:5011792:syntax.php]

Beispiel aus einem Views-Exposed-Filter in Twig:
[gist:5011792:syntax.twig]

Kontrollstrukturen

Neben der oben schon gezeigten if-Abfrage, gibt es noch die Möglichkeit zur Nutzung von for-Schleifen in den Templates innerhalb von {% %} Zeichen.

Beispiel für for-Schleife in PHPTemplate

[gist:5011792:book-all-books-block.tpl.php]

Beispiel für for-Schleife in Twig

[gist:5011792:book-all-books-block.html.twig]

Wie auch schon in den früheren Drupal-Versionen, sollten wir direkt auf Theme-Ebene vermeiden, zu viel Logik in die Templates zu packen. Hierfür stehen uns weiterhin die preprocess-Funktionen zur Verfügung.Neben der neuen {% %} Syntax im Template sieht man hier auch die Nutzung des neuen nav-Elements aus dem HTML5-Standard, der somit auch in andere Twig-Templates Einzug gehalten hat.

Kommentare in Templates

Für die Dokumentation innerhalb von Templates wird in Twig die {# #}-Syntax verwendet.

Beispiel für Kommentar in PHPTemplate (phpdoc-Style):

[gist:5011792:comments.php]

Beispiel für Kommentar in Twig:

[gist:5011792:comments.html.twig]

Wiederverwendbarkeit von Templates über Includes

Obwohl auch in PHPTemplate durch PHP schon die Nutzung der include bzw. include_once möglich gewesen wäre, fand diese nur sehr selten Einsatz in den Templates. In Twig werden Includes nun aber häufiger anzutreffen sein. Ein gutes Beispiel hierfür liefert das image-Modul - hier wird je nach übergebenem Imagestyle ein eigenes Template über die include eingebunden. [gist:5011792:image-formatter.html.twig] Den inkludierten Daten lassen sich dann über den Parameter with auch direkt Variablen aus dem übergeordnetem Template mitgeben.

Verwendung von Filtern

Über Filter lässt sich die Ausgabe von Variablen auf Theme-Ebene beeinflussen. Beispielhaft zu den Möglichkeiten von Filtern möchte ich hier die Twig-Alternativen zur t-Funktion und der check_plain-Funktion zeigen.

Übersetzungen in Templates

Beispiel für eine Übersetzung in PHPTemplate:
[gist:5011792:poll-results--block.tpl.php] Beispiel für eine Übersetzung in Twig:
[gist:5011792:node-admin-overview.html.twig] Wie auch in der t-Funktion kann man auch in Twig über Platzhalter etwas mehr Dynamik in die zu übersetzenden Zeichenketten bringen. Im Beispiel wird die übergebene Variable $votes bzw. type bei Ausgabe in der Zeichenkette ersetzt.

Sonderzeichen maskieren

Mithilfe von check_plain konnte man in den vorherigen Drupal-Versionen in Text enthaltene Sonderzeichen in HTML umwandeln. 

Beispiel in PHPTemplate:
[gist:5011792:checkplain.php]

Beispiel in Twig:
[gist:5011792:checkplain.twig]

Der escape-Filter kann auch über den Alias verwendet werden und unterstützt über einen Parameter verschiedene escape-Möglichkeiten: 

  • html: Maskieren von Zeichen im HTML-Kontext
  • js: Maskieren von Zeichen im Javascript-Kontext
  • css: Maskieren von Zeichen im CSS-Kontext
  • url: Maskieren von Zeichen für URI-Kontext oder für URL-Parameter
  • html_attr: Maskieren von Zeichen im HTML-Attribut-Kontext

Weitere Informationen über die in Twig zur Verfügung stehenden Filter kann man in der Dokumentation nachlesen.