Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen gezeigt.

--- software:typo3:templates [2012/08/30 17:11]
khopf angelegt
+++ 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.
-===== Beispiel TypoScript-Layout-Setup =====
+<code html>
- # general configuration
+<!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">
- config {
+  <head>
-   # Ausgabe von XHTML aktivieren
+    ...
-   xhtml_cleaning = all
+  </head>
+  <body>
+    <!-- ###BODY### begin -->
-   # set doctype to XHTML 1.0 strict
+    <!-- ###MARKER1### begin -->
-   #doctype = xhtml_trans
+    ... zu ersetzender Inhalt
-   doctype = xhtml_strict
+    <!-- ###MARKER1### end -->
-   #renderCharset = utf-8
-   # set site language
+    <!-- ###BODY### end -->
-   htmlTag_langKey = de
+  </body>
-   language = de
+</html>
-   locale_all = german
+</code>
-   sys_language_uid = 0
-   # suppress XML Prolog for IE-kompatibility
+**Eigenschaften von Content Markern:**
-   xmlprologue = none
+  * 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:
-   # enable admin panel
+<code typoscript>
-   admPanel = 1
-   # externalize CSS and JS
+# general configuration
-   removeDefaultJS = 0
+#######################
+config {
-   # Spam Protection
+  # Ausgabe von XHTML aktivieren
-   spamProtectEmailAddresses = 2
+  xhtml_cleaning = all
-   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 {
+  # set doctype to XHTML 1.0 strict
-.imageLinkWrap = 1
+  doctype = xhtml_strict
-.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
+  # set site language
- ####################
+  language = de
- page = PAGE
- #CSS einbinden
+  # enable admin panel
- page.includeCSS {
+  admPanel = 1
-    file1 = fileadmin/templates/[name]/stylefile1.css
-    file2 = fileadmin/templates/[name]stylefile2.css
- }
- #Icon einbinden
+  # Spam Protection
- page.headerData.1 = TEXT
+  spamProtectEmailAddresses = 2
- page.headerData.1.value = <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
+  spamProtectEmailAddresses_atSubst = (at)
- page.headerData.2 = TEXT
- page.headerData.2.value = <link rel="icon" type="image/x-icon" href="favicon.ico" />
- #Meta-Tags einbinden
+  index_enable = 1
- page.meta{
+}
-   keywords = [META-keywords]
-   description = [META-secription]
-   robots = INDEX,FOLLOW
-   autor = [META-author]
-   language = german
- }
- #create unordered list menu
+# format popup for pictures
- temp.TopMenu = HMENU
+tt_content.textpic.20{
- temp.TopMenu {
+.imageLinkWrap = 1
-   entryLevel = 0
+.imageLinkWrap {
-  # erstes 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>
+  }
-       }
+}
-        # act state: gültig von der rootseite bis zur aktuellen Seite
-     ACT=1
+tt_content.image.20 {
-     ACT{
+.imageLinkWrap = 1
-       wrapItemAndSub = <li class="act"> | </li>
+.imageLinkWrap {
-     }
+    enable = 1
-        # cur state: gültig für die aktuelle Seite
+    bodyTag = <BODY bgColor=white leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
-     CUR=1
+    wrap = <A href="javascript:close();"> | </A>
-     CUR{
+    JSwindow = 1
-       wrapItemAndSub = <li class="act"> | </li>
+    JSwindow.newWindow = 1
-       }
+    JSwindow.expand = 0,0
-     }
+  }
- }
+}
+</code>
- temp.LeftMenu = HMENU
+Das eigentliche Template:
- temp.LeftMenu {
-   entryLevel = 1
- # zweites 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 = |
- #    }
-        # cur state: gültig für die aktuelle Seite
-     CUR=1
-     CUR{
-       wrapItemAndSub = <li class="act"> | </li>
-       }
-     }
- # drittes level
+<code typoscript>
+# create PAGE-Objekt
-= TMENU
+####################
-.wrap = <ul>|</ul>
+page = PAGE
-{
-        # 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
+#CSS einbinden
- config {
+page.includeCSS {
-   simulateStaticDocuments = 1
+   file1 = fileadmin/templates/[name]/stylefile1.css
-   simulateStaticDocuments_addTitle = 1
+   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
+ = TMENU
+.wrap = <ul>|</ul>
+{
+    # 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
+= TMENU
+.wrap = <ul>|</ul>
+{
+    # 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
+}
+</code>
+===== Erweiterungen für Basis-TypoScript =====
+  * [[software:typo3:favicon]]
+  * [[software:typo3:menue]]
+  * [[software:typo3:tt_news]]
- #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 {
+{{tag>typo3 template}}
-   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

Unterschiede

Seiten-Werkzeuge