Typoscript für das Seitentemplate mit Typo3 7.6
Aus Debacher-Wiki
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.
Inhaltsverzeichnis
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
