mod_article.html.twig

Die Breitenbegrenzung für die Website wird über die Artikel gesteuert. Die Breite kann unterschiedlich gesetzt oder auch völlig weggelassen werden. So gewinnen wir eine gewisse Flexilbilität in der Darstellung.

Das Template mod_article.html5.twig wird angepasst und als default Template für Artikel verwendet.

mod_article

• die Utility-Klasse .flow wird hinzugefügt utilities/_spacing.scss
• <div class="inside">wird um die Inhalte gewrappt abstracts/_mixins.scss

mod_article.html.twig

{% extends "@Contao/mod_article.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.
#}

{% set wrapperAttributes = attrs(cssID)
    .addClass([class, 'flow'])
    .mergeWith(wrapperAttributes|default)
%}

{% block content %}
    <div class="inside">
        {{ elements|join|raw }}
    </div>
{% endblock %}

mod_article_no_inside

Die Elemente, die diese Breitenbegrenzung nicht brauchen (z.B. Hero), verwenden mod_article_no_inside.html.twig, das, wie das Original-Template, ohne ein zusätzliches <div> daherkommt. Eventuell gibt es eine elegantere Möglichkeit, das zu lösen …

Da das Template mod_article.htmlt.twig extended wird, bleibt die Klasse flow erhalten. Das sollte aber nicht stören, da es nur in Verbindung mit <div class="inside"> Abstände einfügt.

mod_article_no_inside.html.twig

{% extends "@Contao/mod_article.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.
#}

{% block content %}
    {{ elements|join|raw }}
{% endblock %}