Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen gezeigt.

--- software:typo3:templates [2012/08/30 17:24]
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 =====
+Generelle Einstellungen:
 <code typoscript>
 # 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{
 .imageLinkWrap = 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 {
 .imageLinkWrap = 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
   }
 }
+</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
+   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
@@ Zeile 92: / Zeile 109: @@
 #create unordered list menu
 temp.TopMenu = HMENU
 temp.TopMenu {
-  entryLevel = 0
+  # first level
-  # 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
-temp.LeftMenu {
-  entryLevel = 1
-  # zweites level
 = TMENU
 .wrap = <ul>|</ul>
@@ Zeile 134: / Zeile 127: @@
   }
-  # drittes level
+  # second level
 = TMENU
 .wrap = <ul>|</ul>
@@ Zeile 162: / Zeile 154: @@
   data = date : U
   strftime = %Y
-  wrap = &copy;&nbsp;|&nbsp;Fischer Automation GmbH &middot;
+  wrap = &copy;&nbsp;|&nbsp; Seitenname &middot;
 }
@@ Zeile 172: / Zeile 164: @@
 page.1 {
    template = FILE
-   template.file = fileadmin/templates/mj/index.html
+   template.file = fileadmin/templates/[name]/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
 }
+</code>
-# define different layout for dropdown menu
+===== Erweiterungen für Basis-TypoScript =====
-[globalVar=TSFE:page|layout=1]
+  * [[software:typo3:favicon]]
-  page.1.template.file= [layout-file]
+  * [[software:typo3:menue]]
-[global]
+  * [[software:typo3:tt_news]]
-# realurl with simulatestatic
-config {
-  simulateStaticDocuments = 1
-  simulateStaticDocuments_addTitle = 1
-}
-#Plugin: tt_news
+{{tag>typo3 template}}
-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>
-</code>

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