Benutzer-Werkzeuge
Dies ist eine alte Version des Dokuments!
Inhaltsverzeichnis
Einbinden von Templates in Typo3
- (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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ... </head> <body> <!-- ###BODY### begin --> <!-- ###MARKER1### begin --> ... zu ersetzender Inhalt <!-- ###MARKER1### end --> <!-- ###BODY### end --> </body> </html>
Eigenschaften von Content Markern:
- Eindeutig für einen Bereich, d.h. keine zwei Bereich dürfen durch den gleichen Marker bezeichnet werden
- Die Schreibweise
###MARKERist 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
<!– ###MARKER### –>gleichbedeutend mit<!– Toller ###MARKER### beginnt –>
Beispiel TypoScript-Layout-Setup
<code typoscript> # create PAGE-Objekt #################### page = PAGE
#CSS einbinden page.includeCSS {
file1 = fileadmin/templates/[name]/stylefile1.css file2 = fileadmin/templates/[name]/stylefile2.css
}
#Icon einbinden page.headerData.1 = TEXT page.headerData.1.value = <link rel=„shortcut icon“ type=„image/x-icon“ href=„favicon.ico“ /> page.headerData.2 = TEXT page.headerData.2.value = <link rel=„icon“ type=„image/x-icon“ href=„favicon.ico“ />
#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 {
entryLevel = 0
# erstes level
1 = TMENU
1.wrap = <ul>|</ul>
1{
# no state: normale Formatierung
NO{
wrapItemAndSub = <li> | </li>
}
# act state: gültig von der rootseite bis zur aktuellen Seite
ACT = 1
ACT {
wrapItemAndSub = <li class="act"> | </li>
}
# cur state: gültig für die aktuelle Seite
CUR=1
CUR{
wrapItemAndSub = <li class="act"> | </li>
}
}
}
temp.LeftMenu = HMENU temp.LeftMenu {
entryLevel = 1
# zweites level
1 = TMENU
1.wrap = <ul>|</ul>
1{
# no state: normale Formatierung
NO{
wrapItemAndSub = <li> | </li>
}
# cur state: gültig für die aktuelle Seite
CUR=1
CUR{
wrapItemAndSub = <li class="act"> | </li>
}
}
# drittes level
2 = TMENU
2.wrap = <ul>|</ul>
2{
# no state: normale Formatierung
NO{
wrapItemAndSub = <li class="navi"> | </li>
}
# cur state: gültig für die aktuelle Seite
CUR=1
CUR{
wrapItemAndSub = <li class="navi"><span class="act"> | </span></li>
}
}
}
# site title marker temp.seitentitle = TEXT temp.seitentitle.value = {leveltitle:1} temp.seitentitle.insertData = 1 temp.seitentitle.wrap = <h2 class=„links“>|</h2>
# create copyright marker with current year temp.copyright = TEXT temp.copyright {
data = date : U strftime = %Y wrap = © | Seitenname ·
}
# associate content elements page.bodyTag = <body> 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.MENUE2 < temp.LeftMenu subparts.COPYRIGHT < temp.copyright
}
Bei Verwendung dieses Wikis erklären Sie sich mit dem Haftungsausschluss, Nutzungsbedingungen und der Datenschutzerklärung dieses Wikis einverstanden. Impressum.
Seiten-Werkzeuge
