Als erstes möchte ich hier klären was “Twig” ist und wie man diese PHP-Bibliothek verwendet.
Was ist Twig?
Twig ist eine Open Source Template-Engine für PHP und wird z.B. von Symfony verwendet. Damit ist es möglich die Programmierung vom Layout zu trennen und Projekte somit übersichtlicher und sicherer zu erstellen. Zudem kann man Twig relativ einfach erweitern und neue Funktionen oder Filter hinzufügen. Außerdem ist die Dokumentation wirklich gut und die Einarbeitungszeit ist sehr kurz.
Schnelle Installation
Damit man einen schnellen Einstig in Twig bekommt, habe ich eine kleine Wrapper-Klasse geschrieben und in einem zweiten Projekt “Twitter Bootstrap” als Twig-Beispiel -Template integriert.
git clone https://github.com/voku/twig-wrapper-example/
Das Projekte ist mit Gunt + SASS + Bower + Composer etc. aufgesetzt, jedoch habe ich alle Vendor-Dateien mit in dem Repository eingecheckt, so dass man keine komplette Toolchain benötigt um die folgenden Beispiele auszuprobieren.
PS: um das Projekt zu updaten bzw. weiterzuentwickeln kann man folgende Befehle ausführen:
cd twig-wrapper-example/
rm -rf vendor/
rm composer.lock
npm install
bower install
composer install
grunt build
grunt watch
Syntax
Die Allgemeine-Syntax lässt sich in “output”, “function” und “comment” unterteilen.
“output” -> {{ … }} -> um Variablen in das Template einzufügen
“function” -> {% … %} -> um Funktionen auszuführen
“comment” -> {# … #} -> um einen Kommentar einzufügen, welche nur im Twig sichbar ist (nicht im späterem “html”-output)
Variablen
Man kann sowohl Arrays, einfache Variablen oder ganze Objekte an Twig übergeben.
z.B.:
$object = new Object();
$twig->assign('object', $object);
$array = array(1,2,3,4,5);
$twig->assign('array', $array);
$string = 'test';
$twig->assign('string', $string);
Zudem kann man auch Variablen in einem Twig-Template definieren:
{% set totalimages = 4 %}
Filter
Auf der Kommandozeile ist man bereits an Pipes ( “|” ) gewöhnt und kann dies nun auch bei der Entwicklung nutzen. :)
{% set totalimages = object.images | length %}
{{ array[1] | striptags | raw }}
Kontrollstrukturen
“if”-Bedingungen werden wie folgt geschrieben:
{% if (name == "foo") or (name == "bar") %}
{{ name }}!!!
{% elseif name == "test" %}
{{ name }} -> was a test
{% else %}
{{ name }}
{% endif %}
“loops” in Twig: for
{% for asset in headerObject %}
<img src="{{ asset.url }}">
<p>{{ asset.caption }}</p>
{% if loop.index0 is divisibleby(2) %}
<hr />
{% endif %}
{% endfor %}
PS: außerdem kann man wie im vorherigen Beispiel – “loop” nutzen, um den Anzahl von aktuellen Durchläufe zu analysieren
extends
Eine Hauptfunktionalität ist die Twig-Funktion “extends“. Mit dieser Funktion kann man sein Template erweitern und zuvor definierte Bereiche (block – endblock) wiederum ersetzten.
{%extends “base.twig” %}
base.twig -> index.twig
Der vorherige Befehl bewirkt in der “index.twig” Datei, dass das angegebene Template erweitert wird. Dabei ist es sehr hilfreich möglichst viel HTML-Code in einem Basis-Twig unterzubringen. Anders wie bei vielen anderen PHP-Projekten sollte man nicht so oft via “include” inkludieren, sondern bestimmte Bereiche (blocks) im “base.twig” festlegen und diese mit Inhalten befüllen, erweitern oder leeren.
include
Die Funktionalität “include” lässt sich einsetzten um Template-Komponenten (z.B.: einen Slider) an mehreren Stellen einzufügen. Man hat die Möglichkeit beim “include”-Aufruf Variablen zu übergeben, jedoch kann man keine “blocks” von bereits inkludierten Templates mehr ändern.
{% include “inc_carousel.twig” %}
base.twig -> inc_carousel.twig
embed
Beim “embed” handelt es sich um eine Mischung aus extending & including, so kann man innerhalb des embed-Aufrufes darin befindliche “blocks” ersetzten.
{% embed “content_sidebar.twig” %}
index.twig -> content_sidebar.twig
Twig_Extension
Wem ein bestimmter Filter oder Funktion fehlt, kann dies sehr einfach in Twig integrieren z.B. -> PluginHtml.php
$twig->addExtension(new PluginHtml());
Links
http://knpuniversity.com/screencast/twig/basics | Basics – Video
http://twig.sensiolabs.org/ | Dokumentation
