Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Twig Templates in Contao

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.

Cd1d20c1f05447fece9ac76848201df1?s=128

Maren Lange

May 03, 2022
Tweet

More Decks by Maren Lange

Other Decks in How-to & DIY

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