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
   

   View Slide

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
   

   View Slide

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

   View Slide

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

   View Slide

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
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

11. 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
    

    View Slide

12. 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
    

    View Slide

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

    View Slide

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
    

    View Slide

15. 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
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

19. Nachbau Template ce_text.html5 (1. Variante)
    HTML5-Template
    30.04/01.05.2022
    Contao Camp 2022
    19
    extend('block_searchable'); ?>
    block('content'); ?>
    addBefore): ?>
    = $this->text ?>
    
    addImage): ?>
    insert('image', $this->arrData); ?>
    
    addBefore): ?>
    = $this->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
    

    View Slide

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
    

    View Slide

21. Nachbau Template ce_text.html5 (2. Variante)
    HTML5-Template
    30.04/01.05.2022
    Contao Camp 2022
    21
    extend('block_searchable'); ?>
    block('content'); ?>
    addBefore): ?>
    = $this->text ?>
    
    addImage): ?>
    insert('image', $this->arrData); ?>
    
    addBefore): ?>
    = $this->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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

27. 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
    

    View Slide

28. 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
    

    View Slide

29. 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
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide