Twig Templates in Contao für Anwender 30.04/01.05.2022 Contao Camp 2022 1 

Über mich  seit 2010 Frontendentwicklung (Freelancer)  Quereinsteiger im Bereich Web  größte Stärken im Bereich CSS  ausschließlich Betreuung von Contao und HTML-Seiten  Mitglied der Contao Association  Contao Partner  Forum: mlweb Contao Camp 2022 2 30.04/01.05.2022 

Inhalt  Was ist Twig?  Syntax von Twig  Twig in Contao Contao Camp 2022 3 30.04/01.05.2022 

Was ist Twig Twig - die Template Engine von Symfony Contao Camp 2022 4 30.04/01.05.2022 

Twig – Standard Template Engine von Symfony  Twig ist eine Template-Engine für die Programmiersprache PHP  wird seit Symfony 2 als Standard Template-Engine eingesetzt  Contao verwendet Twig 3.x  wird von vielen IDE und Editoren unterstützt • Eclipse (IDE) • PhpStorm (IDE) • Visual Studio(IDE) • Atom • Notepad++ • Sublime Text • TextMate • Coda 30.04/01.05.2022 Contao Camp 2022 5 

Syntax von Twig ohne Theorie geht es leider nicht Contao Camp 2022 6 30.04/01.05.2022 

Bezeichner  Variable ausgeben {{ … }}  Kommandos und Kontrollstrukturen z.B. If-Abfragen {% … %}  Kommentare {# … #} 30.04/01.05.2022 Contao Camp 2022 7 

Kommentar {# mein Kommentar #} 30.04/01.05.2022 Contao Camp 2022 8 

Variable {% set test = -5 %} {{ test }} 30.04/01.05.2022 Contao Camp 2022 9 

Filter {% set test = -5 %} {{ test|abs }} 30.04/01.05.2022 Contao Camp 2022 10 Twig Doku – Filter 

For-Schleife {% set test = ['mein erster Wert', 'mein zweiter Wert','mein dritter Wert'] %}

{% for item in test %}
• {{ item }}
{% endfor %}

30.04/01.05.2022 Contao Camp 2022 11 

If-Abfragen {% set test = "mein Inhalt" %} {% if test %}

Ausgabe: Die Variable hat folgenden Inhalt:

{{ test }}

{% else %}

Ausgabe: Die Variable hat keinen Inhalt.

{% endif %} 30.04/01.05.2022 Contao Camp 2022 12 

Include (Include-Tag) {% include '@Contao/ce_template_variable.html.twig' %} 30.04/01.05.2022 Contao Camp 2022 13 Twig Doku - Referenzen 

Namensräume  Twig nutzt Namensräume  @Contao – gemanagter Namensraum, der alle Contao-Templates selbständig erkennt und richtig zuordnet  Namespace magic 30.04/01.05.2022 Contao Camp 2022 14 

Extends {% extends '@Contao/ce_template_block.html.twig' %} {% block main %}

Wir Erweitern das Template um diese zusätzliche Überschrift

{{ parent() }} {% endblock %} 30.04/01.05.2022 Contao Camp 2022 15 

Twig in Contao Sollten wir Twig-Templates in Contao jetzt schon nutzen? Contao Camp 2022 16 30.04/01.05.2022 

Twig in Contao jetzt nutzen!  verfügbar ab Contao 4.12  html5-Templates können durch Twig-Templates überschrieben werden  parallele Nutzung von html5- und Twig-Templates  neue Möglichkeiten austesten  Probleme in Euren angepassten Templates erkennen und in Ruhe nach Lösungen suchen  Vorbereitung auf die Zukunft ohne Zeitdruck  mit den neuen/anderen Möglichkeiten vertraut machen  Syntax recht einfach – Templates werden besser lesbar  „Mitarbeiten“ an der Implementierung von Twig Contao Camp 2022 17 30.04/01.05.2022 

Wie bin ich vorgegangen?  Contao bringt (im Moment) nur die HTML5-Templates mit  Original-Templates mit Twig nachgebaut  Anpassungen aus vorhandenen HTML5-Templates ausprobiert  langsam an die neuen Möglichkeiten von Twig herangetastet  Github 30.04/01.05.2022 Contao Camp 2022 18 

Nachbau Template ce_text.html5 (1. Variante) HTML5-Template 30.04/01.05.2022 Contao Camp 2022 19 extend('block_searchable'); ?> block('content'); ?> addBefore): ?> text ?> addImage): ?> insert('image', $this->arrData); ?> addBefore): ?> text ?> endblock(); ?> {% extends '@Contao/block_searchable' %} {% block content %} {% if not addBefore %} {{ text }} {% endif %} {% if addImage %} {% include '@Contao/image' %} {% endif %} {% if addBefore %} {{ text }} {% endif %} {% endblock %} Twig-Template 

Encoding und Escaping  Contao nutzt Input-Encoding, Twig nutzt Output-Encoding um HTML welchem vertaut wird, korrekt auszugeben wird der raw-Filter genutzt {{ variable|raw }}  Twig verwendet Autoescaping auf Grundlage des Dateinamens z.B. • meine-datei.html.twig - HTML-Escaping • meine-datei.css.twig – CSS-Escaping  explizites Escaping bestimmter Werte ist möglich {{ variable|e('css‘)}}  Escaping 30.04/01.05.2022 Contao Camp 2022 20 

Nachbau Template ce_text.html5 (2. Variante) HTML5-Template 30.04/01.05.2022 Contao Camp 2022 21 extend('block_searchable'); ?> block('content'); ?> addBefore): ?> text ?> addImage): ?> insert('image', $this->arrData); ?> addBefore): ?> text ?> endblock(); ?> {% extends '@Contao/block_searchable' %} {% block content %} {% if not addBefore %} {{ text|raw }} {% endif %} {% if addImage %} {% include '@Contao/image' %} {% endif %} {% if addBefore %} {{ text|raw }} {% endif %} {% endblock %} Twig-Template 

Nachbau Template ce_text.html5 (3. Variante) {% extends '@Contao/block_searchable' %} {% import '@ContaoCore/Image/Studio/_macros.html.twig' as studio %} {% block content %} {% if not addBefore %} {{ text|raw }} {% endif %} {% if figure %} {{ studio.figure(figure) }} {% endif %} {% if addBefore %} {{ text|raw }} {% endif %} {% endblock %} 30.04/01.05.2022 Contao Camp 2022 22 

Nachbau Template ce_text.html5 (4. Variante) {% extends '@Contao/block_searchable' %} {% import '@ContaoCore/Image/Studio/_macros.html.twig' as studio %} {% block content %} {% if not addBefore %} {{ text|raw }} {% endif %} {% if figure %} {{ studio.figure(figure, {attr: {class: 'image_container' ~ floatClass}}) }}} {% endif %} {% if addBefore %} {{ text|raw }} {% endif %} {% endblock %} 30.04/01.05.2022 Contao Camp 2022 23 

Nachbau Template ce_text.html5 (5. Variante) {% extends '@Contao/block_searchable' %} {% import '@ContaoCore/Image/Studio/_macros.html.twig' as studio %} {% block content %} {% if not addBefore %} {% block text %} {{ text|raw }} {% endblock %} {% endif %} {% if figure %} {{ studio.figure(figure, {attr: {class: 'image_container' ~ floatClass}}) }}} {% endif %} {% if addBefore %} {{ block('text'}} {% endif %} {% endblock %} 30.04/01.05.2022 Contao Camp 2022 24 

Nachbau Template ce_text.html5 (6. Variante) {% extends '@Contao/block_searchable' %} {% import '@ContaoCore/Image/Studio/_macros.html.twig' as studio %} {% block content %} {% if not addBefore %} {% block text %} {{ text|insert_tag|raw }} {% endblock %} {% endif %} {% if figure %} {{ studio.figure(figure, {attr: {class: 'image_container' ~ floatClass}}) }}} {% endif %} {% if addBefore %} {{ block('text'}} {% endif %} {% endblock %} 30.04/01.05.2022 Contao Camp 2022 25 

Erweitern und Überschreiben  war auch mit php-Templates seit Contao 3.3 möglich neues Template-System von Contao 3.3  Twig bietet deutlich mehr Möglichkeiten als php-Templates  Vererbung in mehreren Stufen (Kette) ist möglich  Reihenfolge der Vererbung • Template aus dem Core oder einer Erweiterung • Template aus einer Erweiterung • Template aus dem globalen Templates-Ordner • Template des Themes  Contao Developer Doku - Template Hierarchie 30.04/01.05.2022 Contao Camp 2022 26 

Blöcke überschreiben - global {% extends '@Contao/fe_page’ %} {% block main %}

zusätzlicher Text vom Template im globalen Template-Ordner

{{ parent() }} {% endblock %} {% block footer %}

zusätzlicher Inhalt vom Template im globalen Template-Ordner

{{ parent() }} {% endblock %} 30.04/01.05.2022 Contao Camp 2022 27 globaler Template Ordner 

Blöcke überschreiben - Theme {% extends '@Contao/fe_page' %} {% block main %}

{{ pageTitle }}

{{ parent() }} {% endblock %} {% block footer %}

zusätzlicher Inhalt vom Template aus Theme-Ordner

{{ parent() }} {% endblock %} 30.04/01.05.2022 Contao Camp 2022 28 Theme Ordner 

Blöcke überschreiben - Partials verwenden {% extends '@Contao/fe_page' %} {% block main %} {% include '@Contao/_main_partial.html.twig' %} {% endblock %} {% block footer %}

zusätzlicher Inhalt vom Template aus Theme-Ordner

{{ parent() }} {% endblock %} 30.04/01.05.2022 Contao Camp 2022 29 Theme Ordner 

Partial {{ contao_sections('main') }} 30.04/01.05.2022 Contao Camp 2022 30 _main_partial.html.twig 

Vorteile von Twig  schnell – die Kompilierung erfolgt zu optimiertem PHP-Code ohne Overhead  sichere Template-Engine  sehr flexibel • Filter • Erweitern (extends) • Überschreiben (block) • Einfügen (include) • eigene Filter zur Manipulation der Ausgabe (eher für Entwickler) • eigene Tags (eher für Entwickler)  Output-Encoding Contao Camp 2022 31 30.04/01.05.2022 

weitere Informationen  https://twig.symfony.com/doc/3.x/intro.html  https://www.youtube.com/watch?v=vcopVEDxzLE  https://docs.contao.org/dev/framework/templates/twig/#body-inner  https://docs.contao.org/manual/de/layout/templates/twig/#body-inner 30.04/01.05.2022 Contao Camp 2022 32 

Danke für die Aufmerksamkeit Danke an Moritz Vondano vom Contao Core-Team für die Umsetzung dieses Features und Dank auch für die kompetente Unterstützung bei der Vorbereitung des Vortrags Webdesign Dr. Maren Lange Berneckstr. 41 72275 Alpirsbach +49 7444 955 62 44 [email protected] www.webdesign-marenlange.de 30.04/01.05.2022 Contao Camp 2022 33