Hier werden die Unterschiede zwischen zwei Versionen gezeigt.
Nächste Überarbeitung | Vorhergehende Überarbeitung | ||
software:typo3:templates [2012/08/30 17:11] khopf angelegt |
software:typo3:templates [2013/01/06 00:03] (aktuell) khopf [Beispiel TypoScript-Layout-Setup] Inkonsistenz |
||
---|---|---|---|
Zeile 1: | Zeile 1: | ||
- | ====== Einbinden von Templates in Typo3 ====== | + | ====== 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 | - (X)HTML / CSS Template mit Dummytexten erstellen mit Beachtung von Suchmaschinenfreundlichkeit und Barrierefreiheit | ||
- HTML-Layout mit Layoutmarkern versehen | - HTML-Layout mit Layoutmarkern versehen | ||
- TypoScript-Layout-Setup ausfüllen | - TypoScript-Layout-Setup ausfüllen | ||
- | ===== Beispiel XHTML-Seite ===== | + | ===== (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. | ||
- | ===== Beispiel TypoScript-Layout-Setup ===== | + | <code html> |
- | # general configuration | + | <!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"> |
- | config { | + | <head> |
- | # Ausgabe von XHTML aktivieren | + | ... |
- | xhtml_cleaning = all | + | </head> |
+ | <body> | ||
+ | <!-- ###BODY### begin --> | ||
- | # set doctype to XHTML 1.0 strict | + | <!-- ###MARKER1### begin --> |
- | #doctype = xhtml_trans | + | ... zu ersetzender Inhalt |
- | doctype = xhtml_strict | + | <!-- ###MARKER1### end --> |
- | #renderCharset = utf-8 | + | |
- | # set site language | + | <!-- ###BODY### end --> |
- | htmlTag_langKey = de | + | </body> |
- | language = de | + | </html> |
- | locale_all = german | + | </code> |
- | sys_language_uid = 0 | + | |
- | # suppress XML Prolog for IE-kompatibility | + | **Eigenschaften von Content Markern:** |
- | xmlprologue = none | + | * 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 ''<!-- ###MARKER### -->'' gleichbedeutend mit ''<!-- Toller ###MARKER### beginnt -->'' | ||
+ | ===== Beispiel TypoScript-Layout-Setup ===== | ||
+ | Generelle Einstellungen: | ||
- | # enable admin panel | + | <code typoscript> |
- | admPanel = 1 | + | |
- | # externalize CSS and JS | + | # general configuration |
- | removeDefaultJS = 0 | + | ####################### |
- | + | config { | |
- | # Spam Protection | + | # Ausgabe von XHTML aktivieren |
- | spamProtectEmailAddresses = 2 | + | xhtml_cleaning = all |
- | spamProtectEmailAddresses_atSubst = (at) | + | |
- | + | ||
- | index_enable = 1 | + | |
- | } | + | |
- | + | ||
- | # format popup for pictures | + | |
- | tt_content.textpic.20{ | + | |
- | 1.imageLinkWrap = 1 | + | |
- | 1.imageLinkWrap { | + | |
- | enable = 1 | + | |
- | bodyTag = <BODY bgColor=white leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> | + | |
- | wrap = <A href="javascript:close();"> | </A> | + | |
- | JSwindow = 1 | + | |
- | JSwindow.newWindow = 1 | + | |
- | JSwindow.expand = 0,0 | + | |
- | } | + | |
- | } | + | |
- | tt_content.image.20 { | + | # set doctype to XHTML 1.0 strict |
- | 1.imageLinkWrap = 1 | + | doctype = xhtml_strict |
- | 1.imageLinkWrap { | + | |
- | enable = 1 | + | |
- | bodyTag = <BODY bgColor=white leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> | + | |
- | wrap = <A href="javascript:close();"> | </A> | + | |
- | JSwindow = 1 | + | |
- | JSwindow.newWindow = 1 | + | |
- | JSwindow.expand = 0,0 | + | |
- | } | + | |
- | } | + | |
- | # create PAGE-Objekt | + | # set site language |
- | #################### | + | language = de |
- | page = PAGE | + | |
- | #CSS einbinden | + | # enable admin panel |
- | page.includeCSS { | + | admPanel = 1 |
- | file1 = fileadmin/templates/[name]/stylefile1.css | + | |
- | file2 = fileadmin/templates/[name]stylefile2.css | + | |
- | } | + | |
- | #Icon einbinden | + | # Spam Protection |
- | page.headerData.1 = TEXT | + | spamProtectEmailAddresses = 2 |
- | page.headerData.1.value = <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> | + | spamProtectEmailAddresses_atSubst = (at) |
- | page.headerData.2 = TEXT | + | |
- | page.headerData.2.value = <link rel="icon" type="image/x-icon" href="favicon.ico" /> | + | |
- | #Meta-Tags einbinden | + | index_enable = 1 |
- | page.meta{ | + | } |
- | keywords = [META-keywords] | + | |
- | description = [META-secription] | + | |
- | robots = INDEX,FOLLOW | + | |
- | autor = [META-author] | + | |
- | language = german | + | |
- | } | + | |
- | #create unordered list menu | + | # format popup for pictures |
- | temp.TopMenu = HMENU | + | tt_content.textpic.20{ |
- | temp.TopMenu { | + | 1.imageLinkWrap = 1 |
- | entryLevel = 0 | + | 1.imageLinkWrap { |
- | # erstes level | + | enable = 1 |
- | 1 = TMENU | + | bodyTag = <BODY bgColor=white leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> |
- | 1.wrap = <ul>|</ul> | + | wrap = <A href="javascript:close();"> | </A> |
- | 1{ | + | JSwindow = 1 |
- | # no state: normale Formatierung | + | JSwindow.newWindow = 1 |
- | NO{ | + | JSwindow.expand = 0,0 |
- | wrapItemAndSub = <li> | </li> | + | } |
- | } | + | } |
- | # act state: gültig von der rootseite bis zur aktuellen Seite | + | |
- | ACT=1 | + | tt_content.image.20 { |
- | ACT{ | + | 1.imageLinkWrap = 1 |
- | wrapItemAndSub = <li class="act"> | </li> | + | 1.imageLinkWrap { |
- | } | + | enable = 1 |
- | # cur state: gültig für die aktuelle Seite | + | bodyTag = <BODY bgColor=white leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> |
- | CUR=1 | + | wrap = <A href="javascript:close();"> | </A> |
- | CUR{ | + | JSwindow = 1 |
- | wrapItemAndSub = <li class="act"> | </li> | + | JSwindow.newWindow = 1 |
- | } | + | JSwindow.expand = 0,0 |
- | } | + | } |
- | } | + | } |
+ | </code> | ||
- | temp.LeftMenu = HMENU | + | Das eigentliche Template: |
- | temp.LeftMenu { | + | |
- | entryLevel = 1 | + | |
- | # zweites 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 = | | + | |
- | # } | + | |
- | # cur state: gültig für die aktuelle Seite | + | |
- | CUR=1 | + | |
- | CUR{ | + | |
- | wrapItemAndSub = <li class="act"> | </li> | + | |
- | } | + | |
- | } | + | |
- | # drittes level | + | <code typoscript> |
- | + | # create PAGE-Objekt | |
- | 2 = TMENU | + | #################### |
- | 2.wrap = <ul>|</ul> | + | page = PAGE |
- | 2{ | + | |
- | # no state: normale Formatierung | + | |
- | NO{ | + | |
- | wrapItemAndSub = <li class="navi"> | </li> | + | |
- | } | + | |
- | # act state: gültig von der rootseite bis zur aktuellen Seite | + | |
- | # ACT=1 | + | |
- | # ACT{ | + | |
- | # wrapItemAndSub = | | + | |
- | # } | + | |
- | # 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 = © | Fischer Automation GmbH · | ||
- | } | ||
- | |||
- | # 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/mj/index.html | ||
- | workOnSubpart = BODY | ||
- | subparts.SITETITLE < temp.seitentitle | ||
- | subparts.CONTENT < styles.content.get | ||
- | subparts.MENUE1 < temp.TopMenu | ||
- | subparts.MENUE2 < temp.LeftMenu | ||
- | #subparts.ROOTLINE < tmp.breadcrump | ||
- | subparts.COPYRIGHT < temp.copyright | ||
- | } | ||
- | |||
- | # define different layout for dropdown menu | ||
- | [globalVar=TSFE:page|layout=1] | ||
- | page.1.template.file= [layout-file] | ||
- | [global] | ||
- | #realurl with simulatestatic | + | #CSS einbinden |
- | config { | + | page.includeCSS { |
- | simulateStaticDocuments = 1 | + | file1 = fileadmin/templates/[name]/stylefile1.css |
- | simulateStaticDocuments_addTitle = 1 | + | 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 = <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> | ||
+ | } | ||
+ | } | ||
+ | |||
+ | # second 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.COPYRIGHT < temp.copyright | ||
+ | } | ||
+ | </code> | ||
+ | |||
+ | ===== Erweiterungen für Basis-TypoScript ===== | ||
+ | * [[software:typo3:favicon]] | ||
+ | * [[software:typo3:menue]] | ||
+ | * [[software:typo3:tt_news]] | ||
- | #Plugin: tt_news | ||
- | plugin.tt_news.latestLimit = 2 | ||
- | plugin.tt_news.displayList { | ||
- | date_stdWrap.strftime = %A, den %d %B %Y | ||
- | time_stdWrap.strftime = %d.%m.%Y %H.%M | ||
- | subheader_stdWrap { | ||
- | append = TEXT | ||
- | append.data = register:newsMoreLink | ||
- | append.wrap = <span class="bodytext">|</span> | ||
- | } | ||
- | } | ||
- | plugin.tt_news.pageBrowser { | ||
- | showResultCount = 0 | ||
- | dontLinkActivePage = 1 | ||
- | } | ||
- | plugin.tt_news.displayLatest { | + | {{tag>typo3 template}} |
- | subheader_stdWrap{ | + | |
- | append = TEXT | + | |
- | append.data = register:newsMoreLink | + | |
- | append.wrap = <span class="bodytext"> |</span> | + | |
- | } | + | |
- | } | + | |
- | plugin.tt_news.displayLatest.subheader_stdWrap.wrap = <h3>|</h3> | + | |
- | plugin.tt_news.displaySingle.subheader_stdWrap.wrap = <h3>|</h3> | + |
Bei Verwendung dieses Wikis erklären Sie sich mit dem Haftungsausschluss, Nutzungsbedingungen und der Datenschutzerklärung dieses Wikis einverstanden. Impressum.