Einbinden von Templates in Typo3

(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

# general configuration
#######################
config {
  # Ausgabe von XHTML aktivieren 
  xhtml_cleaning = all 
 
  # set doctype to XHTML 1.0 strict 
  #doctype = xhtml_trans
  doctype = xhtml_strict
  #renderCharset = utf-8
 
  # set site language
  htmlTag_langKey = de
  language = de
  locale_all = german
  sys_language_uid = 0
 
  # suppress XML Prolog for IE-kompatibility
  xmlprologue = none
 
  # enable admin panel
  admPanel = 1
 
  # externalize CSS and JS
  removeDefaultJS = 0
 
  # 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 
  } 
}
 
# create PAGE-Objekt
####################
page = PAGE
 
#CSS einbinden
page.includeCSS {
   file1 = fileadmin/templates/[name]/stylefile1.css
   file2 = fileadmin/templates/[name]stylefile2.css
}
 
#Icon einbinden
page.headerData.1 = TEXT
page.headerData.1.value = <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
page.headerData.2 = TEXT
page.headerData.2.value = <link rel="icon" type="image/x-icon" href="favicon.ico" />
 
#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 {
  entryLevel = 0
  # erstes level
  1 = TMENU
  1.wrap = <ul>|</ul>
  1{
    # no state: normale Formatierung
    NO{
      wrapItemAndSub = <li> | </li>
    }
    # act state: gültig von der rootseite bis zur aktuellen Seite
    ACT = 1
    ACT {
      wrapItemAndSub = <li class="act"> | </li>
    }
    # cur state: gültig für die aktuelle Seite 
    CUR=1 
    CUR{
      wrapItemAndSub = <li class="act"> | </li>
    }
  }
}   
 
temp.LeftMenu = HMENU
temp.LeftMenu {
  entryLevel = 1
  # zweites 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>
    }
  }   
 
  # drittes 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;Fischer Automation GmbH &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/mj/index.html
   workOnSubpart = BODY
   subparts.SITETITLE < temp.seitentitle
   subparts.CONTENT < styles.content.get
   subparts.MENUE1 < temp.TopMenu
   subparts.MENUE2 < temp.LeftMenu
   #subparts.ROOTLINE < tmp.breadcrump
   subparts.COPYRIGHT < temp.copyright
}
 
# define different layout for dropdown menu
[globalVar=TSFE:page|layout=1]
  page.1.template.file= [layout-file]
[global]
 
# realurl with simulatestatic
config {
  simulateStaticDocuments = 1
  simulateStaticDocuments_addTitle = 1
}
 
#Plugin: tt_news
plugin.tt_news.latestLimit = 2
plugin.tt_news.displayList {
  date_stdWrap.strftime = %A, den %d %B %Y
  time_stdWrap.strftime = %d.%m.%Y %H.%M
  subheader_stdWrap {  
     append = TEXT  
     append.data = register:newsMoreLink  
     append.wrap = <span class="bodytext">|</span>
  }
}
plugin.tt_news.pageBrowser {
  showResultCount = 0
  dontLinkActivePage = 1
}
 
plugin.tt_news.displayLatest {
  subheader_stdWrap{
    append = TEXT  
    append.data = register:newsMoreLink  
    append.wrap = <span class="bodytext"> |</span>
  }
}
plugin.tt_news.displayLatest.subheader_stdWrap.wrap = <h3>|</h3>
plugin.tt_news.displaySingle.subheader_stdWrap.wrap = <h3>|</h3>

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

Einbinden von Templates in Typo3

(X)HTML-Seite mit Content-Markern

Beispiel TypoScript-Layout-Setup

Seiten-Werkzeuge