Twig-Layout mit Slots

Twig Layout nutzen

CSS einbinden

statisch

                    
                       <link href="/files/theme/css/standard.css" rel="stylesheet" >
                    
                

mit Cache-Busting

                    
                       <link href="{{asset('theme/css/standard.css', contao_vfs.files') }}" rel="stylesheet" >
                    
                

Javascript einbinden

jQuery

                    
                       <script src="{{ asset('js/jquery.js', 'contao-components/jquery') }}"></script>
                    
                

eigenes Javascript mit Cache-Busting

                    
                        <script src="{{ asset('theme/js/control.js', 'contao_vfs.files') }}"></script>
                    
                

Javascript- oder jQuery-Templates einbinden

                    
                        {{ include('@Contao/j_colorbox') }}
                    
                

                    
                        {{ include('@Contao/j_accordion') }}
                        {{ include('@Contao/j_tablesort') }}
                        {{ include('@Contao/js_accordion') }}
                        {{ include('@Contao/js_slider') }}
                        {{ include('@Contao/js_autofocus') }}
                    
                

                    
                        {{ include('@Contao/js_glightbox') }}
                    
                

zusätzliche Slots verwenden

                    
                        {% slot cta %}
                            <div class="cta">{{ slot() }}</div>
                        {% endslot %}
                    
                

                    
                        {% slot cta %}
                            <div class="cta">
                                {{ slot() }}
                                <p>Wir freuen uns auf ihren Anruf.</p>
                            </div>
                      {% endslot %}
                    
                

                    
                        {% slot cta %}
                            <div class="cta">
                                {{ slot() }}
                            </div>
                        {% else %}
                            <div class="cta">
                                <p>Alternativer Standardtext, wenn leer.</p>
                            </div>
                        {% endslot %}
                    
                

Nutzung einer Erweiterung

lukasbableck/contao-twig-layout-assets-bundle

Neues Markup mit modernem CSS

Einspaltiges Layout

                   
                     body {
                        display    : grid;
                        min-height : 100vh;
                        @supports (min-height: 100dvh) {
	                        min-height : 100dvh;
                        }
	                    grid-template-rows  : min-content 1fr min-content;
	                    grid-template-areas :
                            "header"
                            "main"
                            "footer";
                     }
                   
                

                   
                     header {
                        grid-area: header;
                     }

                     main {
                        grid-area: main;
                     }

                     footer {
                        grid-area: footer;
                     }
                    
                

Layout mit Aside

                   
                    body {
                      display    : grid;
                      min-height : 100vh;
                      @supports (min-height: 100dvh) {
                        min-height : 100dvh;
                      }
                      grid-template-rows  : min-content 1fr min-content;
                      grid-template-areas :
                        "header"
                        "main"
                        "footer";

                      &.two-column-left {
                        grid-template-rows  : min-content 1fr min-content min-content;
                        grid-template-areas :
                        "header"
                        "main"
                        "aside-left"
                        "footer";
                        @media only screen and (min-width : 64em) {
                          grid-template-rows    : min-content 1fr min-content;
                          grid-template-columns : minmax(0, 30rem) minmax(40rem, 1fr);
                          grid-template-areas   :
                          "header header"
                          "aside-left main"
                          "footer footer";
                        }
                      }

                      &.two-column-right {
                        grid-template-rows  : min-content 1fr min-content min-content;
                        grid-template-areas :
                        "header"
                        "main"
                        "aside-right"
                        "footer";
                        @media only screen and (min-width : 64em) {
                          grid-template-rows    : min-content 1fr min-content;
                          grid-template-columns : minmax(40rem, 1fr) minmax(0, 30rem) ;
                          grid-template-areas   :
                          "header header"
                          "main aside-right"
                          "footer footer";
                        }
                      }
                      &.three-columns {
                        grid-template-rows  : min-content 1fr min-content min-content min-content;
                        grid-template-areas :
                        "header"
                        "main"
                        "aside-left"
                        "aside-right"
                        "footer";
                        @media only screen and (min-width : 64em) {
                          grid-template-rows    : min-content 1fr min-content min-content;
                          grid-template-columns : minmax(0, 30rem) minmax(40rem, 1fr);
                          grid-template-areas   :
                          "header header"
                          "aside-left main"
                          "aside-right aside-right"
                          "footer footer";
                        }
                        @media only screen and (min-width : 80em) {
                          grid-template-rows    : min-content 1fr min-content;
                          grid-template-columns : minmax(0, 30rem) minmax(40rem, 1fr) minmax(0, 30rem);
                          grid-template-areas   :
                          "header header header"
                          "aside-left main aside-right"
                          "footer footer footer";
                        }
                      }
                    }
                    
                

                   
                     header {
                        grid-area: header;
                     }
                     main {
                        grid-area: main;
                     }
                     footer {
                        grid-area: footer;
                     }
                     .aside-left {
                       grid-area: aside-left;
                     }
                     .aside-right {
                       grid-area: aside-right;
                     }
                   
                

12er Grid für Main

                   
                    main {
                      padding-block         : 2rem;
                      display               : grid;
                      grid-area             : main;
                      column-gap            : 1rem;
                      grid-template-columns : minmax(1rem, 1fr) repeat(12, minmax(0, 5rem)) minmax(1rem, 1fr);
                      grid-auto-rows: max-content;
                      > .mod_article {
                        grid-column           : 1 / -1;
                        display               : grid;
                        grid-template-columns : subgrid;
                        > :not(.fullwidth) {
                          grid-column : 2 / span 12;
                        }
                      }
                    }
                    
                

weiterführende Infos: Konferenzvortrag 2025

Sollte ich in Contao 5.7 das Twig-Layout einsetzen?

Twig-Layout oder FE‑Page

Twig-Layout - Vorteile

• Verlagerung der gesamten Konfiguration ins Template
• sehr flexibel
• versionierbar z.B. auf Github
• gut wiederverwendbar in anderen Projekten
• neues Markup für modernes Webdesign
• Cache-Busting für CSS und Javascript durch die Asset-Funktion

Twig-Layout - Nachteile

• neues Markup
  • deshalb CSS-Anpassungen notwendig
  • alternativ Template-Anpassungen notwendig um altes Markup zu generieren
• genutztes CSS und JS nicht einfach im Backend wählbar
• noch experimentell
• genutzte Erweiterungen sind eventuell (noch) nicht auf die Verwendung vom Twig-Layout vorbereitet

FE-Page - Vorteile

• kann als HTML5-Template oder Twig Template angepasst werden
• wird in Contao 6 als Twig Template noch unterstützt
• vertrautes Markup
• vertraute Konfiguration
• fast alle Einstellungen (wie z.B. CSS und Javascript) im Backend einstellbar
• keine CSS-Anpassungen erforderlich beim Update von Contao 5.3

FE-Page - Nachteile

• ist in Contao 6 als HTML5-Template nicht mehr verfügbar
• unklar wie lange es in Contao 6 als Twig-Template noch verfügbar sein wird
• Umstellung muss bei Wegfall des FE-Page-Templates zwangsweise erfolgen
• Markup schon etwas angestaubt (z.B. z.T. viele für modernes CSS nicht benötigte Div-Tags)

Zusammenfassung

• das Twig-Layout ist zukunftsfähig
• generiertes Markup erleichtert den Einsatz von modernem CSS
• noch experimentell, Veränderungen sind möglich
• Einsatz nicht um jeden Preis