TYPO3 - Distribution mit FLUID Templates erstellen
Links
Übersicht
- Extension mit Extension Builder erzeugen
Extension erzeugen
Grundgerüst der Distribution erzeugen. Das geht am schnellsten mit dem Extension Builder. Wichtig bei der Erstellung:
- Key und Vendor
- Category: Distribution
- TYPO3 Version
Nach dem Speichern wird die benötigte Grundstruktur erzeugt.
Optional: Evtl. weitere Systemextensions und Extensions aktivieren lassen. Dazu bei depends z.b.
'version' => '',
'recycler' => '',
'filemetadata' => '',
'powermail' => '',
'realurl' => ''
Weitere Verzeichnisse die oft benötigt werden anlegen:
Configuration/TypoScript/ setup.txt constants.txt Configuration/TSConfig
Distribution aktivieren
- Root Template anlegen
- Standardcode rausschmeißen
- Distribution Includen
TypoScript vorbereiten
Beispiel für TypoScript in einzelnen Dateien
Dies ist nur ein möglicher Weg.
- Unterordner in TypoScript erstellen z.b. Library
- Skripte in Setup.txt inkludieren (das geht inzwischen mit dem ganzen Ordner (es werdenalle Dateien in diesem Ordner inkludiert)
<INCLUDE_TYPOSCRIPT: source="DIR: ./Library" extension="ts">
Wenn die Skripte über eine Ordnerdefinition geladen werden, bindet Sie TYPO3 in alphabetischer Reihenfolge ein. Daher ist es sinnvoll eine Nummerierung voranzustellen. Damit man die Constants in den gleichen Ordner packen kann nehmen wir hier die Endung txt und schreiben in der Constants.txt
<INCLUDE_TYPOSCRIPT: source="DIR: ./Library" extension="txt"> resourceDir = EXT:gbmaterialize/Resources
Hier haben wir gleich noch eine Konstante definiert, damit wir später nicht immer den ganzen Pfad schreiben müssen (s.u.)
Das Setup schreiben wir in eine Datei:
1000_page.ts
HTML Vorlage vorbereiten
Wir gehen von einem HTML/CSS/JS Framework aus. Das kann man sich z.b. schnell von initializr.com holen. Oder wir nehmen ein eigenes. In diesem Beispiel nehmen wir Materialize.
Dateien verteilen
Für TYPO3 gelten einige Konventionen was Ordner und Dateien betrifft und die sich meistens vom Download eines Frameworks unterscheiden. Deshalb müssen wir von Hand einiges gestalten. Die HTML-Template Dateien kommen in den Ordner Resources/Private. Wir legen folgende Unterordner an:
Layouts Templates Partials
Wie Layouts, Templates und Partials unterteilt werden hängt vom Projekt ab. Alles folgende ist Beispielhaft. Wir können mit einem Standardlayout anfangen. Dazu kommt erstmal eine Default.html ins Layout Verzeichnis. Das könnte z.B. so aussehen:
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<f:render partial="Nav" />
<f:render section="Main" />
<f.render partial="Footer" />
Anschließend müssen wir TYPO3 noch sagen wo es nach den Templates suchen muß. Das machen wir über TypoScript in der oben erstellten Datei 1000_page.ts
page = PAGE
page {
10 = FLUIDTEMPLATE
10{
file = {$resourceDir}/Private/Templates/Default.html
layoutRootPath = {$resourceDir}/Private/Layouts/
partialRootPath = {$resourceDir}/Private/Partials/
}
}
JS und CSS einbinden
page {
includeCSSLibs.materialize = {$resourceDir}/Public/Css/materialize.min.css
includeCSS.main = {$resourceDir}/Public/Css/main.css
includeJSLibs.jQuery = {$resourceDir}/Public/Js/jquery-3.0.0.min.js
includeJSFooter.materialize = {$resourceDir}/Public/Js/materialize.min.js
includeJSFooter.main = {$resourceDir}/Public/Js/main.js
}
Metatags und andere Headerinfos einbinden
Metatags
Wir erstellen dafür einen neue TypoScript Datei und benennen Sie sinnvoll, um eine bessere Ordung zu erhalten.
1100_page.meta.ts
Hier ein einfaches Beispiel wie diese aussehen könnte.
page.meta{
X-UA-Compatible = IE=edge,chrome=1
X-UA-Compatible.attribute = http-equiv
viewport = width=device-width, initial-scale=1, maximum-scale=1.0
description.field = description
description.ifEmpty = {$defaultDescription}
}
Speziele Teile im Rendering beeinflussen
Über die Konfiguration kann man das Hauptrendertemplate von TYPO3 beeinflussen. Das braucht man nur sehr selten, daher lassen wir das hier weg. Ab Typo3 7 ist das Stichwort hierzu PageRenderer.html
TYPO3 Inhaltselemente ausgeben
Möglichkeit 1 - Inhaltselemente der Standardspalten ausgeben
1000_page.ts erweitern
...
# Variablen
page.10.variables {
# content via css-styled-content / fluid_styled_content (ab 7.2)
contentNormal < styles.content.get
}
Template Default.html erweitern:
<f:format.raw>{contentNormal}</f:format.raw>
