Typo3: Einbinden von Templates

← Zurück zu 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
HTML-Layout mit Layoutmarkern versehen
TypoScript-Layout-Setup ausfüllen

(X)HTML-Seite mit Content-Markern

Typo3 Nutzt sogenannte Content Marker, die später durch Inhalt ersetzt werden, den Typo3 generiert. So werden alle Inhalte, die zwischen ###MARKER1### und ###MARKER1### stehen später, falls in Typoscript definiert, ersetzt. Der ###BODY### Marker zeigt Typo3 an, wo der Inhalt anfängt, der nicht ersetzt werden darf, da z.B. der Kopf- und Fußbereich des (X)HTML-Dokuments komplett von Typo3 erzeugt wird.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    ...
  </head>
  <body>
    <!-- ###BODY### begin -->
 
    <!-- ###MARKER1### begin -->
    ... zu ersetzender Inhalt
    <!-- ###MARKER1### end -->
 
    <!-- ###BODY### end -->
  </body>
</html>

Eigenschaften von Content Markern:

Eindeutig für einen Bereich, d.h. keine zwei Bereich dürfen durch den gleichen Marker bezeichnet werden
Die Schreibweise ###MARKER ist ausschlaggeben, keine Leerzeichen Zwischen dem String in der Mitte und den Hashtags
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

Generelle Einstellungen:

# general configuration
#######################
config {
  # Ausgabe von XHTML aktivieren
  xhtml_cleaning = all
 
  # set doctype to XHTML 1.0 strict
  doctype = xhtml_strict
 
  # set site language
  language = de
 
  # enable admin panel
  admPanel = 1
 
  # Spam Protection
  spamProtectEmailAddresses = 2
  spamProtectEmailAddresses_atSubst = (at)
 
  index_enable = 1
}
 
# format popup for pictures
tt_content.textpic.20{
  1.imageLinkWrap = 1
  1.imageLinkWrap {
    enable = 1
    bodyTag = <BODY bgColor=white leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    wrap = <A href="javascript:close();"> | </A>
    JSwindow = 1
    JSwindow.newWindow = 1
    JSwindow.expand = 0,0
  }
}
 
tt_content.image.20 {
  1.imageLinkWrap = 1
  1.imageLinkWrap {
    enable = 1
    bodyTag = <BODY bgColor=white leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    wrap = <A href="javascript:close();"> | </A>
    JSwindow = 1
    JSwindow.newWindow = 1
    JSwindow.expand = 0,0
  }
}

Das eigentliche Template:

# create PAGE-Objekt
####################
page = PAGE
 
 
#CSS einbinden
page.includeCSS {
   file1 = fileadmin/templates/[name]/stylefile1.css
   file2 = fileadmin/templates/[name]/stylefile2.css
}
 
#Meta-Tags einbinden
page.meta{    
  keywords = [META-keywords]
  description = [META-secription]
  robots = INDEX,FOLLOW
  autor = [META-author]
  language = german
}
 
#create unordered list menu
 
temp.TopMenu = HMENU
temp.TopMenu {
  # first level
  1 = TMENU
  1.wrap = <ul>|</ul>
  1{
    # no state: normale Formatierung
    NO{
      wrapItemAndSub = <li> | </li>
    }
    # cur state: gültig für die aktuelle Seite
    CUR=1
    CUR{
      wrapItemAndSub = <li class="act"> | </li>
    }
  }   
 
  # second level
  2 = TMENU
  2.wrap = <ul>|</ul>
  2{
    # no state: normale Formatierung
    NO{
      wrapItemAndSub = <li class="navi"> | </li>
    }
    # cur state: gültig für die aktuelle Seite
    CUR=1
    CUR{
      wrapItemAndSub = <li class="navi"><span class="act"> | </span></li>
    }
  }
} 
 
# site title marker
temp.seitentitle = TEXT
temp.seitentitle.value = {leveltitle:1}
temp.seitentitle.insertData = 1
temp.seitentitle.wrap = <h2 class="links">|</h2> 
 
# create copyright marker with current year
temp.copyright = TEXT
temp.copyright {
  data = date : U
  strftime = %Y
  wrap = &copy;&nbsp;|&nbsp; Seitenname &middot;
}
 
# associate content elements
page.bodyTag = <body>
page.1 = TEMPLATE
page.1.marks.PAGE_UID = TEXT 
page.1.marks.PAGE_UID.field = uid
page.1 {
   template = FILE
   template.file = fileadmin/templates/[name]/index.html
   workOnSubpart = BODY
   subparts.SITETITLE < temp.seitentitle
   subparts.CONTENT < styles.content.get
   subparts.MENUE1 < temp.TopMenu
   subparts.COPYRIGHT < temp.copyright
}

Erweiterungen für Basis-TypoScript

typo3, template

Bei Verwendung dieses Wikis erklären Sie sich mit dem Haftungsausschluss, Nutzungsbedingungen und der Datenschutzerklärung dieses Wikis einverstanden. Impressum.

Wiba10 wiki

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Inhaltsverzeichnis

Typo3: Einbinden von Templates

(X)HTML-Seite mit Content-Markern

Beispiel TypoScript-Layout-Setup

Erweiterungen für Basis-TypoScript

Seiten-Werkzeuge