Schritt für Schritt

Schritt 3 : Dieses Layout rasch mit Modern Template Building umsetzen

In diesem Schritt wird das Template mit TYPO3 verbunden.

Template anpassen

Im Template werden Marker (###TEXT###) überall dort eingefügt wo der Inhalt von Typo3 kommen soll.

In diesem Fall sieht das Template danach so aus.

TypoScript erstellen und einbinden

Das TypoScript wird jetzt etwas verädert. In diesem Fall erstelle ich die Template Funktionalität ausserhalb der PAGE und füge das Template danach in die PAGE ein.


# template erstellen
temp.htmlTemplate = TEMPLATE
temp.htmlTemplate {

  # template einbinden
  template = FILE
  template.file = EXT:fb_stepbystep/step3/res/index.html
  # pfad anpassen damit es vorerst funktioniert!
  relPathPrefix = /typo3conf/ext/fb_stepbystep/res/

  marks {
    MENU1 = HTML
    MENU1.value (
      <ul id="menu1" class="menu">
        <li><a href="/#step3">Seite 1</a></li>
        <li><a href="/#step3">Seite 2</a></li>
        <li><a href="/#step3">Seite 3</a></li>
        <li><a href="/#step3">Seite 4</a></li>
      </ul>
    )
    MENU2 = HTML
    MENU2.value (
      <ul id="menu2" class="menu">
        <li><a href="/#step3">Meta 1</a></li>
        <li><a href="/#step3">Meta 2</a></li>
        <li><a href="/#step3">Meta 3</a></li>
        <li><a href="/#step3">Meta 4</a></li>
      </ul>
    )

    /*
      Damit dies funktioniert, wurde bei Statische Templates 'CSS Styled Content TYPO3 v4.2 (css_styled_content)' eingebunden
      Das macht eigentlich nichts anderes als die Datei von 'typo3/sysext/css_styled_content/static/v4.2/setup.txt' einbinden...
    */
    COL1_CONTENT < styles.content.getLeft
    COL2_CONTENT < styles.content.get
    COL3_CONTENT < styles.content.getRight

    FOOTER = HTML
    FOOTER.value (
      <!-- Fusszeile mit Infomationen -->
      Fusszeile: datum / woche / tag / etc...
    )
  }
}
Wieso dies sinnvoll ist, zeige ich später mal ;-)

Neu ist dieser TypoScript Code nicht mehr direkt in der Datenbank sondern in einer Datei abgelegt. Dies hat verschiedene Gründe, unter anderem weil ich lieber in einem externen Editor arbeite.

Diese Datei wird im Seiten Template bei Setup entsprechend eingebunden.


<INCLUDE_TYPOSCRIPT: source="FILE:EXT:fb_stepbystep/step3/static/setup.txt">

Um es schnell zu machen, füge ich die Menüs und der Fusszeilen Inhalt als HTML Code ein. Zuerst geht es darum, das der HTML Code der 3 Content Spalten aus dem TYPO3 kommen. Dies wird mit diesem Code realisiert.


COL1_CONTENT < styles.content.getLeft
COL2_CONTENT < styles.content.get
COL3_CONTENT < styles.content.getRight

Damit dies funktioniert, muss man beim Seiten Template entsprechend CSS Styled Content einbinden. Mit dem einbinden fügt man weiteren TypoScript dazu, welcher für das rendering der Elemente verwendet wird.

einbinden der datei css_styled_content/static/setup.txt könnte man auch direkt im eigenen Code machen

HTML Code (Inhalt) im Typo3 erfassen

Da gibt es nicht viel zu sagen, anstelle des HTML Codes direkt im Template einzugeben wird im TYPO3 ein Content Element (HTML) erstellt und der Code eingefügt.

Dies war Schritt 3!

Vielen Dank für's rein schauen.

thefox

 

 

Live Demo

Diesen Code Schnipsel kann man im Beispiel anschauen.