• DE

vimeo.com/135454856

-> wie können die Inhalte der vier Standard-Spalten im T3-BE in den betreffenden Teil des Layouts im FE ausgegeben werden?
-> in einem späteren Teil dieses Tutorials wird noch auf BE-Spalten eingegangen
-> und auf die Ausgabe der BE-Spalten in die entsprechenden FE-Spalten

-> 1. Ein normales Textelement in der Spate normal anlegen
-> 2. dort Überschrift eingeben -> Blindtext mit Absätze für den Inhalt

-> 3. in der Datei 2000_page.ts umsortieren:
-> den CSS- und JavaScript-Block nach oben verschieben
-> und zwar so:

# Default PAGE object:
page = PAGE

## Favicon
page.shortcutIcon = {$resDir}/Public/Icons/favicon.ico

## CSS Dateien laden
page.includeCSS {
    normalize = {$resDir}/Public/Css/normalize.min.css
    main = {$resDir}/Public/Css/main.css
}

## JavaScript laden
page.includeJSlibs {
    modernizr = {$resDir}/Public/JavaScript/vendor/modernizr-2.8.3-respond-1.4.2.min.js
}

page.includeJSFooterlibs {
    jquery = {$resDir}/Public/JavaScript/vendor/jquery-1.11.2.min.js
}

page.includeJSFooter {
    main = {$resDir}/Public/JavaScript/main.js
}

page.10 = FLUIDTEMPLATE
page.10 {
    partialRootPath = {$resDir}/Private/Partials
    layoutRootPath = {$resDir}/Private/Layouts

    file = {$resDir}/Private/Templates/DefaultTemplate.html
}

-> früheres Template-System mit Markern und Subparts
-> Inhalte werden über Marker an das Template übergeben
-> das FluidTemplate arbeitet mit Variablen
-> im page.10 Objekt werden die Variablen definiert
-> unter das page.10 Objekt wird das Objekt = Variables gesetzt
-> in geschweiften Klammern -> kommasepariert -> werden alle Variablen aufgelistet, die gebraucht werden:

page.10 = FLUIDTEMPLATE
page.10 {
    partialRootPath = {$resDir}/Private/Partials
    layoutRootPath = {$resDir}/Private/Layouts

    variables {
        contentMain < styles.content.get
        contentAside < styles.content.get
        contentAside.select.where = colPos = 1
        contentAside.stdWrap {
            wrap = <aside>|</aside>
            required = 1
        }
    }

    file = {$resDir}/Private/Templates/DefaultTemplate.html
}
-> der Name einer Variablen kann frei gewählt werden
-> die Spalte Normal mit der colpos = 0 wird so ausgelesen:

< styles.content.get

-> colpos -> colposition -> column position -> Spaltennummer -> 0 = normal 1 = links 2 = rechts 3 = Rand
-> Die Variablen werden in das DefaultTemplate.html an die richtige Stelle positioniert
-> so wird der entsprechende Inhalt der Varablen in das Template übergeben

-> 4. DefaultTemplate.html wird im PhpStorm geöffnet
-> Hauptelement im Template ist das article Element
-> 5. alle Unterelemente von article werden gelöscht
-> 6. die Varable ContentMain wird in das Element article gesetzt:

<article> {contentMain} </article>

-> 7. speichern -> Cache löschen und Seite root im FE ausgeben
-> Es gibt dazu keine Ausgabe -> denn das statische Template der css-styled-content-Extension wurde noch nicht eingebunden
-> das muss nachgeholt werden:
-> 8. Folgende Zeile als erste Zeile der setup.txt einsetzen:

<INCLUDE_TYPOSCRIPT: source="FILE:EXT:css_styled_content/static/setup.txt">

-> damit wird die setup.txt der css_styled_content eingebunden
-> also nicht wie üblich über das Template-Modul im rootTemplate -> und Klick auf includes + css_styled_content
-> somit ist die Einbindung im TypoScript der Webseite
-> es gehört auch die Einbindung der Konstanten hinzu:
-> 9.  Folgende Zeile als erste Zeile der constants.txt einsetzen:

<INCLUDE_TYPOSCRIPT: source="FILE:EXT:css_styled_content/static/constants.txt">

-> 10. speichern -> Cache löschen und Seite root im FE ausgeben
-> die Ausgabe kommt -> die Ausgabe ist aber nicht fehlerfrei -> der eigentliche Inhalt ist vermischt von HTML-Elementen,

Kommentaren, CSS-Angaben

-> der Fehler liegt darin, dass die Variable ContentMain im Template nicht als FluidHelper eingesetzt wurde -> siehe hier im

Punkt 6
-> die Variable sollte als f:format.raw ViewHelper eingesetzt werden -> also so:
-> <article> <f:format.raw>{contentMain}</f:format.raw> </article>

-> damit wird der Inhalt fehlerfrei ausgegeben
-> analog könnten jetzt die anderen Inhalte: Spalte links -> Spalte rechts -> aside auch ausgegeben werden
-> aber mit Backend-Layouts (BE-Layouts) hätte man eine ähnliche Darstellung des FE-Layouts auch im BE
-> und man könnte sich verschiedene Layouts selber bauen
-> BE-Layouts sind Thema im Teil 14