Theme Extension from the scratch
================================
Oliver Thiele
T3CM16, 2. Tag

Download - Area: https://files.oliver-thiele.de/t3cm/
PHPStorm - TYPO3 Projekte einrichten: Youtube PhpStorm für Typo3 Projekte einrichten
TSREF - http://tsref.de

Ausgehend von leerer TYPO3-Installation

.) Home-Seite anlegen
- ist auch gleichzeitig tatsächlich Startseite.  Somit verkettete Weiterleitung auf jeden Fall vermieden.
- Als Anfang der Website benutzen anklicken

.) Unterseite(n) anlegen

.) Template auf Home-Seite
- Auf Homeseite vollständigen Inhalt des Templates entfernen
- fluid_styled_content einbinden
- Dokumentation für Einbinden von TypoScript: https://docs.typo3.org/typo3cms/TypoScriptSyntaxReference/Syntax/Includes/Index.html
  - Conditions und Verzeichnisse
- Typoscript im fileadmin-Bereich ungünstig, da Rechte von Redakteuren und Portabilität zu anderen Projekten
- <INCLUDE_TYPOSCRIPT: source="FILE:typo3conf/ext/ot_t3cm/Configuration/TypoScript/setup.txt"> bzw. constants.txt
  - jetzt nur im Verzeichnis, noch nicht

.) TypoScript Object Browser zum Browsen/Debuggen des Templates
- Momentan keine type=0 definiert

.) Anlegen des Page-Objects in der setup.txt
- Standardmäßig FE-Login CSS eingebunden
  - Über TypoScript Object Browser suchen
  - Einbinden im Template überschreiben

.) Mehrere TS-Dateien anlegen
- Konzept: Für jedes Top-Element (z.B. lib, styles, plugin, ...) eigene TS-Datei, Mehrsprachigkeit extra
  - nicht zu viele und nicht zu wenige Files, aber andere Wege durchaus OK
- Filenamen in Extbase generell UpperCamelCase
- File-Endung besser auf t3s als ts (aufgrund Mehrfachverwendung der Endung -> Medien)
- Verkettung der t3s-Files in setup.txt, Reihenfolge wichtig
  - zuerst Config.t3s, dann Plugin, dann Page

.) Config.t3s
- Mehrsprachigkeit
  - hreflang-Tag (siehe Google Webmaster - Doku)
  - Im Backend: Sprachen
  - Standardsprache setzen
- ev. Cache-Headers

.) Page.t3s
- Admin-Panel (zum Debuggen)
  - page.config.admPanel = 1
  - page.config.debug = 1
  - Gibt es irgendwelche Dinge, die Caching verhindern
  - Website-Timing untersuchen (Rendering-Zeiten)
- Meta-Tags
  - Description nicht hartcodieren, sondern aus Datenbankfeld holen
    - Ausflug: TSRef - stdWrap
	- Wichtig: Funktionen werden in der Reihenfolge ausgeführt wie in TSRef angegeben! (Zuerst Daten auslesen, Daten parsen (später über ViewHelper!), ...)
	- page.meta.description.field = description
	  - Nicht so gut, besser über TSFE (TypoScript Frontend Engine), da bereits im Arbeitsspeicher
	  - Besser: ...description.data = TSFE:page|description
- CSS und JS:
  - Zur Performance - Optimierung CSS in Header, JS in Footer
  - includeCSSLibs für Bootstrap, ...
  - includeCSS für eigenes CSS
  - includeJSFooterlibs für JS
  - Ausnahme: jQuery, Bootstrap, ... aus CDN: besser mit SRI-Hash
    - 3000 = TEXT, 3000.value (Einfügen aus srihash.org)
	- 3000 einfach große Zahl, um ganz hinten zu sein

.) FLUIDTEMPLATE aufbauen
- in Page.t3s
  - 10 = FLUIDTEMPLATE
  - Resources/Private/Templates
  - Resources/Private/Partials
  - Resources/Private/Layouts
  - 10.templateRootPaths (Mehrzahl! -> Fallbacks)
    - Somit Basis und Anpassung trennbar
  - das selbe für layoutRootPaths und partialRootPaths
  - 10.templateName = Default
    - Somit automatisch Suche nach Default.html in angegebenen Verzeichnissen

.) Bei SASS, css minimieren, ...
- immer offline optimieren
- Codekit, prepros.io anschauen!

.) Aufbau des FLUIDTEMPLATES
- Template beinhaltet Layouts, Layout Partials

.) HTML5Boilerplate - .htaccess anschauen
- http://html5boilerplate.com
- Jede Menge Optimierungen zu Performance und Sicherheit zusammengetragen

.) Navigation
- Beispiel auf Bootstrap-Seite Code anzeigen und nach und nach in Template bauen
  - Alles in Header über TypoScript einbinden
  - Body im Fluid
- TypoScript für div. Komponenten in Verzeichnis
  - Darin z.B. Navigation.t3s
    - lib.navigation aufbauen
- in fluid einbauen
  - <f:cObject typoscriptObjectPath="lib.navigation" />

.) Conditions in Navigation
- z.B. Login ausblenden wenn angemeldet
- Zur Laufzeit verändern mit z.B. lib.navigation.excludeUidList := addToList(6)

.) optionSplit
- http://www.brainworxx.de/brainlife/2011/11/11/typo3-menu-mit-unterschiedlichen-farben-und-klassen-optionsplit/
- bzw. TSRef


.) TSConfig
- Doku auf tsconfig.de
- Wichtiges Beispiel: clearCacheCmd
  - In Seiten-TSConfig des News-Containers
    TCEMAIN.clearCacheCmd = cacheTag:news
  - damit sauber Cache verwalten und sogar Redakteuren Option zum Cache-Löschen entfernen

.) Backend Layouts
- in Configuration/PageTS/PageTSConfigFile.t3s
- Kopie aus TSConfig Doku (mod -> BackendLayouts)
- Zusammenklicken des Layouts im Editor im Backend
  - Hinzufügen -> Backendlayout, aber nicht speichern!
  - in t3s copy / paste

.) Extension aus File-Haufen bauen
- ext_emconf.php
  - autoload für automatisches Erkennen von ViewHelpern
- ext_localconf.php
- Configuration/TCA/Overrides/pages.php
  - Registrierung von Page TS Config zum Auswählen
- Idealerweise Pfade anpassen auf FILE:EXT:...

.) bodyTagCObject bauen
- zusätzliche Informationen in body-Tag packen
  - Sprache, PID, ... zum Ansprechen mit CSS und Informationen über Seite rauskriegen

.) Content ausgeben
- settings.homepageUid = 1
- variables.content_0 = CONTENT
  - aus Datenbank auslesen
    - table = tt_content
	- select.where = colPos=0
	- select.orderBy = sorting
	- renderObj =< tt_content
- in Fluid-Template einbauen
  - {content_0 -> f:format_raw()}