TYPO3 (Teil 35): Die Platzhalter mit Inhalten ersetzen

Die Designvorlage wurde mitsamt der CSS-Datei eingebunden. Jetzt müssen noch die eigentlichen Inhalte geladen werden. Zentrales Mittel sind dafür die Platzhalter. Wie diese definiert werden, habt ihr bereits gesehen. In diesem Tutorial werden eben jene Platzhalter angesprochen und durch die entsprechenden Inhalte ersetzt.

Wir empfehlen:
TYPO3 CMS-Training

Die aufgerufene Seite im Frontend weist bislang nur wenig (bis gar nichts) Spektakuläres auf. Einzig die Designvorlage wurde eingelesen. Das ist natürlich nicht Sinn der Sache, schließlich geht es darum, Platzhalter durch die richtigen Inhalte zu ersetzen.

 

In einem ersten Beispiel soll nun der Platzhalter ###FUSSBEREICH### durch einen Copyright-Hinweis ersetzt werden. Im aktuellen Fall geschieht dies einfach über einen statischen Text. Das ist natürlich untypisch für TYPO3, schließlich sollen die Platzhalter später auf jeder Seite durch andere Inhalte wie beispielsweise Menüs ersetzt werden. Das Prinzip ist dann aber tatsächlich dasselbe.

Platzhalter werden in TYPO3 über marks angesprochen.

marks {
     FUSSBEREICH = TEXT
     FUSSBEREICH.value = Copyright by psd-tutorials.de
    }

Diesem marks müssen zwei Parameter übergeben werden. Über den ersten gibt man den betreffenden Platzhalter an. Der zweite Parameter legt das Objekt fest, das angewendet werden soll. Im aktuellen Beispiel wird also einfach der Platzhalter ###FUSSBEREICH### durch den Text Copyright by psd-tutorials.de ersetzt. Die vollständige Syntax sieht folgendermaßen aus:

page = PAGE
page {
 config.doctype = html5
 meta.author = psd-tutorials.de
 meta.description = PSD-Tutorials.de bietet Tutorials 
 und Video-Trainings zur Bildbearbeitung mit Photoshop, 
 Fotografie, Mediengestaltung und Webentwicklung.
  includeCSS {
   screen = fileadmin/css/style.css
   screen.title = display
   screen.media = screen 
  }
    10 = TEMPLATE
   10 {
    template = FILE
    template.file = fileadmin/elektro.html
    workOnSubpart = DOKUMENT 
    marks {
     FUSSBEREICH = TEXT
     FUSSBEREICH.value = Copyright by psd-tutorials.de
    } 
  }
}

 

Ein Blick auf das Frontend der Seite liefert tatsächlich das gewünschte Ergebnis.

 

Das Ersetzen von Platzhaltern ist erfahrungsgemäß fehleranfällig. Gerne wird hier der gesamte TypoScript-Code bei der Fehleranalyse durchsucht, obwohl das meistens gar nicht nötig ist: Die Fehlerquellen lassen sich normalerweise auf wenige Punkte eingrenzen.

Punkt eins betrifft falsch geschriebene Eigenschaften.

marks {
     FUSSBEREICH = TEXT
     FUSSBEREICH.vaue = Copyright by psd-tutorials.de
    }

Wird dieser Code im Frontend aufgerufen, ist der Marker ###FUSSBEREICH### zwar nicht mehr zu sehen, der neue Inhalt wird trotzdem nicht angezeigt. Das liegt in diesem Fall an der falsch geschriebenen Eigenschaft vaue. Richtigerweise müsste diese value heißen.

Ein anderer beliebter Fehler ist die Verwendung eines falschen Platzhalter-Namens. Bemerkbar macht sich das dadurch, dass der Platzhalter im Frontend nach wie vor angezeigt wird:

marks {
     FUSSBEREICH = TEXT
     FUSBEREICH.value = Copyright by psd-tutorials.de
    }

Im Frontend ist immer noch der Platzhalter ###FUSSBEREICH### sichtbar. Schuld daran ist der Platzhalter ###FUSBEREICH###, an dessen Stelle eigentlich ###FUSSBEREICH### stehen müsste. So offensichtlich ist der Fehler natürlich nicht immer. Wenn im Frontend allerdings der Platzhalter in seiner originalen Pracht angezeigt wird, liegt das mit ziemlicher Sicherheit an einem falsch geschriebenen Platzhalter-Namen.

 

HTML-Syntax verwenden

HTML-Formatierungen lassen sich auf unterschiedliche Art und Weise realisieren. Zunächst einmal könnte man das natürlich direkt in der Designvorlage machen. Ein Beispiel:

<div id="footer"><i>###FUSSBEREICH###</i></div>

Hier wurde der Platzhalter ###FUSSBEREICH### direkt in ein i-Element eingeschlossen. Die Definition selbst geschah direkt in der Datei elektro.thml. Dadurch wird der Inhalt des Platzhalters im Frontend tatsächlich kursiv dargestellt.

 

Eine andere Möglichkeit bietet TypoScript. Denn auch hier könnt ihr direkt HTML-Syntax verwenden.

10 {
    template = FILE
    template.file = fileadmin/elektro.html
    workOnSubpart = DOKUMENT 
    marks {
     FUSSBEREICH = TEXT
     FUSSBEREICH.value = <i>Copyright by psd-tutorials.de</i>
    } 
  }

Man weist die gewünschten HTML-Elemente einfach value als Wert zu. Das funktioniert in dieser Form allerdings nicht immer. Problematisch wird es beispielsweise, wenn man TypoScript-Funktionen verwendet. Eine dieser Funktionen ist field. Mittels eben jenes field kann man ganz gezielt Datenbankabfragen starten. So lässt sich auf diese Weise beispielsweise direkt der Seitentitel abfragen.

marks {
     FUSSBEREICH = TEXT
     FUSSBEREICH.field= title
    }

 

Durch diese Syntax wird der Platzhalter ###FUSSBEREICH### durch den Seitentitel ersetzt.

Erreicht wird dies, indem man als Wert den Namen des abzufragenden Datenbankfeldes angibt. Und im vorliegenden Fall handelt es sich dabei um title.

 

Und wie könnte nun dieser Titel kursiv gemacht werden? Folgendes wird nicht funktionieren:

marks {
     FUSSBEREICH = TEXT
     FUSSBEREICH.field= <i>title</i>
    }

Das führt im Frontend der Seite nicht zum gewünschten Ergebnis.

 

Warum aber bleibt die Ausgabe leer? Durch <i>title</i> wird nach dem Datenbankfeld <i>title</i> gesucht. Dieses Feld gibt es allerdings nicht. Der Seitentitel ist vielmehr im Feld title gespeichert. Selbstverständlich muss man auch in solchen Fällen nicht auf HTML-Syntax verzichten. In TypoScript gibt es hierfür die Funktion wrap. Diese umschließt das betreffende Element mit der angegebenen HTML-Syntax. Das folgende Beispiel zeigt den Einsatz dieser Funktion.

marks {
     FUSSBEREICH = TEXT
     FUSSBEREICH.field= title
     FUSSBEREICH.wrap = <i> | </i>
    }

Das führt dann tatsächlich zur der gewünschten Ausgabe.

 

Die Syntax ist dabei denkbar einfach. Man gibt das öffnende und schließende HTML-Tag an. An der Stelle, an welcher der zu formatierende Inhalt steht, führt man ein Pipe-Symbol ein. Aber Achtung: wrap steht ausschließlich beim TEXT-Objekt zur Verfügung. Wenn ihr andere Objekte verwendet, kommt stdWrap zum Einsatz.

Die in den Beispielen verwendeten Funktionen field und wrap sind natürlich längst nicht das Ende der Möglichkeiten. Eine weitere interessante Funktion ist data. Denn darüber kann man Werte abfragen. Das können zunächst einmal Variablen sein, die mittels GET oder POST übergeben wurden. Interessant ist das dann beispielsweise, wenn ihr mit Formularen arbeitet und die in die Felder eingetragenen Werte auslesen wollt. In diesem Fall sähe die Syntax folgendermaßen aus:

marks {
     FUSSBEREICH = TEXT
     FUSSBEREICH.data= GPvar:vorname
    }

In diesem Beispiel wird der Inhalt der Variablen vorname ausgelesen und anstelle des Platzhalters ###FUSSBEREICH### angezeigt.

 

Eine weitere interessante Möglichkeit von data ist die Anzeige des aktuellen Datums und der Uhrzeit. Auch dazu wieder ein Beispiel:

marks {
     FUSSBEREICH = TEXT
     FUSSBEREICH.data= date:d.m.y
    }

Durch diese Syntax wird im Frontend das aktuelle Datum ausgegeben.

 

Anstelle von d.m.y könntet ihr übrigens auch noch andere Werte verwenden. Wer beispielsweise die Stunden und Minuten ausgeben will, kann das über folgende Syntax erledigen:

marks {
     FUSSBEREICH = TEXT
     FUSSBEREICH.data= date:H.i 
    }

Ihr seht also, wie flexibel TypoScript auf diesem Gebiet tatsächlich ist.

Wir empfehlen:
Dreamweaver-Video-Training

Unsere Empfehlung für dich

TYPO3 CMS-Training

TYPO3 CMS-Training

Du willst deine eigene Website erstellen und administrieren?

  • 8 Stunden Video-Trainings zum beliebten TYPO3 CMS 6
  • 36 Praxis-Lektionen in Text/Bild als PDF (über 400 Seiten)
  • Themeerstellung mit TypoScript
  • Blog, Forum, Multidomainfähigkeit, Mehrsprachigkeit, Benutzerverwaltung & Co.

Fazit: Deine eigene moderne Website mit anspruchsvollen Features kann kommen!

Zum Training