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".