TYPO3 - Distribution mit FLUID Templates erstellen

Links

https://jweiland.net/video-anleitungen/typo3/typo3-projekte-verwalten/templates-als-distribution.html#c2632

Übersicht

1. 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
	contentNormal < styles.content.get 
}