====== Typo3: Einbinden von Templates ======
//<- Zurück zu [[software:typo3]]//
Typo3 ist ein sehr mächtiges CMS-System, das für sehr unterschiedliche Einsatzbereiche verwendbar ist, weshalb die Konfiguration manchmal recht kompliziert werden kann. Folgende Schritte sind für das Installieren eines Templates notwendig:
- (X)HTML / CSS Template mit Dummytexten erstellen mit Beachtung von Suchmaschinenfreundlichkeit und Barrierefreiheit
- HTML-Layout mit Layoutmarkern versehen
- TypoScript-Layout-Setup ausfüllen
===== (X)HTML-Seite mit Content-Markern =====
Typo3 Nutzt sogenannte Content Marker, die später durch Inhalt ersetzt werden, den Typo3 generiert. So werden alle Inhalte, die zwischen ''###MARKER1###'' und ''###MARKER1###'' stehen später, falls in Typoscript definiert, ersetzt. Der ''###BODY###'' Marker zeigt Typo3 an, wo der Inhalt anfängt, der nicht ersetzt werden darf, da z.B. der Kopf- und Fußbereich des (X)HTML-Dokuments komplett von Typo3 erzeugt wird.
...
... zu ersetzender Inhalt
**Eigenschaften von Content Markern:**
* Eindeutig für einen Bereich, d.h. keine zwei Bereich dürfen durch den gleichen Marker bezeichnet werden
* Die Schreibweise ''###MARKER'' ist ausschlaggeben, keine Leerzeichen Zwischen dem String in der Mitte und den Hashtags
* Die Marker können entweder direkt im Dokument stehen oder in einer Kommentarumgebung, was außen herum im Kommentar steht ist nicht relevant. So ist '''' gleichbedeutend mit ''''
===== Beispiel TypoScript-Layout-Setup =====
Generelle Einstellungen:
# general configuration
#######################
config {
# Ausgabe von XHTML aktivieren
xhtml_cleaning = all
# set doctype to XHTML 1.0 strict
doctype = xhtml_strict
# set site language
language = de
# enable admin panel
admPanel = 1
# Spam Protection
spamProtectEmailAddresses = 2
spamProtectEmailAddresses_atSubst = (at)
index_enable = 1
}
# format popup for pictures
tt_content.textpic.20{
1.imageLinkWrap = 1
1.imageLinkWrap {
enable = 1
bodyTag =
wrap = |
JSwindow = 1
JSwindow.newWindow = 1
JSwindow.expand = 0,0
}
}
tt_content.image.20 {
1.imageLinkWrap = 1
1.imageLinkWrap {
enable = 1
bodyTag =
wrap = |
JSwindow = 1
JSwindow.newWindow = 1
JSwindow.expand = 0,0
}
}
Das eigentliche Template:
# create PAGE-Objekt
####################
page = PAGE
#CSS einbinden
page.includeCSS {
file1 = fileadmin/templates/[name]/stylefile1.css
file2 = fileadmin/templates/[name]/stylefile2.css
}
#Meta-Tags einbinden
page.meta{
keywords = [META-keywords]
description = [META-secription]
robots = INDEX,FOLLOW
autor = [META-author]
language = german
}
#create unordered list menu
temp.TopMenu = HMENU
temp.TopMenu {
# first level
1 = TMENU
1.wrap =
1{
# no state: normale Formatierung
NO{
wrapItemAndSub = |
}
# cur state: gültig für die aktuelle Seite
CUR=1
CUR{
wrapItemAndSub = |
}
}
# second level
2 = TMENU
2.wrap =
2{
# no state: normale Formatierung
NO{
wrapItemAndSub = |
}
# cur state: gültig für die aktuelle Seite
CUR=1
CUR{
wrapItemAndSub = |
}
}
}
# site title marker
temp.seitentitle = TEXT
temp.seitentitle.value = {leveltitle:1}
temp.seitentitle.insertData = 1
temp.seitentitle.wrap = |
# create copyright marker with current year
temp.copyright = TEXT
temp.copyright {
data = date : U
strftime = %Y
wrap = © | Seitenname ·
}
# associate content elements
page.bodyTag =
page.1 = TEMPLATE
page.1.marks.PAGE_UID = TEXT
page.1.marks.PAGE_UID.field = uid
page.1 {
template = FILE
template.file = fileadmin/templates/[name]/index.html
workOnSubpart = BODY
subparts.SITETITLE < temp.seitentitle
subparts.CONTENT < styles.content.get
subparts.MENUE1 < temp.TopMenu
subparts.COPYRIGHT < temp.copyright
}
===== Erweiterungen für Basis-TypoScript =====
* [[software:typo3:favicon]]
* [[software:typo3:menue]]
* [[software:typo3:tt_news]]
{{tag>typo3 template}}