Webfibel

Wissenswertes rund um das Internet & der Webentwicklung

TYPO3 - Der Einstieg - Template

TYPO3 – Der Einstieg – Das Template

26. Februar 2015 Martin Hesse 9 Comments

Im zweiten Teil unserer TYPO3-Artikelserie wollen wir uns um das Template kümmern. Wir werden basierend auf dem Bootstrap-Framework eine Vorlage erstellen, ein Backend-Layout definieren und ein wenig mit CSS spielen.

Desweiteren müssen wir alles über TypoScript bekannt machen und entsprechend im Template hinterlegen. Dazu gehört natürlich auch ein mehrdimensionales Menü, eine Suchleiste und Grid-Inhalte.

Template im Backend anlegen

Wir erstellen zunächst im Backend ein grundlegendes Template für unsere Seite.

Dazu gehen wir im Backend in den „Web„-Bereich und klicken auf den Punkt „Template„. Im Seitenbaum wählen wir den System-Ordner „System“ aus.

Es müsste dann folgende Ansicht erscheinen:

Wir legen hier ein Template im Backend an

Wir legen hier ein Template im Backend an

Dort klicken wir auf „Template für neue Website erstellen“ (4) an und wechseln oben im Dropdown-Menü von dem „Konstanten-Editor„, in den „Info/Bearbeiten„-Modus.

Hier klicken wir unterhalb der Tabelle auf „Vollständigen Template-Datensatz bearbeiten

Hiermit können wir das vollständige Template anpassen

Hier können wir das vollständige Template anpassen

Template anpassen

Wir sehen nun ein Formular mit vier weiteren Reitern. Wir können zunächst im „Allgemein„-Reiter ein Template-Titel vergeben, ich lasse hier jetzt „NEUE WEBSEITE“ stehen. Auch können wir ein Website-Titel definieren, der dann im <title>-Tag auf der Homepage steht. Ihr könnt dort je nach belieben was rein schreiben.

Die Felder „Konstanten“ und „Setup“ sind für das TypoScript zuständig. Konstanten sind quasi Variablen die wir definieren und im Setup wiederverwenden können. Wenn wir diese Konstante in einem Untertemplate überschreiben, würde das Haupt-Template dies merken und entsprechend anders reagieren. So kann man recht flexibel agieren.

Im Setup-Bereich kommt der allgemeine TypoScript-Code rein, mit dem wir alle Hauptelemente wie Seitenstruktur, Navigation, Teaser etc. bestimmen.

Formular für das TYPO3-Template

 Optionen

Wir wechseln auf den „Optionen„-Reiter. Lassen aber alles so, wie es eingestellt ist.

Hier ist lediglich definiert, dass dieses Template alle vorherigen Definierungen in den „Constants“ und dem „Setup“ löscht. Dies ist quasi unser „Haupt-Template„. Darüber hinaus ist dieses Template als „Wurzelebene“ festgelegt. Das bedeutet, dass die Seite, in welcher das Template eingebunden wird, als oberste Seite (Einstiegspunkt) im Baum definiert ist.

Um das ein wenig besser zu verdeutlichen hier eine kleine Grafik

Die Wurzelebene bestimmt den Einstiegspunkt!

Die Wurzelebene bestimmt den Einstiegspunkt!

Enthält

Hier können wir statische Templates aus anderen Extensions oder vom System laden. Für unser System können wir unter „Statische Templates einschließen„: „CSS Styled Content (css_styled_content)“ und „Gridelements (gridelements)“ einbinden.

Wir binden hier die benötigten statischen Templates ein

Wir binden hier die benötigten statischen Templates ein

Zugriff

In diesem Bereich könnten wir einen Start- und Stopp-Zeitpunkt definieren, in welchem das Template dann aktiv wäre. Dies benötigen wir für unseren Fall aber nicht, daher bleibt der Bereich Zugriff so wie er ist.

Das waren erstmal die grundlegenden Einstellung zum Template. Wir speichern dieses wieder über die Diskette ab und gehen zurück zu unserem Einstiegspunkt, bzw. der Wurzelebene (na, aufgepasst? :-)).

Template einbinden

Wir wechseln nun auf die Seite „Demo #1„. Dort klicken wir auf „Erweiterungs-Template erstellen„, bearbeiten wieder den vollständigen Template-Datensatz und wechseln auf den Reiter „Enthält„.

Hier binden wir unter Basis-Template das vorher angelegte Template ein. Dazu reicht es in dem Suchfeld neben der Box einfach den Name vom Template einzugeben und dann selbiges auszuwählen.

Wir binden hier das Haupt-Template auf unsere Seite ein

Wir binden hier das Haupt-Template auf unsere Seite ein

Ist dies erledigt. Speichern wir den Datensatz.

Es werde „Hello World“

Wenn wir jetzt mal in unser Frontend gehen, müsste bereits ein „Hello World“ zu sehen sein. Dies kommt durch das Beispiel-TypoScript, welches standardmäßig hinterlegt wird.

Unsere erste Ausgabe im Frontend :-)

Unsere erste Ausgabe im Frontend 🙂

Ein gutes Zeichen! Alles funktioniert so wie es soll.

TypoScript-Gerüßt

Wir müssen zunächst erstmal ein kleines Gerüßt im TypoScript hinterlegen, damit TYPO3 mit unserem später angelegten HTML-Template auch arbeitet.

Wir gehen also im Backend auf das Modul „Template“ im Web-Bereich und klicken unseren System-Ordner wieder an. Dort klicken wir nun auf den Stift zum editieren bei „Setup„.

Standardmäßig ist folgendes TypoScript hinterlegt:

Dies führte auch zu der „Hello World!“-Ausgabe im Frontend.

Wir löschen nun diese Zeilen und fügen folgenden Code-Abschnitt ein:

Wir definieren hier einen „FLUIDTEMPLATE„-Bereich und weißen ihm den Marker „FluidTemplate“ zu.

Dort ist in Zeile 4 der Pfad zum Template angegeben, derzeit ist dies ein Verweis auf eine Konstante, die wir noch definieren müssen.

In Zeile 8-14 weißen wir Variablen dem Template zu, auf die wir über eine Klammer ({baseUrl}) zugreifen können.

Im nächsten Code-Abschnitt weißen wir dem Page-Objekt in TYPO3 das FluidTemplate zu und passen noch ein paar Einstellungen an:

Der Code ist weitesgehend kommentiert. Achtet bitte auf die Pfadangaben in den Zeilen 26-27 und 31-33. Die Dateien „style.css“ und „script.js“ legen wir in einen der nächsten Schritte an!

In der Zeile 36 wird dann das FluidTemplate unserer Seiten-Ausgabe zugewiesen.

Wir speichern das Setup über die Diskette und klicken dann ganz unten bei der Tabelle auf den Stift wo die Konstanten stehen.

Hier tragen wir nun folgende zwei Konstanten ein:

Ich denke das ganze ist selbstredend.

Kommen wir nun zum eigentlichen Template.

HTML-Vorlage

Im nächsten Schritt brauchen wir eine HTML-Vorlage für unser Template. Dazu müssen wir zunächst noch ein paar Dateien auf unseren FTP anlegen.

  • Wurzel-Ebene
    • fileadmin
      • templates
        • layout (neu)
        • css
          • style.css (neu)
        • grids
        • js
          • script.js (neu)
        • template.html (neu)

Wir beginnen zunächst mit der „template.html“ und öffnen diese in unserem favorisierten Editor.

Bevor wir nun mit dem Coden anfangen, zeige ich euch unser Ziel. Dazu habe ich ein grobes Wireframe erstellt, welches die Struktur der Seite zeigen soll.

Das grobe Entwurfsmuster für unser Template

Das grobe Entwurfsmuster für unser Template

Wir haben hier ein ganz einfachen Aufbau. Wir starten mit der Navigation, die sich über die gesamte Breite (Fluid-Container) ausdehnt. Danach kommt direkt ein Teaser-Bild, welches optional ist. Da drunter befindet sich der normale Inhalt plus Sidebar. Zum Schluss kommt der Footer. Den Footer wollen wir später in mehrere Spalten unterteilen.

Navigation

Da unser ganzes Template auf Bootstrap basiert, können wir recht schnell arbeiten und fügen zunächst erstmal den Navigationsbereich ein.

HTML

In den Zeilen 11, 15 und 17 sehen wir die Platzhalter, welche ich definiert habe.

{baseUrl}
Hier steht unsere Haupt-Domain drinnen

{seitenTitel}
Hier könnt ihr später den Name eurer Webseite reinschreiben oder ein Logo hinterlegen

{navigation}
Das ist der Platzhalter für das Menü

{suche}
Auch eine Suchleiste darf nicht fehlen, daher haben wir hier in der Navigation auch unser Suchformular eingebaut

 TypoScript

Speichert das Template. Wechselt jetzt in das Backend, geht in den System-Ordner und bearbeitet das „Setup“ eures Haupt-Templates.

Wir werden jetzt im TypoScript eine Navigation definieren die zwei Ebenen hat (Dropdown). Ich gebe euch zuerst wieder das TypoScript vor. Wir bauen das TypoScript ganz oben ein.

Wir speichern das ganze jetzt mal ab und schauen uns das Ergebnis im Frontend an.

So ganz scheint es noch nicht zu passen ...

So ganz scheint es noch nicht zu passen …

Ups, da scheint etwas noch nicht zu passen … okay schauen wir noch mal unser HTML-Template an.

Wir haben vergessen das TYPO3 bzw. Fluid alles aus Sicherheitsgründen parsed und so entsprechend den HTML-Code umwandelt.
Damit sich das ändert, bedienen wir uns eines ViewHelper’s in Fluid und ändern die folgenden Zeilen wie folgt ab:

und das gleiche für die Suche auch:

Damit weiß TYPO3, dass es sich hier um HTML-Inhalt handelt und setzt dieses im Frontend dann auch entsprechend um. Template speichern und erneut das Frontend anschauen!

Jetzt sieht die Navigation schon besser aus

Jetzt sieht die Navigation schon besser aus

Das schaut schon besser aus. Für’s erste reicht das und wir gehen weiter zum Teaser-Bereich.

Teaser-Bereich

Im Teaser-Bereich hat man die Möglichkeit Inhalt einzufügen, der dem Nutzer direkt ins Auge springen soll. Wir benutzen dafür folgenden Code, den wir an unser HTML-Template anhängen werden.

HTML

Wir benutzen hier jetzt zum ersten mal eine Bedingung. In Zeile 2 startet die Abfrage, ob überhaupt irgend etwas in unserem Platzhalter „{teaserBereich}“ drinnen ist. Falls nicht, wird der Code innerhalb dieses Abschnitts nicht eingefügt.

Wir werden diesen Abschnitt später mit einem Grid-Element befüllen.

TypoScript

Im TypoScript haben wir diesen Bereich schon über unser FluidTemplate-Objekt zugewiesen.

Wir benutzen dafür den „Rand“-Bereich der bereits in TYPO3 als Inhalts-Bereich standardmäßig vordefiniert ist.

Da wir noch keine Inhalte in TYPO3 eingepflegt haben, schauen wir uns das Ergebnis an, wenn wir alle Bereiche konfiguriert haben.

Haupt-Inhalt und Sidebar

Auch hier benutzen wir wieder eine Bedingung um ggf. den Inhalt auf der vollen Breite darzustellen, falls keine Inhalte für die Sidebar vorhanden sind.

HTML

Neben der IF-ELSE-Verstrickung findet ihr in Zeile 4 und 14 den Wrapper für die Indexed-Search. Damit weiß TYPO3, dass alles was innerhalb dieser Kommentare steht, er in den Suchindex aufnehmen darf.

TypoScript

Genau wie beim Teaser-Bereich, ist auch hier wieder keine Anpassung am TypoScript nötig.

Auch hier wird wieder auf die standardmäßig vorhandenen Bereiche in TYPO3 zugegriffen.

Footer

Zum Abschluss kommt der Footer-Bereich, in dem wir allgemeine Informationen in einem mehrspaltigen Grid unterbringen wollen. Klingt schwierig … ist es aber nicht.

HTML

In Zeile 4 sehen wir hier einen neuen Fluid-ViewHelper den wir einsetzen. Damit können wir direkt auf TypoScript-Elemente zugreifen und diese einbinden. In unserem Fall ist dies „lib.footerInhalt„.

TypoScript

Im TypoScript fügen wir lediglich folgende Zeile ganz oben wieder dran:

Klar hätten wir hier auch das ganze wie bei dem Inhalt oder der Sidebar lösen können und den Marker innerhalb des FluidTemplate-Objekts hinzufügen. Ich wollte euch aber auch diese Möglichkeit zeigen, um direkt auf die Elemente im TypoScript zugreifen zu können.

Rein theoretisch könnten wir jetzt anfangen Inhalte in TYPO3 zu pflegen. Wir wollen uns dies aber mal etwas näher anschauen.

Im Frontend sehen wir erstmal nicht viel neues, außer wir schalten in die HTML-Ansicht um.

Backend-Vorlage

Lasst uns zurück ins Backend gehen und dort im „Web„-Modul auf die „Seite„-Funktion klicken. Dazu wählen wir auch die erste Seite unserer Homepage an, die „Startseite„.

Übersicht über die Inhalte in TYPO3

Übersicht über die Inhalte in TYPO3

Wir sehen im rechten Bereich (4) vier Spalten: Links, Normal, Rechts und Rand. Hier könnten wir jetzt anfangen Inhalte zu pflegen.

Mir gefällt diese Struktur aber nicht und in TYPO3 gibt es das tolle Feature Backend-Layouts zu hinterlegen.

Dazu gehen wir wieder in unseren System-Ordner und im Web-Bereich auf die „Liste„-Funktion.

Backend-Layout anlegen

Backend-Layout anlegen

Wir klicken dort auf „Neuen Datensatz erstellen“ (3) und wählen in der Liste unter „Systemdatensätze“ dann  „Backend-Layout“ aus.

Als Titel wählen wir „Normal“ aus. Ein Symbol benötigen wir jetzt nicht und eine Beschreibung brauchen wir auch nicht.

In „Konfiguration“ könnten wir jetzt über den Assistenten das Gerüßt zusammenstellen, dazu gehe ich in einem anderen Artikel aber noch mal etwas näher ein. Wir fügen nun folgenden Inhalt dort ein:

Danach speichern und schließen wir das ganze wieder. Jetzt wechseln wir über das „Web„-Modul in die „Seite„-Ansicht und klicken auf unsere Wurzelebene.

Backend-Layout zuweisen

Wir gehen hier in die Seiteneigenschaften, wechseln auf den Reiter „Erscheinungsbild“ und wählen für „Backend-Layout (für Unterseiten dieser Seite)“ das eben angelegte Backend-Layout: „Normal“ aus.

Hier weißen wir der Wurzelebene für alle Unterseiten das Backend-Layout zu

Hier weißen wir der Wurzelebene für alle Unterseiten das Backend-Layout zu

Speichern und schließen, fertig. Wir klicken dann auf die „Startseite“ in unserem Seitenbaum.

Backend-Layout in Aktion

Ihr müsstet nun folgende Ansicht vorfinden können:

Wir sehen jetzt die veränderte Struktur mit dem Backend-Layout

Wir sehen jetzt die veränderte Struktur mit dem Backend-Layout

Dies ist eine Struktur, mit der es sich vor allem für Kunden oder Redakteure, viel intuitiver arbeiten lässt.

Fazit

Wir könnten jetzt schon anfangen Inhalte einzupflegen. Es fehlen aber noch die mehrspaltigen Inhalte über die Gridelements-Erweiterung. Dies verschieben wir in den nächsten Teil der Serie. Darin kümmern wir uns um die Inhaltspflege, bauen die Navigation weiter aus und verschönern unsere Webseite mit ein wenig CSS.

Seid also gespannt auf mehr!

Änderungen

09.03.2015 – Änderungen im Teaser-Bereich (Klasse hinzugefügt); Änderungen im Inhalte- u. Sidebar-Bereich hinzugefügt. ViewHelper für Ausgabe geändert (blockierte die Ausgabe von speziellen HTML-Elementen)

 

#6.2#Artikelserie#Der Einstieg#Template#TYPO3

Previous Post

Next Post

Hinterlasse einen Kommentar

9 Kommentare auf "TYPO3 – Der Einstieg – Das Template"

Benachrichtige mich zu:
avatar
Sortiert nach:   neuste | älteste | beste Bewertung
kevin_kleinjung
Gast

Freu mich auf den nächsten Teil.
Jedoch ein Problem stellte sich mir, nachdem ich dem System-Ordner den Code zugewiesen habe und der Wurzelebene das „Template enthält“ zugewiesen hab, kam dennoch „Oops, an error occurred!“ erst als ich den Code selbst auch auf der Wuzelebene eingebunden hatte ging es.

Martin Hesse
Gast

Hallo Kevin,

Danke für dein Feedback.

Wo genau trat der Fehler auf? Hast du auch die gleiche TYPO3-Version oder probierst du es mit einer anderen?

kevin_kleinjung
Gast
Die Version ist identisch, vielleicht gab es aber auch nur ein durcheinander mit der Anzeige, welches Skript worunter steht. Vielleicht wäre es noch etwas deutlicher, wenn du am ende dieses Beitrags noch je einen Screenshot sowie TS von der Template-Seite des Wurzelordners und Systemordners anhängen würdest, so könnte man den eigenen „Mitmach-Schritt“ mit deiner Anleitung Vergleichen 🙂 Ist es eigentlich auch wichtig, ob die geschweiften Klammern wirklich noch in der selben Zeile stehen ? Da ich C# und PHP schreibe sonst, schreibe ich code immer im folgenden Stil zb bei einer function: public function irgendetwas() { …. } In der… Read more »
Martin Hesse
Gast

Hallo Kevin,

entschuldige bitte die Späte Rückmeldung.

Du kannst das komplette Template etc. pp. im letzten Teil herunterladen.

Zu der Frage mit den geschweiften Klammern.

Das ist nicht wichtig, nein … zumindest nicht in PHP. Im TYPOScript kann ich es dir spotan nicht sagen, kann mir aber vorstellen das er dann rumzickt. Daher lieber darauf achten im TS das die Klammern in der selben Zeile stehen.

Man sollte sich aber an gewisse Coding Conventions halten.
http://docs.typo3.org/typo3cms/CodingGuidelinesReference/

john
Gast

Hallo,
das Problem ist nun behoben!! ich hatte die TS-Anweisungen für die Navigation nicht am Anfang von Setup sondern irgendwo mitten drin! ich habe einfach die Anweisung ausgeschnitten und ganz oben eingefügt!!!

Viele Grüsse
John

Matthias
Gast

Hallo,
Sehr tolle Anleitung!

Zu meinem Problem:
Ich habe die Navigation wie beschrieben eingebunden bzw den Code kopiert und die Dateien erstellt, bei mir kommt jedoch nur ein Menü mit unformatiertem Layout?

LG Matthias

wpDiscuz