Hallo zusammen,
ich habe mich in den letzten Wochen einmal mit den Release Candidates von Contao 5.6 beschäftigt, um mich in die Twig-Templates ein wenig reinzudenken. Die Syntax habe ich jetzt so weit kapiert, auch die Logik des Template Studios ist mir jetzt so weit klar.
Allerdings fehlen jetzt bei den 6.5-er Seitenlayouts (wenn als "Twig mit Slots" eingestellt) die ganzen komfortablen Möglichkeiten, "eigene Layoutbereiche", hinzuzufügen, Scripte und Styles auszuwählen bzw. vorgegebene per Checkbox zu aktivieren (jquery, Slider, ...).
Eigene Layout-Bereiche habe ich als Slots eingefügt und sie werden wie gewohnt ausgegeben.
Eigenes CSS habe ich eingebunden, allerdings wird das aus dem Ordner der Dateiverwaltung geladen, nicht wie bisher aus dem Assets-Ordner. Soll das so sein? Ähnliches gilt für JavaScript.
Für die Einbindung z.B. einen Sliders oder eines Akkordions, musste ich ja bisher das entsprechende JavaScript im Seitenlayout aktivieren, für manche Erweiterungen zusätzliche, damit sie funktionieren.
Deshalb meine Frage: Wie kann ich solche Einstellungen jetzt sinnvoll machen.
Hier mal mein Template /page/regular.html.twig (der obere Teil aus dem Template-Studio). Was könnte man daran noch verbessern?
Code:
{% extends "@Contao/page/regular.html.twig" %}
{% use "@Contao/component/_stylesheet.html.twig" %}
{% block head %}
{# Styles einbinden #}
{% add "basic_css" to stylesheets %}
{% with {
file: asset('files/themes/frontend/styles/basic.min.css'),
media: 'all',
enable: true,
lazy: false
} %}
{{ block('stylesheet_component') }}
{% endwith %}
{% endadd %}
{# Adobe Fonts (Typekit) #}
{% add "adobe_fonts" to stylesheets %}
{% with {
file: 'https://use.typekit.net/cjc4hha.css',
media: 'all',
enable: true,
lazy: false
} %}
{{ block('stylesheet_component') }}
{% endwith %}
{% endadd %}
{# Font Awesome (wird später lokal ersetzt) #}
<script src="https://kit.fontawesome.com/08f7e05e3e.js" crossorigin="anonymous"></script>
{# 2) dann den Core-<head> ausgeben #}
{{ parent() }}
{% endblock %}
{# Modifikation: @Contao/page/regular.html.twig – block body ersetzen #}
{% block body %}
{# Topbar (CTA) #}
{% slot topbar %}
<div id="topbar"><div class="topbar-content">{{ slot() }}</div></div>
{% endslot %}
{# Header als Container für Logo und Hauptmenü #}
{% slot header %}
<header id="site-header" role="banner"><div class="header-content">{{ slot() }}</div></header>
{% endslot %}
{# Wrapper mit Hero und Main-Content #}
<div id="wrapper">
{% slot hero %}
<div id="hero">{{ slot() }}</div>
{% endslot %}
{% slot main %}
<main id="main" role="main" tabindex="-1">{{ slot() }}</main>
{% endslot %}
</div>
{# Footer nach dem Wrapper #}
{% slot footer %}
<footer id="footer" role="contentinfo"><div class="footer-content">{{ slot() }}</div></footer>
{% endslot %}
{# end_of_body aus Vorlage übernommen #}
{% block end_of_body %}
{{ parent() }}
{% for element in (response_context.end_of_body|default([])) %}
{{ element|raw }}
{% endfor %}
{{ response_context.json_ld_scripts|default|raw }}
<script src="/files/themes/frontend/javascript/stickyHeader.min.js"></script>
{% endblock %}
{% endblock %}
Danke und viele Grüße
Timo
Seitenlayouts mit Twig
Zitieren
Zitat von intradesign
Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.