Der Head-Bereich
In unseren HTML-Templates haben inkludieren wir einige für die Website wesentliche Dinge im Bereich vom <head>. Im Typoscript können wir das recht simpel abbilden. Für unsere Testzwecke habe ich schnell ein CSS-File erstellt und im Fileadmin hochgeladen (in der Praxis würde man CSS-Files o.ä. an anderer Stelle speichern, aber dazu an anderer Stelle mehr). Dieses CSS-File ließe sich, nebenbei erwähnt, auch direkt im TYP03-Backend erstellen.
In unserem CSS-File finden wir im Moment nur zwei Klassen, durch die wir jeweils eine andere Hintergrundfarbe (bzw. in diesem Fall Graustufe) erhalten. Wir werden diese Klassen gleich zuweisen. Zuerst müssen wir das CSS-File aber einbinden. Das passiert mit “page.includeCSS”:
page = PAGE
page.includeCSS{
meinCSS = fileadmin/CSS/main.css
}
Grundsätzlich können die Code-Zeilen an einer beliebigen Stelle im Typoscript platziert werden, analog zum HTML-File ist es vermutlich vernünftig, sie im oberen Bereich zu platzieren. Für die Inkludierung meines Files erstelle ich hier eine Variable mit beliebigem Namen ("meineCSS") und weise ihr den Pfad zum CSS-File zu.
Nun kann ich meinen HTML-Code um Klassen-Zuweisungen erweitern:
page.30.renderObj = COA
page.30.renderObj{
wrap = <div class="hintergrund1">|</div>
5 = TEXT
5.field = header
5.wrap = <h1 class="hintergrund2">|</h1>
7 = TEXT
7.field = subheader
7.wrap = <h2>|</h2>
10 = TEXT
10.field = bodytext
20 = TEXT
20.field = header_link
}
Im Frontend können wir nun folgendes sehen:
Falls wir im Header-Bereich noch Meta-Tags, Javascripts o.ä. einbinden wollen, kann das Attribut "headerData" verwendet werden:
page.headerData.10 = TEXT
page.headerData.10.value(
<meta name="viewport" content="width=device-width, initial-scale=1">
)
Hier stellen wir beispielsweise mit dem Viewport-Metatag sicher, dass unser (hier noch nicht vorhandene) adaptives Design auf jedem Gerät korrekt dargestellt wird. Wichtiger Hinweis: Aus einem Grund, den ich bisher noch nicht erörten konnte, brauchen wir hier normale statt geschwungender Klammern nach dem Value-Attribut.
FOLLOW
