Hier werden die Unterschiede zwischen zwei Versionen gezeigt.
Both sides previous revision Vorhergehende Überarbeitung Nächste Überarbeitung | Vorhergehende Überarbeitung | ||
software:typo3:templates [2012/10/08 09:15] khopf [(X)HTML-Seite mit Content-Markern] |
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 | ||
Zeile 30: | Zeile 33: | ||
* 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 -->'' | * 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 ===== | ===== Beispiel TypoScript-Layout-Setup ===== | ||
+ | Generelle Einstellungen: | ||
+ | |||
<code typoscript> | <code typoscript> | ||
+ | |||
# general configuration | # general configuration | ||
####################### | ####################### | ||
config { | config { | ||
- | # Ausgabe von XHTML aktivieren | + | # Ausgabe von XHTML aktivieren |
- | xhtml_cleaning = all | + | xhtml_cleaning = all |
- | + | ||
- | # set doctype to XHTML 1.0 strict | + | # set doctype to XHTML 1.0 strict |
- | #doctype = xhtml_trans | + | |
doctype = xhtml_strict | doctype = xhtml_strict | ||
- | #renderCharset = utf-8 | + | |
# set site language | # set site language | ||
- | htmlTag_langKey = de | ||
language = de | language = de | ||
- | locale_all = german | + | |
- | sys_language_uid = 0 | + | |
- | + | ||
- | # suppress XML Prolog for IE-kompatibility | + | |
- | xmlprologue = none | + | |
# enable admin panel | # enable admin panel | ||
admPanel = 1 | admPanel = 1 | ||
- | + | ||
- | # externalize CSS and JS | + | |
- | removeDefaultJS = 0 | + | |
# Spam Protection | # Spam Protection | ||
spamProtectEmailAddresses = 2 | spamProtectEmailAddresses = 2 | ||
spamProtectEmailAddresses_atSubst = (at) | spamProtectEmailAddresses_atSubst = (at) | ||
+ | |||
index_enable = 1 | index_enable = 1 | ||
} | } | ||
+ | |||
# format popup for pictures | # format popup for pictures | ||
- | tt_content.textpic.20{ | + | tt_content.textpic.20{ |
- | 1.imageLinkWrap = 1 | + | 1.imageLinkWrap = 1 |
- | 1.imageLinkWrap { | + | 1.imageLinkWrap { |
- | enable = 1 | + | enable = 1 |
- | bodyTag = <BODY bgColor=white leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> | + | bodyTag = <BODY bgColor=white leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> |
- | wrap = <A href="javascript:close();"> | </A> | + | wrap = <A href="javascript:close();"> | </A> |
- | JSwindow = 1 | + | JSwindow = 1 |
- | JSwindow.newWindow = 1 | + | JSwindow.newWindow = 1 |
- | JSwindow.expand = 0,0 | + | JSwindow.expand = 0,0 |
- | } | + | } |
} | } | ||
- | + | ||
- | tt_content.image.20 { | + | tt_content.image.20 { |
- | 1.imageLinkWrap = 1 | + | 1.imageLinkWrap = 1 |
- | 1.imageLinkWrap { | + | 1.imageLinkWrap { |
- | enable = 1 | + | enable = 1 |
- | bodyTag = <BODY bgColor=white leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> | + | bodyTag = <BODY bgColor=white leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> |
- | wrap = <A href="javascript:close();"> | </A> | + | wrap = <A href="javascript:close();"> | </A> |
- | JSwindow = 1 | + | JSwindow = 1 |
- | JSwindow.newWindow = 1 | + | JSwindow.newWindow = 1 |
- | JSwindow.expand = 0,0 | + | JSwindow.expand = 0,0 |
- | } | + | } |
} | } | ||
+ | </code> | ||
+ | Das eigentliche Template: | ||
+ | |||
+ | <code typoscript> | ||
# create PAGE-Objekt | # create PAGE-Objekt | ||
#################### | #################### | ||
page = PAGE | page = PAGE | ||
+ | |||
#CSS einbinden | #CSS einbinden | ||
page.includeCSS { | page.includeCSS { | ||
file1 = fileadmin/templates/[name]/stylefile1.css | file1 = fileadmin/templates/[name]/stylefile1.css | ||
- | file2 = fileadmin/templates/[name]stylefile2.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 | #Meta-Tags einbinden | ||
Zeile 115: | Zeile 109: | ||
#create unordered list menu | #create unordered list menu | ||
+ | | ||
temp.TopMenu = HMENU | temp.TopMenu = HMENU | ||
temp.TopMenu { | temp.TopMenu { | ||
- | entryLevel = 0 | + | # first level |
- | # 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 = TMENU | ||
1.wrap = <ul>|</ul> | 1.wrap = <ul>|</ul> | ||
Zeile 157: | Zeile 127: | ||
} | } | ||
- | # drittes level | + | # second level |
- | | + | |
2 = TMENU | 2 = TMENU | ||
2.wrap = <ul>|</ul> | 2.wrap = <ul>|</ul> | ||
Zeile 185: | Zeile 154: | ||
data = date : U | data = date : U | ||
strftime = %Y | strftime = %Y | ||
- | wrap = © | Fischer Automation GmbH · | + | wrap = © |  Seitenname · |
} | } | ||
Zeile 195: | Zeile 164: | ||
page.1 { | page.1 { | ||
template = FILE | template = FILE | ||
- | template.file = fileadmin/templates/mj/index.html | + | template.file = fileadmin/templates/[name]/index.html |
workOnSubpart = BODY | workOnSubpart = BODY | ||
subparts.SITETITLE < temp.seitentitle | subparts.SITETITLE < temp.seitentitle | ||
subparts.CONTENT < styles.content.get | subparts.CONTENT < styles.content.get | ||
subparts.MENUE1 < temp.TopMenu | subparts.MENUE1 < temp.TopMenu | ||
- | subparts.MENUE2 < temp.LeftMenu | ||
- | #subparts.ROOTLINE < tmp.breadcrump | ||
subparts.COPYRIGHT < temp.copyright | subparts.COPYRIGHT < temp.copyright | ||
} | } | ||
+ | </code> | ||
- | # define different layout for dropdown menu | + | ===== Erweiterungen für Basis-TypoScript ===== |
- | [globalVar=TSFE:page|layout=1] | + | * [[software:typo3:favicon]] |
- | page.1.template.file= [layout-file] | + | * [[software:typo3:menue]] |
- | [global] | + | * [[software:typo3:tt_news]] |
- | # realurl with simulatestatic | ||
- | config { | ||
- | simulateStaticDocuments = 1 | ||
- | simulateStaticDocuments_addTitle = 1 | ||
- | } | ||
- | #Plugin: tt_news | + | {{tag>typo3 template}} |
- | 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 { | + | |
- | 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> | + | |
- | </code> | + |
Bei Verwendung dieses Wikis erklären Sie sich mit dem Haftungsausschluss, Nutzungsbedingungen und der Datenschutzerklärung dieses Wikis einverstanden. Impressum.