Twig Templates in Contao 5

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

Transcript

1. Contao Konferenz 2023 Kiel 19.10-20.10.2023 Twig Templates in Contao 5 Eine Einführung für Anwender 1
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
3. Contao Konferenz 2023 Kiel 19.10-20.10.2023 Inhalt • Was ist Twig? • Syntax von Twig • Twig-Templates verwalten • Twig-Templates anpassen 3
4. Contao Konferenz 2023 Kiel 19.10-20.10.2023 Was ist Twig 4
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
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
7. Contao Konferenz 2023 Kiel 19.10-20.10.2023 Syntax von Twig 7
8. Contao Konferenz 2023 Kiel 19.10-20.10.2023 Bezeichner 8 • Variable ausgeben {{ … }} • Kommandos und Kontrollstrukturen z.B. If-Abfragen {% … %} • Kommentare {# … #}
9. Contao Konferenz 2023 Kiel 19.10-20.10.2023 Variable {# Variable auf den Wert -5 setzen #} {% set test = -5 %} {# Variable ausgeben #} {{ test }} 9
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
11. Contao Konferenz 2023 Kiel 19.10-20.10.2023 For-Schleife {% set test = ['mein erster Wert', 'mein zweiter Wert','mein dritter Wert'] %} <ul> {% for item in test %} <li>{{ item }}</li> {% endfor %} </ul> 11
12. Contao Konferenz 2023 Kiel 19.10-20.10.2023 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 %} 12
13. Contao Konferenz 2023 Kiel 19.10-20.10.2023 Twig-Templates verwalten 13
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
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
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
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
18. Contao Konferenz 2023 Kiel 19.10-20.10.2023 Twig-Templates anpassen 18
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() }} <p class="attention">Mein zusätzlicher Text im globalen Varianten-Template.</p> {% endblock %} 19 Neues Core-Template für Textelemente
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
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
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.
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
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
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 info@webdesign-marenlange.de www.webdesign-marenlange.de 25