TYPO3 (Teil 29): TypoScript (1)

Wer mit TYPO3 arbeitet, wird es früher oder später mit TypoScript zu tun bekommen. In diesem und den nächsten Tutorials geht es daher ausführlich um dieses Thema. Warum aber ist TypoScript eigentlich so wichtig, wenn es um TYPO3 geht? Mit eben jenem TypoScript bekommt man ein Werkzeug an die Hand, mit dem sich explizit festlegen lässt, wie die Ausgabe der Webseite bzw. TYPO3 selbst aussehen soll.

Wir empfehlen:
TYPO3 CMS-Training

Keine Bange, um mit TypoScript arbeiten zu können, muss man keine Programmiererfahrung haben. (Wobei diese natürlich auch nicht schadet). Tatsächlich ist TypoScript nämlich keine Programmiersprache im klassischen Sinn. Vielmehr legt man über TypoScript fest, wie das Ergebnis dargestellt werden soll. Der eigentliche Lösungsweg muss hingegen nicht programmiert werden, das übernimmt TYPO3 automatisch.

Bevor die Arbeit mit TypoScript gezeigt wird, zunächst noch ein allgemeiner Hinweis: Am besten verwendet ihr für den Einstieg in TypoScript das Dummy-Paket. Dieses TYPO3-Paket kommt ohne unnötigen Ballast daher und ermöglicht euch tatsächlich den komfortabelsten Weg hin zu euren ersten TypoScript-Anwendungen. Das Paket kann von der Seite http://typo3.org/download/ heruntergeladen werden.

Die Installation des Dummy-Pakets funktioniert dann so, wie das bereits im Rahmen dieser Tutorial-Reihe anhand anderer TYPO3-Pakte beschrieben wurde.

 

Das erste Skript

Wenn ihr das Dummy-Paket installiert habt und euch den Seitenbaum anseht, werdet ihr darin ausschließlich die Seite Home finden.

 

Ruft Web>Template auf und klickt auf den Seitennamen von Home. Achtet in dem sich öffnenden Dialogfenster darauf, dass im oberen Auswahlfeld Info/Bearbeiten eingestellt ist.

 

Klickt anschließend auf Setup. Das sich öffnende Fenster ist ab sofort die Drehscheibe, wenn ihr TypoScript-Code schreiben wollt. Tragt in dieses Feld Folgendes ein:

page = PAGE
page.typeNum = 0
page.10 = TEXT
page.10.value = PSD-Tutorials.de

Speichert die Einstellungen ab und ruft die Seite anschließend im Frontend auf.

 

Wie ihr seht, ist es zunächst einmal nicht schwer, mittels TypoScript eine Ausgabe im Frontend zu erreichen. Selbstverständlich ist das nur ein sehr einfaches Beispiel gewesen, bei dem aber dennoch der Zusammenhang zwischen Setup-Feld und Ausgabe im Frontend deutlich geworden ist.

Wer sich mit TypoScript beschäftigt, sollte immer auch einen Blick in die TypoScript-Referenz (TSref) werfen, die auf der Seite http://typo3.org/documentation/document-library/core-documentation/doc_core_tsref/4.1.0/view/toc/0/ angeboten wird. Denn dort findet ihr alle notwendigen Detailinformationen für die Arbeit mit TypoScript.

Objekte

Im Zusammenhang mit TypoScript wird euch sehr oft der Begriff Objekt begegnen. Selbstverständlich sollen in dieser Tutorial-Reihe keine theoretischen Programmierkenntnisse vermittelt werden, ein kurzer Blick auf Objekte und deren Eigenschaften muss aber sein. Nämlich nur, wenn das Objekte-Prinzip verinnerlicht wird, kann man tatsächlich mit TypoScript arbeiten.

Ein einfaches Beispiel soll den Einstieg in die Objekte ermöglichen. So ist ein Fahrrad ein typisches Objekt.

meinBlitz = FAHRRAD

Diese Syntax liefert die Eckdaten für das Fahrrad. TYPO3 wird durch diese einfache Zeile mitgeteilt, dass meinBlitz ein Fahrrad werden soll. Immer dann also, wenn ihr den Namen meinBlitz verwendet, weiß TYPO3, dass es sich um das FAHRRAD-Objekt handelt. TYPO3 besitzt ausreichend Kenntnisse darüber, wie bestimmte Objekte aussehen sollen. Wurden – wie im Fall des Fahrrads – keine entsprechenden FAHRRAD-Eigenschaften beschrieben, greift TYPO3 auf Standardwerte zurück, die dann aber wiederum jederzeit überschrieben werden können.

Nun besitzt jedes Fahrrad bekanntermaßen eine bestimmte Größe und verschiedene Gänge. Das lässt sich mittels Wertzuweisung abbilden.

meinBlitz = FAHRRAD
meinBlitz.groesse = 26
meinBlitz.gaenge = 28

 

Selbstverständlich könnte FAHRRAD weitere Eigenschaften haben. Denkt beispielsweise an lampe, farbe usw. Nun wäre es allerdings zu aufwendig, jedes Mal all diese Eigenschaften anzugeben. Und hier greift TYPO3 dann, wie bereits beschrieben, auf Standardwerte zurück, wenn die Eigenschaften nicht angegeben wurden.

Im Zusammenhang mit den Objekten ist unbedingt auf die richtige Schreibweise zu achten. TYPO3 unterscheidet nämlich tatsächlich zwischen Groß- und Kleinschreibung.

meinBlitz = Fahrrad
meinBlitz.groesse = 26
meinBlitz.gaenge = 28

Dieses Beispiel würde nicht die gewünschte Ausgabe bewirken, da Objekte immer in Großbuchstaben (also FAHRRAD) geschrieben werden müssen. Bei den Eigenschaften stellt sich das hingegen anders dar. Hier greift die sogenannte Camel-Caps-Regel. Bei der werden die Anfangsbuchstaben aller vorkommenden Wörter stets großgeschrieben, alle anderen Buchstaben hingegen klein. Zwei typische Beispiele dafür sind meinBlitz und auch typeNum.

Objekte selbst werden nicht direkt verwendet, sondern referenziert. Auch das wurde bereits anhand zweier Beispiele gezeigt.

page = PAGE
meinBlitz = FAHRRAD

In den beiden Skripten werden also anstelle von den Objektnamen PAGE und FAHRRAD die Referenzen page und meinBlitz verwendet.

Werte zuweisen

Um einem Objekt Eigenschaften zuzuweisen, wird üblicherweise das Gleichheitszeichen verwendet. Bei diesem Gleichheitszeichen handelt es sich um einen sogenannten Operator. Links neben dem Gleichheitszeichen steht der Bezeichner oder eine Eigenschaft. Rechts steht die Eigenschaft bzw. der zuzuweisende Wert.

meinBlitz.groesse = 26

In diesem Fall wurde der Eigenschaft groesse der Wert 26 zugewiesen.

Solche Wertzuweisungen gelten in TypoScript tatsächlich immer nur über eine Zeile. Es sind allerdings auch mehrzeilige Wertzuweisungen möglich. Verwendet werden dafür runde Klammern.

page = PAGE
page.typeNum = 0
page.10 = TEXT
page.10.value (
   Willkommen
   bei
   PSD-Tutorials.de
)

Auch hier wieder der Blick ins Frontend der Seite.

Wie ihr seht, hat die Definition über mehrere Zeilen keine Auswirkungen auf die Ausgabe. Warum sollte man aber dann eine solche Syntax verwenden? Tatsächlich dient das eher der Übersichtlichkeit.

 

Anstelle der runden Klammern lassen sich auch geschweifte Klammern verwenden. Diese dienen dann tatsächlich dazu, die Syntax kürzer halten zu können.

meinBlitz = FAHRRAD
meinBlitz {
   groesse = 26
   gaenge = 28
}

Hier wird zunächst definiert, dass es sich bei meinBlitz um ein FAHRRAD handelt. Dank der anschließenden Klammerung stellt TYPO3 immer automatisch den Eigenschaften das voran, was vor der Klammer steht. Ihr müsst somit also nicht vor jeder Eigenschaft meinBlitz schreiben. Diese Technik ist in TypoScript übrigens weit verbreitet, da man dadurch seine Skripte deutlich übersichtlicher gestalten kann. Tatsächlich lassen sich die Klammern dann auch noch ineinander verschachteln. Dieser Aspekt wird euch in TypoScript und somit auch in den weiteren Teilen dieser TypoScript-Tutorials immer wieder begegnen.

Kommentare

Wie in anderen Sprachen, kann (und sollte) man auch in TypoScript Kommentare verwenden. Tatsächlich bietet TypoScript verschiedene Möglichkeiten zur Kommentierung der Skripte.
Ein einzeiliger Kommentar sieht so aus:

# Das ist ein Kommentar

Mehrzeilige Kommentare sind ebenfalls möglich.

/* Das ist ein Kommentar,
   der sich über
   mehrere Zeilen erstreckt.
*/

Verwendet Kommentare, damit ihr auch noch in ein paar Monaten wisst, was bestimmte Anweisungen in den Skripten bedeuten.

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