Typoscript für das Seitentemplate mit Typo3 7.6
In der Vorlage fehlen jetzt noch die Typoscript-Elemente für den Seitenkopf und den Footer. Aus den Templates heraus werden sie zwar schon angesprungen, aber bisher ist noch kein entsprechender Code vorhanden. Für die Speicherung von Typoscript-Code benutze ich den Sysordner Typoscript-Templates.
Über die Funktion Templates lege ich also auf der Seite Typoscript-Templates einige neue Elemente an.
Header: Image
Für das header-Bild dient folgender Code:
# Dieser Code wird von den Templates aus angesprungen lib.field_headerimage = IMG_RESOURCE lib.field_headerimage { file.import.data = levelmedia:2, slide file.treatIdAsReference = 1 file.import.listNum = 0 stdWrap.wrap ( <div id="skiplink"> <a class="skip" title="Direkt zur Navigation springen" href="#navigation">Zur Navigation springen</a><br> <a class="skip" title="Direkt zum Content springen" href="#content">Zum Content springen</a> </div> <div id="headerimage" style="background-image:url('/|'); "><a href="/"> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAO2lmDQ==" alt="Zur Startseite" width="135" height="135"> </a></div> ) }
Der Code ist mit einem Content-Slide verbunden, das heißt immer dann, wenn auf der aktuellen Seite kein header-bild gefunden wird, dann geht das Tool im Seitenbaum hoch, bis es eine Seite mit Header-Bild findet. Man sollte also in den Seiteneigenschaften der root-Seite eine passende Datei hinterlegen, z.B.:
Header: Klickpfad/Rootline
# Dieser Code wird vom Partial rootline angesprungen lib.field_rootline = HMENU lib.field_rootline { special = rootline wrap=<ol class="breadcrumb"><li> <a href="/index.php">Klickpfad</a> </li>|</ol> special.range = 2 | -1 1 = TMENU 1.NO = 1 1.NO.linkWrap = <li><span class="pfrechts"></span> |</li> }
Header: ServiceMenu
# Dieser Code wird vom Partial service aus angesprungen # Hier muss unter special.value die ID der Oberseite angegeben werden lib.field_service = HMENU lib.field_service { special = directory special.value = 6 entryLevel = 1 wrap = <ol class="breadcrumb">|</ol> 1 = TMENU 1.NO = 1 1.NO.linkWrap = <li>|</li> }
Hier muss man darauf achten, hinter special.value die ID der dem Menü übergeordneten Seite angegeben werden muss.
Hauptmenü: DropDown
# dieser Code wird vom Root Template aus angesprungen # zur Auswahl stehen drei Arten des Menüs # das Hauptmenü hat drei Ebenen # lib.mainnav =HMENU lib.mainnav { entryLevel = 1 1 = TMENU 1 { expAll = 1 NO = 1 NO.linkWrap = <li>|</li> NO.stdWrap.htmlSpecialChars = 1 IFSUB = 1 IFSUB.wrapItemAndSub = <li>|</li> IFSUB.stdWrap.dataWrap = |<b class="caret"></b> ACTIFSUB = 1 ACTIFSUB.wrapItemAndSub = <li class="active">|</li> ACTIFSUB.stdWrap.dataWrap = |<b class="caret"></b> } 2 < .1 2 { IFSUB = 1 IFSUB.wrapItemAndSub = <li class="dropdown dropdown-submenu">|</li> IFSUB.stdWrap.dataWrap= | ACTIFSUB = 1 ACTIFSUB.wrapItemAndSub = <li class="dropdown dropdown-submenu active">|</li> ACTIFSUB.stdWrap.dataWrap= | wrap = <ul class="dropdown-menu">|</ul> } 3 < .2 3 { ACT = 1 ACT.wrapItemAndSub = <li class="active">|</li> wrap = <ul class="dropdown-menu">|</ul> } }
Untermenü: Links
# Dieser Code wird von den Template zweispaltung und dreispaltig aus angesprungen # lib.field_submenu = HMENU lib.field_submenu { entryLevel = 2 1 = TMENU 1 { expAll = 0 noBlur = 1 NO.linkWrap = <li role="presentation" class="ebene1">|</li> NO = 1 } 1.RO < .1.NO 1.ACT < .1.NO 1.ACT.linkWrap = <li role="presentation" class="ebene1 active">|</li> 1.IFSUB < .1.NO 1.IFSUB.stdWrap.dataWrap = |<span class="caret"></span> 1.ACTIFSUB < .1.ACT 1.ACTIFSUB.stdWrap.dataWrap = |<span class="caret white"></span> 2 = TMENU 2 < lib.field_submenu.1 2.NO.linkWrap = <li role="presentation" class="ebene2">|</li> 2.RO < .2.NO 2.ACT.linkWrap = <li role="presentation" class="ebene2 active">|</li> 2.IFSUB < .2.NO 2.IFSUB.stdWrap.dataWrap = |<span class="caret"></span> 2.ACTIFSUB < .2.ACT 2.ACTIFSUB.stdWrap.dataWrap = |<span class="caret white"></span> 3 = TMENU 3 < lib.field_submenu.1 3.NO.linkWrap = <li role="presentation" class="ebene3">|</li> 3.RO < .3.NO 3.ACT.linkWrap = <li role="presentation" class="ebene3 active">|</li> 3.IFSUB < .3.NO 3.IFSUB.stdWrap.dataWrap = |<span class="caret"></span> 3.ACTIFSUB < .3.ACT 3.ACTIFSUB.stdWrap.dataWrap = |<span class="caret white"></span> }
# Dieser Code wird vom Partial footer angesprungen lib.field_footer = TEXT lib.field_footer { data = date : Y wrap ( <br />© Netthelp.de (|) ) } #lib.field_footer = CONTENT #lib.field_footer { # table = tt_content # select.pidInList = 21 # select.uidInList = 143 # select.languageField = sys_language_uid # }
Einbindung in das Root-Template
Damit die eben erstellte Elemente in Aktion treten können müssen sie im Template der Root-Seite eingebunden werden. Dazu geht man über die funktion Template auf die Root-seite, dort auf Vollständigen Template-Datensatz bearbeiten und kann dann unter Basis-Template einschließen die einzelnen Template aufnehmen.
Dazu klickt man auf das Ordner-Symbol rechts und kann dann in Suchfenster die Elemente hinzufügen. Im Feld Suchebenen muss man in der Regel die Zahl der Ebenen erhöhen und dann neu suchen lassen.
Nach diesen Schritten sollte die Startseite das gewünschte Layout zeigen, auch wenn noch keine Inhalte vorhanden sind.
Das root-Template
Das root-Template hat bei mir am Ende folgenden Inhalt:
page = PAGE page { bodyTag > bodyTagCObject = TEXT bodyTagCObject.dataWrap = <body id="uid-{field:uid}"> config.index_enable = 1 10 = FLUIDTEMPLATE 10 { partialRootPath = {$resDir}/Private/Partials layoutRootPath = {$resDir}/Private/Layouts variables { inhaltLinks < styles.content.get inhaltLinks.select.where = colPos = 1 inhaltLinks.slide = -1 hauptInhalt < styles.content.get hauptInhalt.select.where = colPos = 0 inhaltRechts < styles.content.get inhaltRechts.select.where = colPos = 2 inhaltRechts.slide = -1 } # Ende variables #file = {$resDir}/Private/Templates/zweispaltig.html file.stdWrap.cObject = CASE file.stdWrap.cObject { key.data = levelfield:-1, backend_layout_next_level, slide key.override.field = backend_layout # key.data = pagelayout default = TEXT default.value = {$resDir}/Private/Templates/einspaltig.html 1 < .default 2 < .default 2.value = {$resDir}/Private/Templates/zweispaltig.html 3 < .default 3.value = {$resDir}/Private/Templates/dreispaltig.html } } # Ende FLUIDTEMPLATE headerData.20 = TEXT headerData.20.value ( <!-- Unterstützung für Media Queries und HTML5-Elemente im Internet Explorer über HTML5 shim und Respond.js --> <!-- ACHTUNG: Respond.js funktioniert nicht, wenn du die Seite über file:// aufrufst --> <!--[if lt IE 9]> <script src="{$resDir}/Public/JavaScript/html5shiv.js"></script> <script src="{$resDir}/Public/JavaScript/respond.min.js"></script> <style type="text/css"> ul.nav {height: auto;} .equal { margin-bottom: -99999px; padding-bottom: 99999px;} .equalheight { overflow: hidden; } </style> <![endif]--> ) # Seite: subtitle als titel headerData.112 = TEXT headerData.112.field = title headerData.112.wrap = <title>Netthelp.de: |</title> # es ist noch config.noPageTitle = 2 notwendig (s.u.) includeCSS { bootstrap = {$resDir}/Public/Css/Bootstrap/css/bootstrap.css magnific = {$resDir}/Public/Css/magnific-popup.css anpassung = {$resDir}/Public/Css/anpassung.css } # Ende includeCSS includeJSlibs { jquery={$resDir}/Public/JavaScript/jquery.min.js bootstrap={$resDir}/Public/JavaScript/bootstrap.min.js } footerData.10 = TEXT footerData.10.value ( <script type="text/javascript"> (function($){ $(document).ready(function(){ $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) { event.preventDefault(); event.stopPropagation(); $(this).parent().siblings().removeClass('open'); $(this).parent().toggleClass('open'); }); }); })(jQuery); </script> ) meta { X-UA-Compatible = IE=edge,chrome=1 X-UA-Compatible.httpEquivivalent=1 viewport = width=device-width,initial-scale=1 description.field = description description.ifEmpty = {$defaultDescription} } # Ende meta } # Ende Page config { # moderne Einstellung doctype = html5 htmlTag_setParams = lang="de" dir="ltr" xhtml_cleaning = none # gehört zum subtitle als titel (s.o.) noPageTitle = 2 # in den einleitenden Typo3-Kommentar headerComment = Templates von Netthelp.de # einfach alle Einstellmöglichkeiten nutzen language = de htmlTag_langKey = de sys_language_uid = 0 locale_all = de_DE # kein Hochskalieren von Abbildungen noScaleUp = 1 sendCacheHeaders = 1 # css und js Dateien von Typo3 werden je in einer temp-Datei zusammengefasst inlineStyle2TempFile = 1 # removeDefaultJS = external # removeDefaultJS = 1 #neu # compressJs = 1 # compressCss = 1 # concatenateCss = 1 # concatenateJs = 1 # für die Suche index_enable = 1 sword_standAlone = 0 sword_noMixedCase = 0 # für die Ziele von Links intTarget = _self extTarget = _blank # spamProtectEmailAddresses = 1 spamProtectEmailAddresses = ascii spamProtectEmailAddresses_atSubst = (at) spamProtectEmailAddresses_lastDotSubst = (dot) prefixLocalAnchors = 1 simulateStaticDocuments = 0 tx_realurl_enable = 1 absRelPath = / absRefPrefix = / disablePrefixComment = 1 } #Ende config # welche Art von Hauptmenü, Klassisch (1), DropDown (2) oder DropDown responsive (2) lib.mainnav < lib.mainNav2