TYPO3 - Distribution mit FLUID Templates erstellen

Aus Wikizone
Wechseln zu: Navigation, Suche

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 / fluid_styled_content (ab 7.2)
	contentNormal < styles.content.get 
}

Template Default.html erweitern: 

<f:format.raw>{contentNormal}</f:format.raw>

Möglichkeit 2 - Backend Layouts

Backendlayout erzeugen und zuweisen

  1. Sinnvollerweise einen BackendLayout Ordner erzeugen
  2. Listenansicht Backend Layout Datensatz erzeugen
  3. Backend Layout In den Seiteneigenschaften zuweisen

TypoScript ergänzen

In unserem page Objekt das TypoScript ergänzen z.B. in unserer 1000_page.ts

Fluid Variablen ergänzen 

# Variablen
page.10.variables {
	# content via css-styled-content oder fluid_styled_content
	contentNormal < styles.content.get 
	# Zuordnung der weiteren Backenlayout Boxen zu den Template Variablen 
	contentLeft < styles.content.get
	contentLeft.select.where = colPos=1
	contentMiddle < styles.content.get
	contentMiddle.select.where = colPos=2
	contentRight < styles.content.get
	contentRight.select.where = colPos=3
}

Auswahl des Backendlayouts soll unterschiedliche Layout Dateien verwenden. Wir nutzen ein CASE Objekt um die Auswahl des Backendlayouts auszuwerten. In key.data wird mit backend_layout_net_level das Backend Layout Feld für die nächsten Level (siehe Backend Seiteneigenschaften) definiert. -1 und slide sorgen dafür, daß im Seitenbaum in der nächst höheren Ebene geschaut wird wenn auf der aktuellen Ebene nichts gefunden wird. Wenn in backend_layout etwas gefunden wird, dann überschreibt dieser Wert die vorige Definition aus dem backend_layout_net_level Feld. 


page.10.file.stdWrap.cObject = CASE
page.10.file.stdWrap.cObject{
  key.data = levelfield:-1, backend_layout_net_level, slide
  key.override.field = backend_layout
  # Default Template wenn nichts definiert ist
  default = TEXT
  default.value = {$resourceDir}/Private/Templates/Default.html
  # Backendlayout ids zu Templates zuordnen
  1 < .default
  #2 = TEXT
  #2.value = {$resourceDir}/Private/Templates/Layout2.html
  #...
}

Fluid Template ergänzen

<f:layout name="Default"/><!-- Default Layout verwenden -->
<f:section name="Main">
	<f:format.raw>{contentNormal}</f:format.raw>
	<f:format.raw>{contentLeft}</f:format.raw>
	<f:format.raw>{contentMiddle}</f:format.raw>
	<f:format.raw>{contentRight}</f:format.raw>
</f:section>

Navigation ergänzen

Wir erzeugen ein paar Unterseiten z.B. so: 

Home (rootpage)
- Seite 1
- Seite 2
- Seite 3

TypoScript

Wir erzeugen ein einfaches Menu im TypoScript.

0200_lib.nav.main.ts 

lib.nav.main = HMENU
lib.nav.main{
	wrap = <ul>|</ul>
	1 = TMENU
	1{
		NO = 1
		NO.allWrap = <li>|</li>
		NO.stdWrap.htmlSpecialChars = 1
		
		CUR = 1
		CUR.allWrap = <li class="cur">|</li>
		CUR.stdWrap.htmlSpecialChars = 1
	}
}

Dann binden wir dieses in unser Fluid Partial ein

Nav.html 

<nav role="navigation">
	<f:cObject typoscriptObjectPath="lib.nav.main"/>
</nav>

Metanavigation

  • Ordner Metanavigation im Backend (Exclude from speaking url)
  • Navigation als TypoScript erstellen
  • Fluid Template ergänzen

0210_lib.nav.meta 

## Metanavigation
lib.nav.meta = HMENU
lib.nav.meta{
	special = directory
	special.value = {$nav.meta.id}
	1 = TMENU
	1{
		NO = 1
		NO.stdWrap.htmlSpecialChars = 1
		CUR = 1
		CUR.ATagParams = class="cur"
		CUR.stdWrap.htmlSpecialChars = 1
	}
}

Constants.txt 

## Navigation
nav.meta.id = 1

Footer.html 

<f:cObject typoscriptObjectPath="lib.nav.meta"/>

Spalten nur anzeigen wenn vorhanden

Im Page.ts ergänzen: 

contentMiddle.stdWrap{
  wrap = <div class="middle>|</div>
  required = 1
}

Konfiguration verbessern

config{
  absRefPrefix = /
  ## realurl
  tx_realurl_enable = 1
  prefixLocalAnchors = 1
  ## quelltextkommentare aus
  disablePrefixcomment = 1
  ## E-Mails codieren
  spamProtectEmailAddresses = 1
  spamProtectEmailAddresses_atSubst = (at)

  ## CSS und JavaScript optimieren
  compressCss = 1
  concatenateCss = 1
  compressJs = 1
  concatenateJs = 1 
}

Favicon 

page.shortcutIcon = {$resourceDir}/Public/Icons/favicon.ico

Automatische TSConfig

Page TSConfig wird normalerweise in den Seiteneigenschaften gesetzt. Wir wollen bestimmte Einstellungen automatisch setzen.

  • Page.txt und User.txt im TSconfig Ordner anlegen
  • ext_localconf.php im Wurzelverzeichnis der Extension anlegen

Page.txt 

## Überschriften anpassen
TCEFORM.tt_content.header_layout{
  altLabels {
    0 = h1 - Seitenüberschrift
    1 =
    2 = h2 - Themenüberschrift
    3 = h3 - Überschrift
    4 = h4 - Überschrift 
    5 = h5 - Überschrift
  }
  removeItems = 1
}


User.txt 

# PageId im Seitenbaum
options.pageTree.showPageIdWithTitle = 1
# Button für Systemcache anzeigen
options.clearCache.system = 1

Über die ext_localconf.php werden die TSconfig Dateien geladen: 

<?php
if (!defined('TYPO3_MODE')) {
  die('Access denied !');
}
\TYPO3\CMS\Core\Utility\ExtensionManaagementUtility::addPageTSConfig(
  '<INCLUDE_TYPOSCRIPT: source="FILE:EXT:' . $_EXTKEY . '/Configuration/TSconfig/Page.txt">'
);
\TYPO3\CMS\Core\Utility\ExtensionManaagementUtility::addUserTSConfig(
  '<INCLUDE_TYPOSCRIPT: source="FILE:EXT:' . $_EXTKEY . '/Configuration/TSconfig/User.txt">'
);
?>
Abgerufen von „https://wiki.stephanschlegel.de/index.php?title=TYPO3_-_Distribution_mit_FLUID_Templates_erstellen&oldid=21568“