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>
 }

Footer: Netthelp

# 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