Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen gezeigt.

--- software:typo3:templates [2012/08/30 17:15]
khopf [Beispiel TypoScript-Layout-Setup]
+++ software:typo3:templates [2013/01/06 00:03] (aktuell)
khopf [Beispiel TypoScript-Layout-Setup] Inkonsistenz
@@ Zeile 1: / Zeile 1: @@
-====== Einbinden von Templates in Typo3 ======
+====== 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
-===== Beispiel XHTML-Seite =====
+===== (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.
+<code html>
+<!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>
+</code>
+**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
+Generelle Einstellungen:
-  #######################
-  config {
+<code typoscript>
-    # Ausgabe von XHTML aktivieren
-    xhtml_cleaning = all
+# general configuration
+#######################
-    # set doctype to XHTML 1.0 strict
+config {
-    #doctype = xhtml_trans
+  # Ausgabe von XHTML aktivieren
-    doctype = xhtml_strict
+  xhtml_cleaning = all
-    #renderCharset = utf-8
+  # set doctype to XHTML 1.0 strict
-    # set site language
+  doctype = xhtml_strict
-    htmlTag_langKey = de
-    language = de
+  # set site language
-    locale_all = german
+  language = de
-    sys_language_uid = 0
+  # enable admin panel
-    # suppress XML Prolog for IE-kompatibility
+  admPanel = 1
-    xmlprologue = none
+  # Spam Protection
-    # enable admin panel
+  spamProtectEmailAddresses = 2
-    admPanel = 1
+  spamProtectEmailAddresses_atSubst = (at)
-    # externalize CSS and JS
+  index_enable = 1
-    removeDefaultJS = 0
+}
-    # Spam Protection
+# format popup for pictures
-    spamProtectEmailAddresses = 2
+tt_content.textpic.20{
-    spamProtectEmailAddresses_atSubst = (at)
+.imageLinkWrap = 1
+.imageLinkWrap {
-    index_enable = 1
+    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
   }
+}
-  # format popup for pictures
-  tt_content.textpic.20{
+tt_content.image.20 {
 .imageLinkWrap = 1
 .imageLinkWrap {
-      enable = 1
+    enable = 1
-      bodyTag = <BODY bgColor=white leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
+    bodyTag = <BODY bgColor=white leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
-      wrap = <A href="javascript:close();"> | </A>
+    wrap = <A href="javascript:close();"> | </A>
-      JSwindow = 1
+    JSwindow = 1
-      JSwindow.newWindow = 1
+    JSwindow.newWindow = 1
-      JSwindow.expand = 0,0
+    JSwindow.expand = 0,0
-    }
   }
+}
+</code>
+Das eigentliche Template:
+<code typoscript>
+# 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
-  tt_content.image.20 {
+temp.TopMenu = HMENU
-.imageLinkWrap = 1
+temp.TopMenu {
-.imageLinkWrap {
+  # first level
-      enable = 1
+= TMENU
-      bodyTag = <BODY bgColor=white leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
+.wrap = <ul>|</ul>
-      wrap = <A href="javascript:close();"> | </A>
+{
-      JSwindow = 1
+    # no state: normale Formatierung
-      JSwindow.newWindow = 1
+    NO{
-      JSwindow.expand = 0,0
+      wrapItemAndSub = <li> | </li>
-    }
+    }
-  }
+    # cur state: gültig für die aktuelle Seite
+    CUR=1
-  # create PAGE-Objekt
+    CUR{
-  ####################
+      wrapItemAndSub = <li class="act"> | </li>
-  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
-= TMENU
-.wrap = <ul>|</ul>
-{
-         # 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
+  # second level
-  temp.LeftMenu {
+= TMENU
-    entryLevel = 1
+.wrap = <ul>|</ul>
-  # zweites level
+{
-= TMENU
+    # no state: normale Formatierung
-.wrap = <ul>|</ul>
+    NO{
-{
+      wrapItemAndSub = <li class="navi"> | </li>
-         # no state: normale Formatierung
-      NO{
-        wrapItemAndSub = <li> | </li>
-        }
-         # act state: gültig von der rootseite bis zur aktuellen Seite
-  #    ACT=1
-  #    ACT{
-  #      wrapItemAndSub = |
-  #    }
-         # cur state: gültig für die aktuelle Seite
-      CUR=1
-      CUR{
-        wrapItemAndSub = <li class="act"> | </li>
-        }
-      }
-  # drittes level
-= TMENU
-.wrap = <ul>|</ul>
-{
-         # no state: normale Formatierung
-      NO{
-        wrapItemAndSub = <li class="navi"> | </li>
-        }
-         # act state: gültig von der rootseite bis zur aktuellen Seite
-  #    ACT=1
-  #    ACT{
-  #      wrapItemAndSub = |
-  #    }
-  # 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>
     }
-  }
+    # cur state: gültig für die aktuelle Seite
-  plugin.tt_news.pageBrowser {
+    CUR=1
-    showResultCount = 0
+    CUR{
-    dontLinkActivePage = 1
+      wrapItemAndSub = <li class="navi"><span class="act"> | </span></li>
-  }
-  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>
+# 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
+}
+</code>
+===== Erweiterungen für Basis-TypoScript =====
+  * [[software:typo3:favicon]]
+  * [[software:typo3:menue]]
+  * [[software:typo3:tt_news]]
+{{tag>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

Unterschiede

Seiten-Werkzeuge