Layout Twig Contao 5.6: Einbinden von CSS/JS-Files

[Toubibe]

Mit dem Erscheinen von Contao 5.6 machte ich mich nun einige Stunden hinter das Layout mit dem default.html.twig.
Während die Einrichtung zusätzlicher Slots fehlerfrei klappte, gelingt es mir trotz diversen Versuchen und Recherchen nicht, CSS-Stylesheets einzubinden.
Ich habe das praktische Template Studio benutzt und bin insbesondere nach der Entwickler-Dokumentation vorgegangen (Reference>Twig>Tags>add), Fehlermeldung im Template Studio gibt es keine, aber trotz Neuaufbau des Cache und Leeren des Browsercaches wird die CSS-Datei einfach nicht eingebunden. Auch mit js und zum Beispiel 'content' schaffe ich es nicht.
Vermutlich stehe ich irgendwo auf dem Schlauch...

{% extends "@Contao/layout/default.html.twig" %}

{#
    Adjust how any blocks of parent or used component templates are rendered.
    Try typing "block" or "use" to get autocompletion for available options.
#}
{% use "@Contao/component/_stylesheet.html.twig" %}
{% block head %}
    {{ parent() }}
    {# Adds a stylesheet #}
{% add "style" to stylesheets %}
    {% with {file: asset('files/css/style.css')} %}
        {{ block('stylesheet_component') }}
    {% endwith %}
{% endadd %}
{% endblock %}

[Spooky]

Dieses neue Feature ist noch experimentell.

Verwendest du für deine Assets so etwas wie Webpack?

[Franko]

An den Vorgehensweisen & bez. möglicher Optimierungen wird gearbeitet:
s.a.: https://github.com/contao/contao/issues/8705

[Toubibe]

Dieses neue Feature ist noch experimentell.

Verwendest du für deine Assets so etwas wie Webpack?

Nein, ich habe mich an einer nativen Neuinstallation meine ersten Versuche mit dem layout twig gemacht.

[Toubibe]

An den Vorgehensweisen & bez. möglicher Optimierungen wird gearbeitet:
s.a.: https://github.com/contao/contao/issues/8705

Dieses neue Feature ist noch experimentell.

Alles klar, werde mich noch etwas in Geduld üben.
Schön wäre natürlich, wenn in Zukunft solche Basis-Anpassungen wie bisher bei fe_page vom Backend her steuerbar wären und so ebenfalls wie bisher nur "ausserordentliche" Veränderungen am Layout der manuellen Einträge bedürfte. Aber ich gehe davon aus, dass dies wohl vom Core-Team schon längst so angedacht ist

[zoglo]

Alles klar, werde mich noch etwas in Geduld üben.
Schön wäre natürlich, wenn in Zukunft solche Basis-Anpassungen wie bisher bei fe_page vom Backend her steuerbar wären und so ebenfalls wie bisher nur "ausserordentliche" Veränderungen am Layout der manuellen Einträge bedürfte. Aber ich gehe davon aus, dass dies wohl vom Core-Team schon längst so angedacht ist

Die Idee ist es, dass du das nun im Template machst. Gerade für einfache Sachen braucht es ja keine Checkbox oder Einstellungen, für die es dann in der Datenbank gespeichert werden muss. Moritz hat hier sicher schon einige Ideen, wie man das Template-Studio anpassen wird

Denn Datenbank kannst du nicht so einfach versionieren und Layout ist ja schon Theme Sache

[RalfPuppe]

{% extends "@Contao/layout/default.html.twig" %}

{% block head %}
    <meta charset="UTF-8">
    <meta name="generator" content="Contao Open Source CMS">
    {%- block title %}
        {% set title = head.title|default %}
        {% if title and contao.page.rootPageTitle|default %}
            {% set title = title ~ ' - ' ~ contao.page.rootPageTitle %}
        {% endif %}
         <title>{{ title }}</title>
    {%- endblock -%}

    {# @var \Contao\CoreBundle\Routing\ResponseContext\HtmlHeadBag\HtmlHeadBag head_bag #}
    {% set head_bag = response_context.head %}

    <meta name="robots" content="{{ head_bag.metaRobots }}">
    <meta name="description" content="{{ head_bag.metaDescription|u.truncate(320, '…') }}">
    {% if page['enableCanonical'] -%}
        <link rel="canonical" href="{{ head_bag.canonicalUriForRequest(app.request) }}">
    {% endif %}
    
    {# Eigenes CSS-File #}
    <link rel="stylesheet" href="files/css/iliyev.css">

    {%- block end_of_head -%}
        {% for element in response_context.end_of_head %}
            {{ element|raw }}
        {% endfor %}
    {%- endblock -%}
{%- endblock -%}

[t.mayer]

{% extends "@Contao/layout/default.html.twig" %}

{% block head %}
<meta charset="UTF-8">
<meta name="generator" content="Contao Open Source CMS">
{%- block title %}
{% set title = head.title|default %}
{% if title and contao.page.rootPageTitle|default %}
{% set title = title ~ ' - ' ~ contao.page.rootPageTitle %}
{% endif %}
<title>{{ title }}</title>
{%- endblock -%}

{# @var \Contao\CoreBundle\Routing\ResponseContext\HtmlHea dBag\HtmlHeadBag head_bag #}
{% set head_bag = response_context.head %}

<meta name="robots" content="{{ head_bag.metaRobots }}">
<meta name="description" content="{{ head_bag.metaDescription|u.truncate(320, '…') }}">
{% if page['enableCanonical'] -%}
<link rel="canonical" href="{{ head_bag.canonicalUriForRequest(app.request) }}">
{% endif %}

{# Eigenes CSS-File #}
<link rel="stylesheet" href="files/css/iliyev.css">

{%- block end_of_head -%}
{% for element in response_context.end_of_head %}
{{ element|raw }}
{% endfor %}
{%- endblock -%}
{%- endblock -%}

Danke @RalfPuppe für Deinen Workaround!

Ggf. (bin kein Twig-Experte) geht's updatesicherer und kürzer wie folgt?
Hab noch die Einbindung einer .js-Datei am Body-Ende ergänzt.

{% extends "@Contao/layout/default.html.twig" %}

{% block head %}
    {{ parent() }}
    <link rel="stylesheet" href="/files/css/css-file.css">
{%- endblock -%}

{% block body %}
    {{ parent() }}
    <script src="/files/js/js-file.js"></script>
{%- endblock -%} 

[k-webdesign]

Verstehe ich das richtig, dass das Basis-Template der Seite, sowie das Layout, per default keine Möglichkeit geben, CSS einzubinden? Das ist absolut am User vorbei.

Ich verstehe den Sinn, dass dadurch Flexibilität erreicht wird. Aber es sollte für den ganz normalen Nutzer irgendein Basispfad vorgegeben sein, dass man es einfach in z.B. files/css/styles.css ablegen kann und dort gefunden wird. Es ist einfach eine Hürde, die meiner Meinung nach vieles unnötig erschwert.

[Spooky]

Verstehe ich das richtig, dass das Basis-Template der Seite, sowie das Layout, per default keine Möglichkeit geben, CSS einzubinden?

Doch klar, du kannst natürlich im Template einbinden was du willst. Im Template Studio werden dafür voraussichtlich dann auch Hilfs-Funktionen hinzugefügt.

[k-webdesign]

Wo? Im "Twig-Layout mit Slots" kann ich die Elemente einbinden, sonst nichts

[Spooky]

Wo? Im "Twig-Layout mit Slots" kann ich die Elemente einbinden, sonst nichts

Im Template deines Layouts (templates/layout/default.html.twig - wird aber noch zur templates/layout/regular.html.twig umbenannt wahrscheinlich).

[zoglo]

Du kannst hierfür die asset component von Symfony nutzen @k-webdesign:

Wenn die CSS so heißt und hier liegt:
files/big_animated_flashy_button_for_my_clients.css

{% use "@Contao/component/_stylesheet.html.twig" %}

{% add "big_animated_flashy_button_for_my_clients" to stylesheets %}
    {% with {file: asset('/files/big_animated_flashy_button_for_my_clients.css'))} %}
        {{ block('stylesheet_component') }}
    {% endwith %}
{% endadd %} 

Sowas wie Autovervollständigung kommt ja ins Templatestudio. Moritz sein Vortrag auf der Konferenz 25 hat das Template-Studio gut erklärt

[Kopfnuss]

Moritz sein Vortrag auf der Konferenz 25 hat das Template-Studio gut erklärt

Gibt es davon noch ein Video?

[BugBuster]

Guckst du hier, ganz unten. Datum ist geraten, es hieß in 3-4 Wochen nach Konferenz.
https://contao.ninja/contao-konferenz-2025.html

[Kopfnuss]

Guckst du hier, ganz unten. Datum ist geraten, es hieß in 3-4 Wochen nach Konferenz.
https://contao.ninja/contao-konferenz-2025.html

Danke, dann mach ich in 3-4 Wochen einen Video-Tag

[Spooky]

iirc werden die Videos dann nur für die Konferenzteilnehmer*innen zur Verfügung stehen, oder? Erst später irgendwann für den Rest.

[Kopfnuss]

Naja, es würde schon Sinn machen, die Videos nach 3–4 Wochen auch denjenigen anzubieten, die nicht auf der Konferenz waren. Dafür wäre ich auch bereit zu bezahlen – so wie es offenbar ohnehin geplant ist.

[Spooky]

Genau, über die Contao Academy kannst du sie beziehen dann.

[t.mayer]

Du kannst hierfür die asset component von Symfony nutzen @k-webdesign:

{% use "@Contao/component/_stylesheet.html.twig" %}

{% add "big_animated_flashy_button_for_my_clients" to stylesheets %}
    {% with {file: asset('/files/big_animated_flashy_button_for_my_clients.css'))} %}
        {{ block('stylesheet_component') }}
    {% endwith %}
{% endadd %} 

Wenn ich dem Vorschlag von zoglo folge und im Template-Studio unter component/_stylesheet ein Template mit dem Code erstelle, erhalte ich folgende Fehlermeldung:

Template "@Contao_Global/component/_stylesheet.html.twig" cannot be used as a trait in "@Contao/content_element/swiper.html.twig". 

[462]

Ich versuche gerade eine Seite zu erneuern und dachte mir, ich probiere das Seitenlayout mit Slots mal aus. Für einen normalen User ist das so schon eine ganz schöne Zumutung. Rund ist das noch nicht wirklich!

Aus Entwicklersicht hat das alles schon seine Berechtigung:

• maximale Flexibilität
• graduelle Einstellung
• saubere Programmierung
• revisionssicher und git-fähig

Aus Anwendersicht mit erster und mittlerer Erfahrung:

• Wie bekomme ich denn nun mein CSS (und JS) da rein?
• Muss ich wirklich in den Templates rumeditieren?
• Muss ich jetzt auch noch Symfony und Twig lernen?
• Integriertes scss ist schon cool, geht das jetzt überhaupt noch?
• Muss ich nun für scss auch noch einen Precompiler und gar eine lokale Entwicklungsumgebung installieren?
• Wo packe ich die Dateien hin, müssen die in den Theme-Pfad? Ins public?
• Wofür ist eigentlich überhaupt noch der Theme-Pfad einstellbar?
• Wozu git fürs Seitenlayout? Eigentlich gibt es hier keine Änderungen und die Zuordnung von Modulen oder Inhaltselementen ist da auch nicht mit drin.
• Ist die Seitenlayouteinstellung im Backend überhaupt noch erforderlich? Da wird ja eh nichts mehr eingestellt. Die Module oder Inhaltselemente könnte ich ja auch gleich noch per Insert-Tag im Seiten-Template mit einbinden.

Ich könnte mir folgendes vorstellen:

• Die Einstellungen aus den "alten" Seitenlayouteinstellungen für css / js (Externe Stylesheets/Externe JavaScripts) zu übernehmen. Die gibt es ja eigentlich bereits und sind auch graduell einstellbar.
• Ergänzt um die Auswahl von kompletten Pfaden, in denen dann alle Dateien gefunden und eingebunden werden. Gerade bei scss wäre dies ganz hilfreich, so dass auch viele kleine Dateien, einfach in Summe, nach Pfaden sortiert und ohne jede einzeln auszuwählen, eingebunden werden können. So kann man auch die sich nicht automatisch aktualisierenden Partials beim scss vermeiden.
• Die Liste der eingebundenen Elemente ergänzen:
  
  • Spalte Layoutbereich editierbar (Combobox). Bei neuem Namen wird automatisch ein neuer Slot in der sich ergebenden Reihenfolge erzeugt.
  • Eine neue Spalte "Id" (insbesondere für die ergänzten Slots).
  • Vielleicht sogar eine hierarchische Anordenbarkeit.
• Der Titel-Tag ist schon ganz praktisch, insbesondere da er original verkehrt herum ist (vom Allgemeinen zum Speziellen und nicht umgekehrt).

Wenn dies nicht reicht, beispielsweise die Reihenfolge nicht passt, dann kann das Template ja immer noch angepasst werden. Eine Template-Anpassung sollte aber grundsätzlich nicht unbedingt die erste Wahl oder gar der Standard sein.

PS: Und Contao sollte für Web-Designer und Redakteure sein. Ansonsten kann man ja gleich alles direkt in Symfony machen.

[Spooky]

Die Twig Layouts sind noch experimentell. Du kannst sie ausprobieren - aber je nachdem wirst du sie nicht produktiv einsetzen können, wenn dir noch gewisse Dinge fehlen oder anderweitig nicht funktionieren. Die (interne) Funktionsweise wird außerdem gerade nochmal überdacht. Das kann hier mitverfolgt werden: https://github.com/contao/contao/pull/9323

PS: Und Contao sollte für Web-Designer und Redakteure sein.

So positioniert sich Contao allerdings nicht.

[Spooky]

• Der Titel-Tag ist schon ganz praktisch, insbesondere da er original verkehrt herum ist (vom Allgemeinen zum Speziellen und nicht umgekehrt).

Was genau meinst du damit?

[462]

Original steht {{page:: pageTitle}} - {{page::rootPageTitle}}, das heißt der seitenspezifische Text zuerst und der allgemeine hinten. Ich sehe gerade, dass das wohl auf einigen Seiten so üblich ist: YouTube, Stack Overflow.

Für eine Art Breadcrumb ist es andersherum meines Erachtens logischer {{page::rootPageTitle}} – {{page:: pageTitle}} und in der Anzeige in den Browser-Tabs angenehmer, wie zum Beispiel: "FIRMA – Impressum". Auch das ist wiederum manchmal so üblich: GitHub

Letztendlich ist das also Geschmacksache und so sollte es schon einstellbar sein.

[Spooky]

Für eine Art Breadcrumb ist es andersherum meines Erachtens logischer {{page::rootPageTitle}} – {{page:: pageTitle}} und in der Anzeige in den Browser-Tabs angenehmer, wie zum Beispiel: "FIRMA – Impressum".

Das habe ich noch nie irgendwo so gesehen. Aber was genau hat das mit den neuen Twig Layouts zu tun?

[462]

Github macht es beispielsweise so.

Und das war nur eine Anmerkung, wenn die Seitenlayouteinstellungen ausgedünnt werden.

[mlweb]

Original steht {{page:: pageTitle}} - {{page::rootPageTitle}}, das heißt der seitenspezifische Text zuerst und der allgemeine hinten. Ich sehe gerade, dass das wohl auf einigen Seiten so üblich ist: YouTube, Stack Overflow.


Letztendlich ist das also Geschmacksache und so sollte es schon einstellbar sein.

Hat zwar nichts mit dem neuen Seitenlayout zu tun aber mit SEO und Barrierefreiheit und da ist es genauso wie es ist richtig (zumindest wie das derzeit von Browsern ausgewertet wird)

[Spooky]

Github macht es beispielsweise so.

Unter welcher URL zum Beispiel? Spontan hätte ich keine gefunden, wo das so herum wäre bei GitHub. z.B.:

1. https://github.com/contao/contao/issues/79: <Issue title> · <Issue number> · <Repository>
2. https://github.com/contao/contao/issues: Issues · <Repository>
3. https://github.com/projects: Projects

Also auch immer der spezielle Titel zuerst, danach der allgemeine Titel - oder auch gar kein allgemeiner Titel.

Und das war nur eine Anmerkung, wenn die Seitenlayouteinstellungen ausgedünnt werden.

Das Konzept der Twig Layouts ist, dass du solche Dinge via Template Anpassung machst, was ja auch Sinn macht.

[462]

Wohl mein Irrtum. Der Browser zeigt dies an, wenn die Seite noch ungeöffnet im Cache hängt. Nach Öffnen ist das geändert.
Zwischenablage_02-03-2026_01.png

[462]

Das Konzept der Twig Layouts ist, dass du solche Dinge via Template Anpassung machst, was ja auch Sinn macht.

Ja, beim

<title>{{ title }}</title>

ist es ja nicht so das Thema. Es ging ja hier doch eigentlich um die Verwaltung der css- und js-Dateien.

[Spooky]

Die fügst du auch durch Template Anpassungen ein. Es wird da aber noch gewisse Helfer-Funktionen brauchen (also einerseits Twig-Funktionen und andererseits Features im Template-Studio, um das zu erleichtern).

[ErichM]

Frage: Bestünde nicht die Möglichkeit, die Layout-Angaben in einer Config-Datei zu hinterlegen? Ähnlich wie bei den Einstellungen.

[zoglo]

Frage: Bestünde nicht die Möglichkeit, die Layout-Angaben in einer Config-Datei zu hinterlegen? Ähnlich wie bei den Einstellungen.

https://github.com/richardhj/contao-theme-framework

Das brauchst du aber generell auch nicht, du kannst ja nun auch mit den Twig-Templates arbeiten, die sind ja DB unabhängig.. und mit der Symfony Asset Component und weiteren Config Einstellungen kannst du es ja theoretisch schon so vorbereiten.

[kubjo]

So positioniert sich Contao allerdings nicht.

Darf man fragen wie das gemeint ist? Für wen positioniert sich denn Contao sonst?

[Spooky]

Für Web Entwickler*innen, tendierend zum Enterprise Segment.

[mlweb]

Ich würd schon sagen auch für Webdesigner. Ist immer die Frage wie/wo man sich als Webdesigner positioniert. Umfassende Weiterbildung in der Technik, die das CMS verwendet (z.B. Umgang mit Twig) ist da m.E. genauso Pflicht, wie die ständige Weiterentwicklung in CSS.
Für Redakteure ist Contao dann gut geeignet, wenn der Webentwickler und/oder der Webdesigner das System so eingerichtet hat, dass der Redakteur einfach das tun kann was er soll - Inhalte einpflegen.

[ErichM]

@zoglo: Danke für die schnelle Antwort.

Ich meinte ja anstelle Twig. Eine Config-Datei wäre ja auch DB-unabhängig.

Z.B. bei einer CSS-Datei reicht es dann wie bisher aus, nur den Dateinamen vorzugeben.
Die entsprechende HTML-Anweisung wird durch das CMS generiert.

Meine Meinung ist, dass es mit den Twig-Templates aufwändiger wird. Es ist eine gewisse "Einarbeitung" in Twig und dem Contao-Template erforderlich.
Ob dies der "normale" Contao-Nutzer so einfach hinbekommt bezweifle ich im Augenblick.

[mlweb]

Ob dies der "normale" Contao-Nutzer so einfach hinbekommt bezweifle ich im Augenblick.

Was ist für Dich der "normale" Contao-Nutzer?

[ErichM]

Mit dem Begriff "normal" habe ich mich nicht ganz richtig ausgedrückt.
Ich meinte damit, Nutzer die mit Contao ihre Webseite erstellen, aber wenig Wissen z.B. über HTML oder Programmierung haben.
Z.B. private Seiten oder Seiten von Vereinen.

[mlweb]

Siehe dazu die Antwort von @Spooky

https://community.contao.org/de/show...l=1#post601644
https://community.contao.org/de/show...l=1#post601675

Private Nutzer und Vereine werden sich dann auch schlau machen müssen oder entsprechend an einigen Stellen Hilfe in Anspruch nehmen müssen, wenn sie Contao nutzen wollen.