====== Typo3: Einbinden von Templates ====== //<- Zurück zu [[software: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.




  
    ...
  
  
    

    
    ... zu ersetzender Inhalt

**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 '''' gleichbedeutend mit '''' ===== 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 = 
    wrap =  | 
    JSwindow = 1
    JSwindow.newWindow = 1
    JSwindow.expand = 0,0
  }
}
 
tt_content.image.20 {
  1.imageLinkWrap = 1
  1.imageLinkWrap {
    enable = 1
    bodyTag = 
    wrap =  | 
    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 = |
  1{
    # no state: normale Formatierung
    NO{
      wrapItemAndSub =  | 
    }
    # cur state: gültig für die aktuelle Seite
    CUR=1
    CUR{
      wrapItemAndSub =  | 
    }
  }   

  # second level
  2 = TMENU
  2.wrap = |
  2{
    # no state: normale Formatierung
    NO{
      wrapItemAndSub =  | 
    }
    # cur state: gültig für die aktuelle Seite
    CUR=1
    CUR{
      wrapItemAndSub =  | 
    }
  }
} 

# site title marker
temp.seitentitle = TEXT
temp.seitentitle.value = {leveltitle:1}
temp.seitentitle.insertData = 1
temp.seitentitle.wrap = | 

# create copyright marker with current year
temp.copyright = TEXT
temp.copyright {
  data = date : U
  strftime = %Y
  wrap = © |  Seitenname ·
}

# associate content elements
page.bodyTag = 
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 ===== * [[software:typo3:favicon]] * [[software:typo3:menue]] * [[software:typo3:tt_news]] {{tag>typo3 template}}