Twig Templates in Contao

Twig-Templates können in Contao ab Version Contao 4.12 parallel zu html5-Templates genutzt werden. Es ist möglich html5-Templates in Twig zu erweitern und zu überschreiben.

Einführung in Twig-Templates aus Sicht eines Contao Frontendentwicklers.

Transcript

1. Twig Templates in Contao für Anwender 30.04/01.05.2022 Contao Camp 2022 1
2. Ü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
3. Inhalt  Was ist Twig?  Syntax von Twig  Twig in Contao Contao Camp 2022 3 30.04/01.05.2022
4. Was ist Twig Twig - die Template Engine von Symfony Contao Camp 2022 4 30.04/01.05.2022
5. 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
6. Syntax von Twig ohne Theorie geht es leider nicht Contao Camp 2022 6 30.04/01.05.2022
7. Bezeichner  Variable ausgeben {{ … }}  Kommandos und Kontrollstrukturen z.B. If-Abfragen {% … %}  Kommentare {# … #} 30.04/01.05.2022 Contao Camp 2022 7
8. Kommentar {# mein Kommentar #} 30.04/01.05.2022 Contao Camp 2022 8
9. Variable {% set test = -5 %} {{ test }} 30.04/01.05.2022 Contao Camp 2022 9
10. Filter {% set test = -5 %} {{ test|abs }} 30.04/01.05.2022 Contao Camp 2022 10 Twig Doku – Filter
11. For-Schleife {% set test = ['mein erster Wert', 'mein zweiter Wert','mein dritter Wert'] %} <ul> {% for item in test %} <li>{{ item }}</li> {% endfor %} </ul> 30.04/01.05.2022 Contao Camp 2022 11
12. If-Abfragen {% set test = "mein Inhalt" %} {% if test %} <p>Ausgabe: Die Variable hat folgenden Inhalt:</p> <p>{{ test }}</p> {% else %} <p>Ausgabe: Die Variable hat keinen Inhalt.</p> {% endif %} 30.04/01.05.2022 Contao Camp 2022 12
13. Include (Include-Tag) {% include '@Contao/ce_template_variable.html.twig' %} 30.04/01.05.2022 Contao Camp 2022 13 Twig Doku - Referenzen
14. 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
15. Extends {% extends '@Contao/ce_template_block.html.twig' %} {% block main %} <h2>Wir Erweitern das Template um diese zusätzliche Überschrift</h2> {{ parent() }} {% endblock %} 30.04/01.05.2022 Contao Camp 2022 15
16. Twig in Contao Sollten wir Twig-Templates in Contao jetzt schon nutzen? Contao Camp 2022 16 30.04/01.05.2022
17. 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
18. 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
19. Nachbau Template ce_text.html5 (1. Variante) HTML5-Template 30.04/01.05.2022 Contao Camp 2022 19 <?php $this->extend('block_searchable'); ?> <?php $this->block('content'); ?> <?php if (!$this->addBefore): ?> <?= $this->text ?> <?php endif; ?> <?php if ($this->addImage): ?> <?php $this->insert('image', $this->arrData); ?> <?php endif; ?> <?php if ($this->addBefore): ?> <?= $this->text ?> <?php endif; ?> <?php $this->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
20. 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
21. Nachbau Template ce_text.html5 (2. Variante) HTML5-Template 30.04/01.05.2022 Contao Camp 2022 21 <?php $this->extend('block_searchable'); ?> <?php $this->block('content'); ?> <?php if (!$this->addBefore): ?> <?= $this->text ?> <?php endif; ?> <?php if ($this->addImage): ?> <?php $this->insert('image', $this->arrData); ?> <?php endif; ?> <?php if ($this->addBefore): ?> <?= $this->text ?> <?php endif; ?> <?php $this->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
22. 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
23. 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
24. 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
25. 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
26. 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
27. Blöcke überschreiben - global {% extends '@Contao/fe_page’ %} {% block main %} <p>zusätzlicher Text vom Template im globalen Template-Ordner</p> {{ parent() }} {% endblock %} {% block footer %} <p>zusätzlicher Inhalt vom Template im globalen Template-Ordner</p> {{ parent() }} {% endblock %} 30.04/01.05.2022 Contao Camp 2022 27 globaler Template Ordner
28. Blöcke überschreiben - Theme {% extends '@Contao/fe_page' %} {% block main %} <h1>{{ pageTitle }}</h1> {{ parent() }} {% endblock %} {% block footer %} <p>zusätzlicher Inhalt vom Template aus Theme-Ordner</p> {{ parent() }} {% endblock %} 30.04/01.05.2022 Contao Camp 2022 28 Theme Ordner
29. Blöcke überschreiben - Partials verwenden {% extends '@Contao/fe_page' %} {% block main %} {% include '@Contao/_main_partial.html.twig' %} {% endblock %} {% block footer %} <p>zusätzlicher Inhalt vom Template aus Theme-Ordner</p> {{ parent() }} {% endblock %} 30.04/01.05.2022 Contao Camp 2022 29 Theme Ordner
30. Partial <main id="main"> <div class="inside"> <h1>{{ pageTitle }}</h1> {{ main|raw }} </div> {{ contao_sections('main') }} </main> 30.04/01.05.2022 Contao Camp 2022 30 _main_partial.html.twig
31. 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
32. 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
33. 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 info@webdesign-marenlange.de www.webdesign-marenlange.de 30.04/01.05.2022 Contao Camp 2022 33