TYPO3 (Teil 34): Die Designvorlage einbinden

Die Grundlagen sind gelegt, um mit TypoScript loslegen zu können. In diesem Tutorial werdet ihr den ersten eigenen TypoScript-Code schreiben, der dann im Frontend tatsächlich zu einer Ausgabe führt. Los geht es mit der Definition einiger allgemeiner Seiteneigenschaften, bevor dann im zweiten Teil die bereits erstellte Designvorlage eingebunden wird. Anschließend geht es mit dem Ansprechen der Teilbereiche und dem Einbinden der CSS-Datei weiter.

Wir empfehlen:
TYPO3 CMS-Training

Im vorherigen Tutorial wurde ein Template für die Seite Home erstellt. Genau dieses Template dient nun als Basis für die weiteren Arbeiten an und mit TypoScript. Um das Template zu bearbeiten, ruft man Web>Template auf und klickt auf Home. Achtet in jedem Fall darauf, dass im oberen Auswahlfeld der Eintrag Info/Bearbeiten eingestellt ist. Klickt anschließend auf Setup.

 

Das öffnet ein Dialogfenster, welches fortan Dreh- und Angelpunkt für den TypoScript-Einsatz ist.

 

Im Setup-Feld ist standardmäßig ein erstes Beispielskript enthalten.

# Default PAGE object:
page = PAGE
page.10 = TEXT
page.10.value = HELLO WORLD!

Diese Zeilen bewirken eine simple Frontend-Ausgabe.

 

Das gilt es zu ändern. Fügt dazu in das Setup-Feld die folgende Syntax ein:

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.
}

Wenn ihr nun das Frontend der Seite aufruft, wird eine leere Seite angezeigt. Interessant wird es allerdings, wenn man sich den im Frontend generierten Quellcode ansieht.

 

Denn darin ist jetzt tatsächlich zu erkennen, dass die definierten Seiteneigenschaften wie Beschreibung und Autor übernommen wurden. So einfach funktioniert das Zusammenspiel zwischen Setup-Feld und Frontend.

Jetzt aber ein Blick auf die Syntax. Zunächst wird eine Instanz eines PAGE-Objekts gebildet. Verwendet wurde hier der Bezeichner page.

page = PAGE

Dieser Bezeichner kann frei gewählt werden, üblicherweise verwendet man aber tatsächlich page. Der Bezeichner muss anschließend im gesamten Skript verwendet werden. Weiter geht es mit der Definition des Dokumenttyps. Im aktuellen Beispiel wird HTML5 verwendet.

config.doctype = html5

Und anschließend werden allgemeine Meta-Angaben der Seite definiert.

meta.author = psd-tutorials.de
meta.description = PSD-Tutorials.de bietet Tutorials 
und Video-Trainings zur Bildbearbeitung mit Photoshop, 
Fotografie, Mediengestaltung und Webentwicklung.

Das führt zu folgender Ausgabe im Frontend-Quellcode:

<meta name="author" content="psd-tutorials.de">
<meta name="description" content="PSD-Tutorials.de bietet 
Tutorials und Video-Trainings zur Bildbearbeitung mit 
Photoshop, Fotografie, Mediengestaltung und Webentwicklung.">

So einfach kann man also über das Setup-Feld die Ausgabe im Frontend beeinflussen.

Ein Hinweis noch zur Schreibweise von TypoScript. Ihr werdet immer wieder Skripte nach folgendem Schema finden:

page.10 = TEXT
page.10.value = Gib was aus.
page.20 = TEXT
page.20.value = Gib was anderes aus.

Was hier auffällt, sind die Ziffern 10 und 20. Die Ziffern werden in TypoScript verwendet, um mehrere Elemente in ein TypoScript-Objekt aufnehmen zu können.

 

Alternativ dazu könnte man auch Folgendes schreiben:

page.1 = TEXT
page.1.value = Gib was aus.
page.2 = TEXT
page.2.value = Gib was anderes aus.

Hier wurden anstelle von 10 und 20 die direkt aufeinander folgenden Ziffern 1 und 2 verwendet. Auch das ist theoretisch möglich. Allerdings lässt man üblicherweise etwas "Platz" zwischen den einzelnen Objekten. Denn so kann man später ganz einfach zusätzliche Objekte aufnehmen, ohne die Nummerierung der anderen Objekte anpassen zu müssen.

Designvorlagen ansprechen

In den vorherigen Tutorials wurde eine Designvorlage erstellt. Nachdem diese nun existiert, muss eine logische Verbindung zwischen ihr und dem Template hergestellt werden. Entscheidende Bedeutung kommt dabei dem FILE-Objekt zu. Denn über dieses Objekt und dessen Eigenschaft file kann man die Designvorlage importieren.

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.
10 = FILE
10.file = fileadmin/elektro.html  
}

 

In diesem Fall wird davon ausgegangen, dass die Designvorlage unter dem Namen elektro.html im Verzeichnis fileadmin liegt. Ruft man nun das Frontend der Seite auf, ist bereits ein erstes Ergebnis sichtbar.

Ernüchterung macht sich allerdings breit, wenn man sich den Quellcode der Seite ansieht. Zu sehen sind dann nämlich zwei Head-Bereiche und doppelte body-Elemente. Das kann so natürlich nicht bleiben. Genau an diesem Punkt kommen die Teilbereiche ins Spiel, von denen einer in der Designvorlage definiert ist.

 

Mit Teilbereichen arbeiten

In der Designvorlage wurde der Teilbereich ###DOKUMENT### definiert. Mittels TypoScript kann man nun die Ausgabe auf den Inhalt dieses Teilbereichs beschränken. Verwendet wird dafür das Objekt TEMPLATE. Denn diesem Objekt übergibt man über das FILE-Objekt eine Zeichenkette – also die Designvorlage –, die sich manipulieren lässt. Um den gewünschten Teilbereich zu verwenden, wird auf die Eigenschaft workOnSubpart zurückgegriffen. Dieser Eigenschaft übergibt man als Wert den Namen des Teilbereichs.

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.
10 = TEMPLATE
  10 {
    template = FILE
    template.file = fileadmin/elektro.html
    workOnSubpart = DOKUMENT  
  }
}

Wenn ihr euch jetzt den Quellcode der Seite anseht, werdet ihr die korrekte Syntax erkennen.

Ein Stylesheet einbinden

Was für die richtige Anzeige der Seite noch fehlt, ist die passende CSS-Datei. Denn diese wird nun, da mit den Teilbereichen gearbeitet wird, zunächst erst einmal nicht eingebunden. Dieses Einbinden kann man aber ganz einfach per TypoScript erledigen. Das Stylesheet liegt im Verzeichnis fileadmin/css. Um Stylesheets einzubinden, wird includeCSS verwendet.

 

Über dieses includeCSS kann man tatsächlich beliebig viele CSS-Dateien einbinden. Daher wird immer ein entsprechender Bezeichner erwartet, für den im folgenden Beispiel der Name screen gewählt wurde.

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  
  }
}

 

Sieht man sich jetzt das Ergebnis im Frontend an, wird deutlich, dass die Designvorlage tatsächlich korrekt angezeigt wird.

Das Grundgerüst steht also. Was nun noch fehlt, sind die eigentlichen Inhalte. Wie sich diese einfügen und entsprechend gestalten lassen, wird in den nächsten Tutorials gezeigt.

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