Die Contao Show (Folge 24) – Hallo Contao 5.7

[contao.org]

In dieser Ausgabe dreht sich alles um die neue Contao Version 5.7. Christian, Christian und Dennis nehmen die Neuerungen unter die Lupe und schauen sich dabei besonders das Template Studio sowie das neue Twig-Layout mit Slots an


Ganzen Beitrag zu 'Die Contao Show (Folge 24) – Hallo Contao 5.7' lesen

[BugBuster]

Habe mal zur Übung das Layout kopiert und auf Twig Layout umgestellt.
Dafür vorher eine Variante angelegt (layout-1-column) und die dann zugewiesen. (inkl. preefooter slot)
Die Show war da eine gute Anleitung, weil man für die Contao Demo CSS noch einige DIVs hinzufügen muss sowie id und class Angaben)

Außerdem habe ich mal die Erweiterung "lukasbableck/contao-twig-layout-assets-bundle" ausprobiert, was die einem da so abnehmen kann.
Da habe ich die generierte theme css hinzugefügt (vorher nach files kopiert) und einige JS Dateien. (theme script.js, a11y-nav.js und den "window.addEventListener" Teil.
Das kann man natürlich auch alles in der Layout Variante einfügen.

Hier mal meine Layout Variante. Noch nicht perfekt, wie gesagt ich übe damit was wie das alles funktioniert.

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

{%- set body_attributes = attrs()
    .addClass('layout--1-column')
    .mergeWith(body_attributes|default)
-%}

{% block end_of_head %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('contaodemo/files_contaodemo_theme_src_scss_app.scss.css', 'contao_vfs.files') }}">
    <script src="{{ asset('js/jquery.js', 'contao-components/jquery') }}"></script>
{% endblock %}

{% block body %}
    {{ parent() }}
    {{ include('@Contao/j_accordion.html.twig') }}
    {{ include('@Contao/js_slider.html.twig') }}
    {{ include('@Contao/j_colorbox.html.twig') }}
    {{ include('@Contao/j_tablesort.html.twig') }}
{% endblock %}

{% block body_content %}
<div id="wrapper">
    {% slot header %}
        <header id="header"><div class="inside">{{ slot() }}</div></header>
    {% endslot %}

    <div id="container">
    {% slot main %}
        <main id="main"><div class="inside">{{ slot() }}</div></main>
    {% endslot %}
    </div>

    {% slot prefooter %}
        <div id="prefooter"><div class="inside">{{ slot() }}</div></div>
    {% endslot %}

    {% slot footer %}
        <footer id="footer"><div class="inside">{{ slot() }}</div></footer>
    {% endslot %}
</div>
{% endblock %}

[BugBuster]

Das ist der generierte Teil mit css und js.
Was mich eventuell stört ist, das die CSS Dateien von meinen Erweiterungen vor den CSS Dateien eingebunden werden wie die aus dem Layout Template. (bzw. aus der Erweiterung)
Die müsste ich dann wohl auch in die Templates verlagern, nur muss ich dann sicherstellen, das die nicht mehrmals dann eingebunden werden. Das ging auch irgendwie, kam glaube ich auch in der Show zur Sprache.
Nachtrag: stört mich hier nicht wirklich, ist sogar besser. Aber prinzipiell mal prüfen ob und wie man das alternativ tun könnte.

        <link rel="canonical" href="https://contao57twig.contao5dev/">
                               
        <link rel="stylesheet" href="/bundles/bugbustervisitors/mod_visitors_basic.css?v=ed199216">
        <link rel="stylesheet" href="/bundles/bugbusterbotstatistics/mod_botstatistics_fe.css?v=49d4aec7">
                                                    
       <link rel="stylesheet" href="/assets/swiper/css/swiper-bundle.min.css?v=12.1.2">
    
            
                        
    <link rel="stylesheet" href="assets/colorbox/css/colorbox.min.css">
    <link rel="stylesheet" href="assets/swipe/css/swipe.min.css">
    <link rel="stylesheet" href="assets/tablesorter/css/tablesorter.min.css">
    <link rel="stylesheet" href="files/contaodemo/files_contaodemo_theme_src_scss_app.scss.css">
    <script src="/assets/tablesort/js/tablesort.min.js?v=4.0.2"></script>
    <script src="/assets/jquery/js/jquery.js?v=3.7.1"></script>
</head>

Puh, ganz schön aufwendig das Ganze. Und das soll ein "normaler" User hinbekommen? Glaub ich nicht.

[dtptiger]

Ein normaler User wird, wenn er sich daran traut, das Forum nerven …..ich jedenfalls tue ich mir C7 gegenwärtig nicht an, wegend der garantiert noch nicht nachgezogenen Extensions und des Twigzeuchs, wobei ich durchaus den Hintergrund und Zweck von twig irgendewie kenne und irgendwie gut finde.

Mit einer Träne im Auge, da ich das Backend von C7 endlcih mal oberaffengeil fnde

Und, ich habe deinen Therad gepinnt, um bei bedarf, auf die Anleitung zurück zukommen

Sagt eine Stimme des Fußvolkes

Grüße dtptiger

[lucina]

Niemand kann hier mit Fragen nerven.

„Life is for Learning.“
— Joni Mitchell


Gesendet von iPhone mit Tapatalk

[Spooky]

Was mich eventuell stört ist, das die CSS Dateien von meinen Erweiterungen vor den CSS Dateien eingebunden werden wie die aus dem Layout Template. (bzw. aus der Erweiterung)

Das muss ja auch so sein, andernfalls könntest du das CSS ja nicht mit der selben specifity überschreiben. Davon abgesehen hat das ja nichts mit Contao 5.7 zu tun.

[BugBuster]

Siehe Nachtrag oben, ist sogar richtig das die zuerst kommen. Das sind nicht die CSS der FE Module meiner Erweiterungen, das sind nur Basics die spezielle invisible Dinge setzen, ist eine Besonderheit hier.

Ansonsten, doch hat mit Contao 5.7 zu tun, wenn man sich nun mit den Slots beschäftigt und wie man da CSS in der richtigen Reihenfolge wie rein bekommt.

Was noch problematischer ist, woher man als "normalo" weiß, welche CSS und JS man wie einbinden muss um zum Beispiel swipe(r)/tablesorter zu verwenden.
Sprich, wie man an die contao components Anteile ran kommt.

    /* diese Zeile kommt von selbst, ohne Zutun meiner einer */
     <link rel="stylesheet" href="/assets/swiper/css/swiper-bundle.min.css?v=12.1.2">

    /* manuell eingetragen, abgeschaut von Standardlayout  */
    <link rel="stylesheet" href="assets/colorbox/css/colorbox.min.css">
    <link rel="stylesheet" href="assets/swipe/css/swipe.min.css">
    <link rel="stylesheet" href="assets/tablesorter/css/tablesorter.min.css">

    /* abgeschaut aus Contao Benutzerhandbuch Beispiele und try&error */
    <script src="{{ asset('js/tablesort.min.js', 'contao-components/tablesort') }}"></script>
    <script src="{{ asset('js/jquery.js', 'contao-components/jquery') }}"></script>

[BugBuster]

in #2 habe ich noch mal einiges geändert, das manuelle Einbinden wird stark vereinfacht durch den "block body" Anteil.

[WebRoxx]

Was noch problematischer ist, woher man als "normalo" weiß, welche CSS und JS man wie einbinden muss um zum Beispiel swipe(r)/tablesorter zu verwenden.
Sprich, wie man an die contao components Anteile ran kommt.

Deswegen wäre es schon gut wenn man das direkt wieder im Backend wählen könnte bzw wenn man ein Slider oder so einbaut diese automatisch eingefügt werden.

Mir als Entwickler wäre es zwar egal aber das würde es doch einfacher und handlicher machen, da man jetzt wirklich für jedes Projekt ein Template anlegen muss

Aber das ist nur mein Empfinden

[Spooky]

da man jetzt wirklich für jedes Projekt ein Template anlegen muss

So ist es auch gedacht.

In Zukunft soll es dann Helper-Methoden innerhalb des Template-Studios geben, um das zu vereinfachen.

Wem das momentan alles zu hoch ist, bleibt halt beim Default-Layout.

[WebRoxx]

So ist es auch gedacht.

In Zukunft soll es dann Helper-Methoden innerhalb des Template-Studios geben, um das zu vereinfachen.

Wem das momentan alles zu hoch ist, bleibt halt beim Default-Layout.

Okay das hört sich doch gut an...

[Birden]

{% block body %}
    {{ parent() }}
    {{ include('@Contao/js_slider.html.twig') }}
    {{ include('@Contao/j_colorbox.html.twig') }}
{% endblock %}

kann es sein, daß das bei Mehrsprachigkeit nicht greift?

[BugBuster]

Keine Ahnung, damit arbeite ich normalerweise nicht.

[BugBuster]

Meine Erkenntnisse habe ich mal hier reingepackt.
https://github.com/BugBuster1701/contao-twig-layouts