Template Auto-parser

Erweiterte Templates mit TYPO3 umsetzen

In der Einführung in das TYPO3 Backend wurd bereits die Erstellung eines einfachen Templates erklärt. Dabei wurde die Verwendung von Subparts und Markern verdeutlicht.

Auf den folgenden Seiten soll es jeweils darum geben, wie man Templates einfach, schneller, besser und schöner umsetzen kann.

Im ersten Abschnitt soll erstmal die Grundlagen geschaffen werden die wir für das weitere Vorgehen benötigen. Dazu gehört z.b. das erzeugen eines Sysfolders für weitere Templates oder die kaskadierung von Templates.

Der zweite Abschnitt widmet sich der Extension "Template Auto-parser" mit dem Extensionkey automaketemplate.

Die Extension "Template Auto-parse" Unterstützt uns dabei Templates schneller in TYPO3 zu integrieren und z.B. die Arbeit zwischen Designer und TYPO3 Administrator zu erleichtern (Aber auch wenn es sich um die gleiche Person handelt.)

In weiteren Artikeln soll es um TemplateVoila gehen und wie man mit TemplateVoila Designvorlagen für TYPO3 umsetzen kann.

Was ist Template Auto parser ?

Wie in unserem Einsteiger Tutorial zum Thema TYPO3 Templates bereits zu lesen war, bestehen TYPO3 Templates aus HTML Code der mit Markern und Subparts so verändert wird, dass man diese Marker (bzw. Subparts) mit TypoScript ansprechen und ersetzen kann.

Diese Vorgehensweise hat aber auch Nachteile. Ein Nachteil währe, dass es relativ lange dauert bis man Marker und Subparts definiert hat.

Ein zweiter Grund ist, dass es Probleme geben kann, wenn der Administrator des TYPO3 Systems und der Designer des Templates nicht die gleiche Person sind. Der Designer könnte bei einer Änderung, Marker und Subparts ändern oder versehentlich löschen weil es HTML Kommentare sind.

An dieser Stelle kommt die TYPO3 Extension "Template Auto parse (TYPO3 Extensionkey: automaketemplate)" ins Spiel. Mit dieser Erweiterung ist es möglich Subparts aus den class Attributen der  div und table HTML - Tags zu generieren.

Wenn also bei einer Webseite bereits eine Vorlage vorliegt, die über diese Klassen verfügt, kann eine Migration zu TYPO3 sehr schnell durchgeführt werden.

Im folgenden Tutorial werde ich am Beispiel eines Projekts erklären wie ich eine solche Migration vorgenommen habe.

Installation der TYPO3 Extension automaketemplate

Damit wir die Erweiterung "Template Auto parser" nutzen können müssen wir diese erste über das TYPO3 Extension Repository (TER) installieren.

 

Im TYPO3 Backend ist auf der linken Seite in der Gruppe Tools der Extension Manager zu finden (Tools -> Ext Manager).

 

Im Extension Manager ist in der Dropdownlist die Option "import extensions" zu wählen. Im Feld vor lookup ist am besten der Extensionkey "automaketemplate" einzutragen.

Im TER wird nun die Extension gefunden und kann über den roten Pfeil vor der Extension installiert werden.

Template Autoparser (automaketemplate) am Beispiel

An einem aktuellen Projekt möchte ich die Nutzung der Extension "Template Autoparser" erklären. Dabei soll eine Seite zu TYPO3 migriert werden, die vorher nicht TYPO3 als CMS benutzt hat, dass Design sollte dabei genau so übernoommen werden.

 

Hier ein Screenshot der Webseite:

Konfiguration von automaketemplate

Die Konfiguration von automaketemplate erfolgt in einem sepperatem Template. Die Einrichtung eines solchen Template wurde im vorherigen Abschnitt erklärt.

 

Zuvor sind alles Dateien die das Template brauchen in den Ordner fileadmin hochzuladen. Ich habe den Ordner fileadmin/template/ benutzt.

 

Im Setupfeld dieses Templates nehmen wird die Konfiguration von automaketemplate vor:

 

 

plugin.tx_automaketemplate_pi1 {
   content = FILE
   content.file = fileadmin/template/template.html
   elements {
      BODY.all = 1
      BODY.all.subpartMarker = DOCUMENT_BODY
      HEAD.all = 1
      HEAD.all.subpartMarker = DOCUMENT_HEADER
      HEAD.rmTagSections = title
      DIV.all = 1
      TABLE.all = 1
      }
   relPathPrefix = fileadmin/template/
}

Erstellung des Haupttemplates

Im Haupttemplate muss nun natürlich das Basistemplate über "include basis template" eingebunden werden. Ausserdem muss das Haupttemplate konfiguriert werden.

In unserem Fall wird die Navigation der Navigation mit einem "optionsplit" gelöst:

 

#Kompatibiltität TYPO3 4.0

 config.simulateStaticDocuments_replacementChar = _
navi = HMENU
navi.special = directory
navi.special.value = 1

navi.1 = TMENU
navi.1 {
   sectionIndex = 1
   sectionIndex.type = "all"
   expAll = 1
   NO{
       ATagParams.dataWrap  (
                           class="menue1" |*|
                           class="menue2" ||
                           class="menue3" ||
                           class="menue4" ||
                           class="menue5" ||
                           class="menue6" ||
                           class="menue7" ||
                           class="menue8"
                   )  
        stdWrap.wrap =   |   
    }
}

#Erzeugen eines Pageobjekt in ?page?
page = PAGE

page{
   config{
      doctype = xhtml_trans
      htmlTag_langKey = de
      metaCharset = utf-8
   }
   stdWrap{
      HTMLparser=1
      HTMLparser.keepNonMatchedTags=1
      HTMLparser.xhtml_cleaning = 1
   }
   headerData.10 = TEMPLATE
   headerData.10{
        template =< plugin.tx_automaketemplate_pi1
        workOnSubpart = DOCUMENT_HEADER
   }

   typeNum = 0
   10 = TEMPLATE
   10 {
        template =< plugin.tx_automaketemplate_pi1
        workOnSubpart = DOCUMENT_BODY
        subparts {
           page < styles.content.get
           menucontainer < navi
        }
   }
}

Navigation