Layout Twig Contao 5.6: Einbinden von CSS/JS-Files
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...
Code:
{% 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 %}
Falls es noch nicht zu spät ist, mein Work-Around
HTML-Code:
{% 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 -%}
Workaround von RalfPuppe gekürzt?
Zitat:
Zitat von
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\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.
PHP-Code:
{% 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 -%}
