$30 off During Our Annual Pro Sale. View Details »

Twig Templates in Contao 5

Maren Lange
October 23, 2023
110

Twig Templates in Contao 5

Nutzung der neuen Twig-Templates in Contao 5
Eine Einfühtung für Frontendentwickler

Maren Lange

October 23, 2023
Tweet

Transcript

  1. Contao Konferenz 2023 Kiel 19.10-20.10.2023
    Twig Templates in Contao 5
    Eine Einführung für Anwender
    1

    View Slide

  2. Contao Konferenz 2023 Kiel 19.10-20.10.2023
    Ü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
    2

    View Slide

  3. Contao Konferenz 2023 Kiel 19.10-20.10.2023
    Inhalt
    • Was ist Twig?
    • Syntax von Twig
    • Twig-Templates verwalten
    • Twig-Templates anpassen
    3

    View Slide

  4. Contao Konferenz 2023 Kiel 19.10-20.10.2023
    Was ist Twig 4

    View Slide

  5. Contao Konferenz 2023 Kiel 19.10-20.10.2023
    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
    • PhpStorm
    • Visual Studio Code
    • Notepad++
    • Sublime Text
    • TextMate
    5

    View Slide

  6. Contao Konferenz 2023 Kiel 19.10-20.10.2023
    Müssen wir Twig-Templates in Contao 5 nutzen?
    • Twig-Templates sind für die meisten Inhaltselemente in Contao 5 der Standard
    • PHP-Templates (HTML5) werden irgendwann komplett abgeschaltet
    • Entwickler von Erweiterungen können komplett auf Twig-Templates setzen
    • Ersteller von Themes können komplett auf Twig-Templates setzen
    6

    View Slide

  7. Contao Konferenz 2023 Kiel 19.10-20.10.2023
    Syntax von Twig 7

    View Slide

  8. Contao Konferenz 2023 Kiel 19.10-20.10.2023
    Bezeichner 8
    • Variable ausgeben
    {{ … }}
    • Kommandos und Kontrollstrukturen z.B. If-Abfragen
    {% … %}
    • Kommentare
    {# … #}

    View Slide

  9. Contao Konferenz 2023 Kiel 19.10-20.10.2023
    Variable
    {# Variable auf den Wert -5 setzen #}
    {% set test = -5 %}
    {# Variable ausgeben #}
    {{ test }}
    9

    View Slide

  10. Contao Konferenz 2023 Kiel 19.10-20.10.2023
    Filter
    {# Variable auf den Wert -5 setzen #}
    {% set test = -5 %}
    {# Variable filtern und ausgeben #}
    {{ test|abs }}
    10
    Twig Doku – Filter

    View Slide

  11. Contao Konferenz 2023 Kiel 19.10-20.10.2023
    For-Schleife
    {% set test = ['mein erster Wert', 'mein zweiter Wert','mein
    dritter Wert'] %}

    {% for item in test %}
    {{ item }}
    {% endfor %}

    11

    View Slide

  12. Contao Konferenz 2023 Kiel 19.10-20.10.2023
    If-Abfragen
    {% set test = "mein Inhalt" %}
    {% if test %}
    Ausgabe: Die Variable hat folgenden Inhalt:
    {{ test }}
    {% else %}
    Ausgabe: Die Variable hat keinen Inhalt.
    {% endif %}
    12

    View Slide

  13. Contao Konferenz 2023 Kiel 19.10-20.10.2023
    Twig-Templates verwalten 13

    View Slide

  14. Contao Konferenz 2023 Kiel 19.10-20.10.2023
    Ordnerstruktur
    • eigene Templates liegen im Ordner /templates
    • Contao unterscheidet zwischen
    • globalen Templates
    • themespezifischen Templates
    14

    View Slide

  15. Contao Konferenz 2023 Kiel 19.10-20.10.2023
    Globale Templates
    • innerhalb von /templates in einer speziellen Ordnerstruktur
    • Unterordner content_element ist z.B. für Inhaltselemente vorgesehen
    • Contao legt ein neues globales Twig-Template automatisch in den richtigen
    Unterordner
    • gelten für alle Elemente des jeweiligen Typs
    15

    View Slide

  16. Contao Konferenz 2023 Kiel 19.10-20.10.2023
    Globale Varianten-Templates
    • müssen im Unterordner der speziellen Struktur angelegt werden
    • Unterordner dafür müssen selbst angelegt werden
    • globale Varianten-Templates können zusätzlich zum globalen Template vorhanden sein
    • Name des Templates unter Einhaltung der Namenskonventionen frei wählbar
    16
    Namenskonventionen Contao

    View Slide

  17. Contao Konferenz 2023 Kiel 19.10-20.10.2023
    Themespezifische Templates
    • innerhalb des Theme-Ordners liegen themespezifische Templates
    • innerhalb des Theme-Ordners gleiche spezifische Ordnerstruktur
    • Struktur muss selbst angelegt werden
    • themespezifische Varianten-Templates sind ebenfalls möglich
    • besonderer Status, weil sie am spezifischsten sind, aber nicht Teil der
    Templatehierarchie sind
    • erst zur Laufzeit wird entschieden, ob ein themespezifisches Template angewendet
    wird
    • es können nur Templates angepasst werden, die als globales Template vorhanden sind
    17

    View Slide

  18. Contao Konferenz 2023 Kiel 19.10-20.10.2023
    Twig-Templates anpassen 18

    View Slide

  19. Contao Konferenz 2023 Kiel 19.10-20.10.2023
    Textelement mit zusätzlichem Text erweitern
    {% extends "@Contao/content_element/text.html.twig" %}
    {% block text %}
    {{ parent() }}
    Mein zusätzlicher Text im globalen
    Varianten-Template.
    {% endblock %}
    19
    Neues Core-Template für Textelemente

    View Slide

  20. Contao Konferenz 2023 Kiel 19.10-20.10.2023
    HTML-Attribute anpassen
    {% extends "@Contao/content_element/text.html.twig" %}
    {% set text_attributes =
    attrs(text_attributes|default).addClass('description') %}
    20

    View Slide

  21. Contao Konferenz 2023 Kiel 19.10-20.10.2023
    Erweitern
    {% extends "@Contao/…" %}
    21
    • Template (Parent-Template) erweitern
    • ohne weiteren Anpassungen wird genau der Inhalt des Parent-Templates
    ausgegeben (alle Blöcke und Attribute des Parent-Templates)
    • mit der Funktion attrs() können Attribute angepasst werden
    • Anpassungen sind nur innerhalb der verfügbaren Blöcke möglich
    • mit parent() wird der Inhalt des ursprünglichen Blocks ausgegeben
    • es kann immer nur ein Parent-Template geben

    View Slide

  22. Contao Konferenz 2023 Kiel 19.10-20.10.2023
    HTML in Überschriften
    {% use "@Contao/component/_headline.html.twig" %}
    {%- block headline_inner -%}
    {{ headline.text|insert_tag|raw }}
    {%- endblock -%}
    22
    DCA-Anpassung ist wie in Contao 4 auch Voraussetzung
    Filter für HTML-Ausgabe
    Achtung! Durch die Verwendung des Filters raw entsteht ein Sicherheitsrisiko. Das sollte man unbedingt
    vermeiden und je nach Anwendungsszenario anderen Lösungen den Verzug geben.

    View Slide

  23. Contao Konferenz 2023 Kiel 19.10-20.10.2023
    Horizontale Wiederverwendung
    {% use "@Contao/…" %}
    23
    • mit use werden Blöcke und Attribute eines anderen Templates zur Verfügung gestellt
    • Blöcke werden nicht automatisch ausgegeben
    • Blöcke können ausgegeben werden
    • Blöcke können über die Blockfunktion auch mehrfach verwendet werden
    • Blöcke können vorhandene Blöcke aus Parent-Templates verändern
    • es können beliebig viele andere Templates in einem Template verwendet werden

    View Slide

  24. Contao Konferenz 2023 Kiel 19.10-20.10.2023
    weitere Informationen
    • Twig Doku
    • Contao Handbuch
    • Contao Entwickler-Doku
    • Alle neuen Core-Templates auf Git
    • Contao Tech Talk mit Moritz Vondano
    24

    View Slide

  25. Contao Konferenz 2023 Kiel 19.10-20.10.2023
    Danke für die Aufmerksamkeit
    Danke an Moritz Vondano vom Contao
    Core-Team für die Umsetzung dieses
    Features
    Webdesign
    Dr. Maren Lange
    Berneckstr. 41
    72275 Alpirsbach
    +49 7444 955 62 44
    [email protected]
    www.webdesign-marenlange.de
    25

    View Slide