Typoscript für das Seitentemplate mit Typo3 6.2

Aus Debacher-Wiki
Wechseln zu:Navigation, Suche

In Typo3 werden sehr viele Elemente per Typoscript erzeugt. Hierbei handelt es sich um eine Art Programmiersprache, die leider nicht immer ganz übersichtlich ist. Typoscript findet sich in der Vorlage an zwei Stellen, einerseits auf der root-Seite als Seitentemplate, andererseits finden sich viele einzelne Templates im Ordner Typoscript-Templates.

Das Footer-Template

Den Ablauf kann man relativ einfach mit dem Footer Template vorstellen. Man geht zum Menüpunkt Template und auf die Seite Typoscript Template.

Typo3-62-typoscript1.png

In dem Formular muss man entscheiden, ob mein ein Template für die Website erstellen möchte, oder ein Erweiterungstemplate. Das Template für die Website liegt auf der root-Seite, hier kommen also nur Erweiterungstemplates hin.

Typo3-62-typoscript2.png

Hier geht man im einfachsten Fall auf Vollständigen Template-Datensatz bearbeiten.

Der Template-Datensatz

Typo3-62-typoscript3.png

Hier gibt man einen Titel für das Template an und im Feld Setup seinen eigentlichen Code.

Footer: Netthelp

 # dieser Code wird vom TemplaVoila Template aus angesprungen
 # ganz minimalistisch
 lib.field_footer = TEXT
 lib.field_footer {
    data = date : Y
    wrap (
  <br />&copy; &nbsp; Netthelp.de (|)
  
  )
  }

Der Code erzeugt das Copyright-Zeichen und den Text Netthelp.de. Dahinter kommt dann in Klammern die aktuelle Jahreszahl, erzeugt durch die PHP-Funktion date. Das Y in der Funktion steht für die Jahreszahl vierstellig. Ein kleines y würde zu einer zweistelligen Ausgabe führen. Diese statische Mischung aus Text und irgendwelchen Funktionen ist typisch für Typoscript und wird in der Regel mit sog. Wraps erledigt. Ein Wrap umgibt die Daten (hier die Jahrezahl) mit statischem Text. Die Position der Daten im Text wird durch den senkrechten Strich gekennzeichnet.

Aufruf über TemplaVoila

Der Name des Codeschnipsels ist lib.field_footer. Dieser Name wurde im TemplaVoila-Template festgelegt.

Typo3-62-typoscript4.png

Jedes Erweiterungstemplate muss im root-Template noch aktiviert werden.

Dazu geht man über die Funktion Template auf die root-Seite und klickt dort wieder auf Vollständigen Template-Datensatz bearbeiten. Im Reiter Enthält gibt es den Bereich Basis-Template einschließen. Dort klickt man auf das Ordner-Symbol, worauf sich ein neues Fenster mit dem Seitenbaum öffnet.

Typo3-62-typoscript5.png

Hier wählt man die Seite mit den Templates aus und dann das eben erstellte Template.

Danach kann man eine beliebige Seite im Frontend aufrufen und es erscheint immer folgender Inhalt.

Typo3-62-typoscript6.png

Mehr haben wir bisher auch noch nicht festgelegt.

Die Inhaltselemente

Es fehlt jetzt vor allem der Typoscript-Code für die Inhaltselemente.

Hauptinhalt

Also legen wir auf der Seite Typoscript-Templates ein neue Erweiterungstemplate an.

Typo3-62-typoscript7.png

Das Template muss man dann noch auf der root-Seite einbinden.

Inhalt: Hauptinhalt

 lib.field_maincontent = RECORDS
 lib.field_maincontent {
  source.current=1
  tables = tt_content
  wrap = <!--TYPO3SEARCH_begin--> | <!--TYPO3SEARCH_end-->
 }

Der Name lib.field_maincontent ist wieder aus TemplaVoila festgelegt. Die drei Codezeilen bewirken, dass der Inhalt des aktuellen Content-Elementes angezeigt wird. Nach dieser Änderung sehen nicht mehr alle Seiten gleich aus, es wird zumindest der Seiteninhalt individuell angezeigt.

Typo3-62-typoscript8.png

Das Inhaltselement lässt sich aber noch etwas optimieren, indem man im Setup die eben genannten Zeilen durch folgenden Code ersetzt:

Inhalt: Hauptinhalt

 # dieser Code wird vom TemplaVoila Template aus angesprungen
 # Abschnitt 5 fügt die Seitenüberschrift ein, 10 den Inhalt
 lib.field_maincontent = COA
 lib.field_maincontent {
  wrap=|<p style="font-size:0px">&nbsp;<p>
  5 = TEXT
  5.data = page:subtitle // page:title
  5.wrap = <h1>|</h1><br />
  10=RECORDS
  10.source.current=1
  10.tables = tt_content
  10.wrap = <!--TYPO3SEARCH_begin--> | <!--TYPO3SEARCH_end-->
 }


Hier sind die ersten beiden Zeilen Kommentar. Dann ist lib.field_maincontent nicht mehr vom Typ RECORDS, sondern vom Typ COA (content object array), ein zusammengesetztes Element. Es besteht aus zwei Teilen, einem Text (Nummer 5) der den Seiten-Untertitel oder den Seitentitel (wenn es keinen Untertitel gibt) als Seitenüberschrift ausgibt und dem bisherigen RECORDS-Teil (Nummer 10). Umgeben (gewrapped) wird das Ganze dann von einem Absatz mit einem Leerzeichen der Größe 0. Mit diesem Leerzeichen wird verhindert, dass das Element bei leeren Inhalt nicht unterdrückt wird.

Typo3-62-typoscript9.png

Das Inhaltselement ist damit dann etwas umfangreicher geworden.

Inhalt unter dem Submenü

Bei diesem Beispiel sind zwei Möglichkeiten angegeben. Die erste Möglichkeit entspricht dem einfachen Listing vom Hauptinhalt. Die zweite Möglichkeit arbeitet mit einem sog. Content-Slide. Wenn auf der aktuellen Seite kein passender Inhalt gefunden wird, dann sucht Typo3 im Seitenbaum aufwärts nach Text und stellt diesen dann dar. Damit kann man erreichen, dass in einer Rubrik immer der gleiche Text oder auch das gleiche Bild unter dem Menü auftaucht.

Der Content-Slide funktioniert aber nicht mit Elementen vom Typ RECORDS, daher muss hier mit dem Typ CONTENT gearbeitet werden.

Inhalt: Links unter Submenu

 # dieser Code wird vom TemplaVoila Template aus angesprungen
 # es gibt hier zwei Versionen, einmal ohne Content-Slide, 
 # einmal mit
 # einfach eine Version deaktivieren.
 
 ## ohne Content-Slide
 #lib.field_menucontent = RECORDS
 #lib.field_menucontent {
 #  source.current=1
 #  tables = tt_content
 #  wrap = <!--TYPO3SEARCH_begin--> | <!--TYPO3SEARCH_end-->
 #}

 ## mit Content-Slide
 lib.field_menucontent = COA
 lib.field_menucontent {
 wrap=|<p style="font-size:0px"> <p>
  10=CONTENT
  10 {
    table = tt_content
    select.where = colPos=1
    slide = -1
    wrap = <!--TYPO3SEARCH_begin--> | <!--TYPO3SEARCH_end-->
  }
 }

Inhalt rechte Spalte

Hier noch einmal fast der gleiche Code für die rechte Spalte, wieder mit der Option des Content-Slide.

Inhalt: Rechte-Spalte

 # dieser Code wird vom TemplaVoila Template aus angesprungen
 # mit Content-Slide für den Inhalt

 # es gibt hier zwei Versionen, einmal ohne Content-Slide,
 # einmal mit
 # einfach eine Version deaktivieren.

 ## ohne Content-Slide
 #lib.field_contentright = RECORDS
 #lib.field_contentright {
 #  source.current=1
 #  tables = tt_content
 #  wrap = <!--TYPO3SEARCH_begin--> | <!--TYPO3SEARCH_end-->
 #}

 ## mit Content-Slide
 lib.field_contentright = COA
 lib.field_contentright {
  wrap=|<p style="font-size:0px"> <p>
  10 = CONTENT
  10 {
   table = tt_content
   select.where = colPos=2
   slide = -1
   wrap = <!--TYPO3SEARCH_begin--> | <!--TYPO3SEARCH_end-->
  }
 }

Die Header-Grafik

Auf jeder Seite soll eine Header-Grafik auftauchen, die über die Seiteneigenschaften unter Ressourcen eingestellt werden kann. Solch eine Grafik sollte auch mit einem Content-Slide versehen werden, dann langt es auf der Ausgangsseite die Grafik zu laden, damit sie auf allen Unterseiten aktiv ist. Trotzdem kann man weiterhin dann für jede Seite die Grafik wechseln.

 # dieser Code wird vom TemplaVoila Template aus angesprungen
 # das slide bewirkt, dass ggf. weiter oben im Seitenbaum gesucht wird
 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="headerimage" style="background-image:url('|'); "><a href="/"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAO2lmDQ==" alt="clear" width="135" height="135"></a></div>
 }

Für den Fall, dass mehrere Grafiken angegeben wurden, wird die erste genommen (listNum=0). Interessant ist hier noch die komische Zeichenkette hinter img src im Wrap. Es handelt sich hier um eine ein Pixel große transparente Grafik, die quasi inline beschrieben wird. Mit solchen Data-Images spart man sich die Extra-Ladezeiten bei kleinen Bildern. Weitere Informationen findet man unter http://de.wikipedia.org/wiki/Data-URL . Im Web gibt es auch eine Reihe von Diensten, die einem eine solche Zeichenkette aus einer Grafik erzeugen, z.B. http://www.cssportal.com/image-to-data/ .

Hier dient die Grafik als Rücklink zur Startseite.

Menüs

In Typo3 gibt es eine Reihe von Elementen zum Aufbau von Menüs. Ursprünglich hat man viel mit grafischen Menüs gearbeitet (GMENU), heutzutage sind Gestaltungsmöglichkeiten mit HTML und CSS viel besser geworden, so dass man in der Regel mit Textmenüs (TMENU) gut auskommt.

Die Root-Line

Klickpfad, Brotkrumenleiste, Rootline alles sind Begriffe für das gleiche Ding. Es geht darum den Weg zur aktuellen Seite, beginnend von einer Startseite aus, darzustellen. Das erleichtert die Orientierung in einer Website. Unpassend kann die Rootline nur sein, wenn man viel mit Seiten von Typ Verweis arbeitet.

Header: Klickpfad/Rootline

 # dieser Code wird vom TemplaVoila Template aus angesprungen
 # die root-Line
 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 = <span class="pfrechts"></span> <li>|</li> 
 }

HMENU gibt an, dass es sich um ein horizontales Menü handelt, wobei sich damit auch vertikale Menüs aufbauen lassen. Hinter special gibt man an, dass es sich um ein Menü vom Typ rootline handelt und mit special.range legt man fest, von welcher Ebene aus der Pfad begonnen wird. Im beschriebenen Seitenbau liegt die Ausgangsseite auf Ebene 2 (die Zählung beginnt bei 0). Die -1 gibt an, dass es zum Ende hin keine Beschränkung gibt. Positive Zahlen bewirken eine Beschränkung der Tiefe.

Das NO (Normal) gibt an, dass der folgende Wrap für normale Links gilt und da keine speziellen Angaben z.B. für aktive Links gemacht wurden, gilt dieser Wrap für alle Links in der rootline.

Die Klassenbezeichnungen stammen übrigens aus Bootstrap, die Klasse pfrechts erzeugt ein kleines Dreieck, das nach Rechts ausgerichtet ist.

Das Service-Menü

Von der Idee her stecken unterhalb von der Seite Service die Seiten: Suche, Sitemap und Impressum. Diese Seiten sollten besonders zugänglich sein und bekommen daher ihr eigenes Menü. Der Aufbau des Typoscript-Codes erinnerst stark an die Rootline, nur dass hier jetzt der Typ auf directory gesetzt ist. Über special.value wird dann noch die Nummer der Seite angegeben, von der das Menü ausgeht, in diesem Fall die Seite mit dem Namen Service. Die Seite selber wird nicht mit angezeigt, das erklärt auch den Aufbau im Seitenbaum,

Header: ServiceMenu

 # dieser Code wird vom TemplaVoila Template aus angesprungen
 # der special.value muss ggf. an den eigenen Seitenbaum angepasst werden
 lib.field_impressum = HMENU
 lib.field_impressum {
  special = directory
  special.value = 6
  wrap = <ol class="breadcrumb">|</ol>
  1 = TMENU
  1.NO = 1
  1.NO.linkWrap = <li>|</li>
 }

Für die Seite Service sollte übrigens bei den Seiteneigenschaften im Reiter Zugriff das Häkchen bei in Menüs verbergen gesetzt sein, damit die Seite nicht im normalen Haupt-Menü erscheint.

Das Hauptmenü

Das Hauptmenü erscheint oben auf der Seite.

Hauptmenü: mainMenu

 # dieser Code wird vom TemplaVoila Template aus angesprungen
 # das Hauptmenü hat nur eine Ebene
 lib.field_nav = HMENU
 lib.field_nav {
 entryLevel = 1
 
 wrap (
  <nav class="navbar navbar-default" role="navigation">
    <!-- Titel und Schalter werden für eine bessere mobile Ansicht zusammengefasst -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
        <span class="sr-only">Navigation ein-/ausblenden</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Hauptmenü</a>
    </div>

    <!-- Alle Navigationslinks, Formulare und anderer Inhalt werden hier zusammengefasst und können dann ein- und ausgeblendet werden -->
    <div class="collapse navbar-collapse" id="navbar-collapse-1">
      <ul class="nav navbar-nav">
  |
  </ul>
    </div> <!-- /.navbar-collapse -->
 </nav> 
  )
  
  1 = TMENU
  1 {
    expAll = 0
    noBlur = 1
    NO = 1
    NO.linkWrap = <li>|</li>
  }
  1.RO < .1.NO
 
  1.ACT < .1.NO
  1.ACT.linkWrap = <li class="active">|</li>
 }

Der Code erscheint relativ kompliziert, was aber hauptsächlich an dem einen mehrzeiligen Wrap liegt. Dieser Wrap bewirkt, dass das Menü responsive wird, sich also bei kleinen Bildschirmen zusammenklappt. Hier stecken also nur ein paar CSS-Tricks drin, die auf den Bootstrap-Seiten erläutert werden.

Untermenü Links

Das Untermenü wird im zweispaltigen oder dreispaltigen Layout in der linken Spalte dargestellt. Hier kann keine Startseite angegeben werden, die ist ja je nach angewähltem Punkt im Hauptmenü unterschiedlich. Daher ist hier unter entryLevel die Startebene angegeben. Seiten unterhalb dieser Ebene (und im Seitenbaum unter der aktuellen Seite) tauchen also im Menü auf.

Untermenü: Links

 # dieser Code wird vom TemplaVoila Template aus angesprungen
 # das Untermenü mir drei Ebenen
 lib.field_submenu = HMENU
 lib.field_submenu {
  entryLevel = 2
  wrap = <ul class="nav nav-pills  nav-stacked" role="tablist">|</ul>
  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>
 }

Das Menü geht insgesamt über maximal drei Ebenen. Jede der Ebenen kann individuell aktiviert und konfiguriert werden, das erhöht die Gestaltungsspielräume. Das expAll=0 bewirkt, dass das Menü nicht von Beginn an aufgeklappt erscheint.

Das root-Template

Im Feld Setup des root-Templates habe ich noch stehen:

 page = PAGE
 page {
  # wir setzten templavoila ein
  10 = USER
  10.userFunc = tx_templavoila_pi1->main_page
  10.disableExplosivePreview = 1
  
  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="fileadmin/templates/bootstrap/html5shiv.js"></script>
      <script src="fileadmin/templates/bootstrap/respond.min.js"></script>
    <![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.)
   
  # das folgende Javascript wird für das Responsive DropDown benötigt, ab 2. Ebene
  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>
  )
   
  # Quelle für diese Vorlage
  meta{
    AUTHOR= Uwe Debacher und Netthelp
    DESCRIPTION = Netthelp - Die Schülerfirma in Hamburg
   
    keywords.field = keywords
    keywords.ifEmpty ( 
         Netthelp, Stadtteilschule, Richard-Linde-Weg, Hansa, Gymnasium, Lohbrügge, Bergedorf, Hamburg, Bildung, Medien, Schule, RLW, Lern-Oase, Lernoase, LEGO, Kinder, Schüler, Abitur, Oberstufe
    )
    description.field = description
    description.ifEmpty ( 
         Sschülerfirma Netthelp
    )
    robots = INDEX,FOLLOW
  } 
 
  # jede Seite hat ihre body-id und ist damit selektiv per css gestaltbar
  bodyTag >
  bodyTagCObject = TEXT
  bodyTagCObject.dataWrap = <body id="uid-{field:uid}">
 
}  
   
config {
  # moderne Einstellung
  doctype = html5
  htmlTag_setParams = lang="de" dir="ltr"  
  xhtml_cleaning = none
   
  # gehört zum subtitle als titel (s.o.)
  noPageTitle = 2
   
  # benötigt die Extension simulatestatic
  simulateStaticDocuments = 1
  simulateStaticDocuments_noTypeIfNoTitle = 1
 
  # 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 Abbildung
  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)
 
 }


Und unter Konstanten

plugin.tt_news.pid_list = 15
plugin.tt_news.archiveTypoLink.parameter = 17
plugin.tt_news.file.templateFile = fileadmin/templates/news_template.html
plugin.tt_news.singlePid = 16

plugin.perfectlightbox.libraryToUse = jquery
plugin.perfectlightbox.bodyScripts = 0
plugin.perfectlightbox.lightBoxMaxW = 800
plugin.perfectlightbox.lightBoxMaxH = 600
plugin.perfectlightbox.includeJSLibrarys = 1


Weitere Grundlagen zu Typoscript

Unter

habe ich noch weitere Texte zu Typoscript, sie beziehen sich aber auf die Version 4.5