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.

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

    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
    [email protected]
    www.webdesign-marenlange.de
    30.04/01.05.2022
    Contao Camp 2022
    33

    View Slide