Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Ü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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Partial

{{ pageTitle }}

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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