Hands on TYPO3 7 LTS Teil 2: Das Frontend mit Bootstrap 3
Tags: TYPO3, Technology Autor: Nepomuk Gasteiger
Quelle: http://getbootstrap.com/examples/jumbotron-narrow/
Hinweis: Dieser Artikel ist Teil 2 der vierteiligen Artikelserie Hands on TYPO3 7 LTS.
Das Frontend unseres Beispielprojekts bauen wir mit Hilfe des CSS-Frameworks Bootstrap Version 3.3.6 auf. Out of the box verfügt Bootstrap über ein Responsive Grid mit 12 Spalten und einer maximalen Breite von 1170 Pixeln. Für unser Projekt verwenden wir das Beispiel-Template Narrow Jumbotron (http://getbootstrap.com/examples/jumbotron-narrow/). Die maximale Breite ist hier auf 730 Pixel begrenzt. Das Template verfügt über eine Navigation, ein Jumbotron und einen zweispaltigen Inhaltsbereich.
TYPO3 bringt Out of the Box keine fertige Frontend-Ausgabe mit. Ruft man das Frontend auf, erscheint nicht mehr als ein freundliches “HELLO WORLD!”. Um unseren Seitenbaum und unsere Inhalte auszugeben, müssen wir das System deshalb erst entsprechend konfigurieren. Dazu legen wir uns erstens ein Backend-Layout an und geben ein paar Dummy-Inhalte ein. Zweitens erstellen wir ein TypoScript Seiten-Template und binden die nötigen CSS-Dateien ein. Drittens integrieren wir unser HTML-Template und konfigurieren die Ausgabe unserer Inhalte per TypoScript.
Backend-Layouts
Um verschiedene Seitenlayouts - zum Beispiel für die Homepage und Inhaltsseiten - auswählen zu können, legen wir uns ein Backend-Layout an. Mit Backend-Layouts lassen sich mit wenigen Zeilen Code verschiedene Layouts zur Auswahl stellen (Backend-Layouts sind nicht spezifisch neu in TYPO3 7 LTS, sondern wurden mit der Version 4.5 eingeführt).
Wir wechseln in unseren Ordner “Backend-Layouts” und legen mit dem Wizard ein neues Backend-Layout an. Das Backend-Layout soll aus den zwei Bereichen bestehen, die wir für unser Beispiel-Template brauchen:
- Das Jumbotron mit der Spaltennumer 1
- Den Inhaltsbereich mit der Spaltennummer 2
Sobald wir das Backend-Layout gespeichert haben, können wir es jeder Seite oder einem ganzen Seitenbaum über die Seiteneigenschaften (Tab Erscheinungsbild) zuweisen. Übernehmen wir das Backend-Layout für unsere Homepage, entspricht die Layout-Struktur des Backends unserem HTML-Template und wir können ein paar Beispielinhalte anlegen.
Fluid Templates
Um die Inhalte auszugeben, setzen wir die Templating-Engine Fluid ein. Dazu laden wir den HTML-Code und die CSS-Datei des Bootstrap-Templates (jumbotron-narrow.css) von getbootstrap.com herunter und speichern sie im fileadmin-Ordner unserer TYPO3-Installation.
Anschließend wechseln wir auf die Root-Seite und legen ein neues Seiten-Template an. Wir geben dem Template einen Namen und binden unter Include Static das statische Template von Content Elements (fluid_styled_content) ein.
Als Nächstes wechseln wir ins SETUP unseres Seiten-Templates und passen das bestehende PAGE-Objekt so an, dass unsere Bootstrap-CSS-Dateien geladen werden (Eine ausführliche Dokumentation von TypoScript findet Ihr in der TypoScript Reference). Wir binden zuerst die Main-CSS-Datei von Bootstrap über das CDN ein und dann die CSS-Datei des Jumbotron-Narrow-Templates über unseren Server:
page = PAGE
page.typeNum = 0
page.headerData.5 = TEXT
page.headerData.5.value(
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link href="/fileadmin/jumbotron-narrow.css" rel="stylesheet">
)
page.bodyTag = <body>
Dann passen wir das Bootstrap-HTML-Template entsprechend an. Dazu wechseln wir wieder in unseren fileadmin-Ordner, öffnen das HTML-Template und löschen alles, was nicht innerhalb des body-Tags steht. Die Inhalte, die TYPO3 liefern soll, ersetzen wir mit Fluid-Variablen. Unser Template sollte anschießend so aussehen:
<div class="container">
<div class="header clearfix">
<f:format.raw>{navigation}</f:format.raw>
<f:format.raw>{projecttitle}</f:format.raw>
</div>
<f:if condition="{backendlayout} == 1">
<div class="jumbotron">
<f:format.raw>{jumbotron}</f:format.raw>
</div>
<div class="row marketing">
<f:format.raw>{inhalt}</f:format.raw>
</div>
</f:if>
<footer class="footer">
<p>© 2016 visionbites GmbH</p>
</footer>
</div>
Mit Hilfe des Fluid ViewHelpers format.raw geben wir vier Variablen aus: {navigation}, {projecttitle}, {jumbotron} und {content}, die mit den entsprechenden Inhalten aus dem TYPO3-Backend gefüllt werden sollen. Außerdem integrieren wir über die if-condition {backendlayout} eine Abfrage für das Backend-Layout. Eine ausführliche Referenz der Fluid ViewHelper findet Ihr im <link https: docs.typo3.org typo3cms extbaseguide fluid index.html _blank>Fluid Guide.
Damit die Inhalte wie gewünscht ausgegeben werden, brauchen wir schließlich noch ein paar Zeilen TypoScript-Code im Setup-Feld unseres Seiten-Templates: Unterhalb des Page-Objekts erstellen wir ein weiteres TypoScript-Objekt vom Typ FLUIDTEMPLATE. Dem FLUIDTEMPLATE weisen wir erstens unser HTML-Template im fileadmin zu (example_narrow.html).
page.10 = FLUIDTEMPLATE
page.10{
template = FILE
template.file = /fileadmin/example_narrow.html
Zweitens definieren wir die Variable backendlayout, um das Feld im Template über eine Condition abfragen zu können.
variables{
backendlayout = TEXT
backendlayout.data = levelfield:-2,backend_layout_next_level,slide
backendlayout.override.field = backend_layout
[...]
}
Im Fluid-Template können wir nun mit einer Condition auf die Variable zugreifen:
<f:if condition="{backendlayout} == 1">CODE FÜR LAYOUT 1</f:if>
Analog können weitere Backend-Layouts angelegt und abgefragt werden.
Um die Navigation auszugeben, legen wir drittens ein HMENU an und geben den Einträgen die nötigen Bootstrap-Klassen:
navigation < styles.sitemap.get
navigation = HMENU
navigation{
1 = TMENU
1{
wrap (
<nav>
<ul class="nav nav-pills pull-right">|</ul>
</nav>
)
expAll = 1
NO {
ATagParams =
wrapItemAndSub = <li role="presentation">|</li>
}
}
}
Viertens geben wir den Title unseres Projekts über ein einfaches TEXT-Objekt aus:
projecttitle = TEXT
projecttitle.value = Testprojekt
projecttitle.wrap = <h3 class="text-muted">| </h3>
Zur Ausgabe der Inhalte definieren wir fünftens die Variablen {jumbotron} und {inhalt}, um die Bereiche unseres Backend-Layouts an das Template zu übergeben. Die Zahlen bei colPos entsprechen dabei den Spaltennummern unseres Backend-Layouts.
jumbotron < styles.content.get
jumbotron.select.where = colPos = 1
jumbotron.wrap = |
inhalt < styles.content.get
inhalt.select.where = colPos = 2
inhalt.wrap = |
Das gesamte Listing sollte jetzt so aussehen:
page = PAGE
page.typeNum = 0
page.headerData.5 = TEXT
page.headerData.5.value (
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link href="fileadmin/jumbotron-narrow.css" rel="stylesheet">
)
page.bodyTag = <body>
page.10 = FLUIDTEMPLATE
page.10{
template = FILE
template.file = fileadmin/example_narrow.html
variables{
backendlayout = TEXT
backendlayout.data = levelfield:-2,backend_layout_next_level,slide
backendlayout.override.field = backend_layout
navigation < styles.sitemap.get
navigation = HMENU
navigation{
1 = TMENU
1{
wrap (
<nav>
<ul class="nav nav-pills pull-right">|</ul>
</nav>
)
expAll = 1
NO {
ATagParams =
wrapItemAndSub = <li role="presentation">|</li>
}
}
}
projecttitle = TEXT
projecttitle.value = Testprojekt
projecttitle.wrap = <h3 class="text-muted">|</h3>
jumbotron < styles.content.get
jumbotron.select.where = colPos = 1
jumbotron.wrap = |
inhalt < styles.content.get
inhalt.select.where = colPos = 2
inhalt.wrap = |
}
}
Rufen wir nun das Frontend unserer Homepage auf, haben wir schon ein recht ordentliches Ergebnis:
Weiter geht's mit Hands on TYPO3 LTS Teil 3: Inhalte mit Fluid Styled Content & Gridelements rendern.
Externer Inhalt - Mapbox
An dieser Stelle finden Sie Inhalte eines Drittanbieters, die Sie mit einem Klick anzeigen lassen können.
Dadurch können personenbezogene Daten an den Dienst Mapbox übermittelt werden. Mehr Informationen finden Sie in unseren Datenschutzbestimmungen.