Seitentemplate mit Typo3 7.6
Im Web findet man an vielen Stellen vorgefertigte Templates aus HTML und CSS, die man für eigene Projekte nutzen kann. Eine Recherche mit den Stichworten free css template führt schnell zu einer Reihe von Ergebnissen. Unter http://www.cmsmadesimple.de/dokumentation/cmsms-templates/freie-templates.html findet sich eine Übersicht über mehrere derartige Angebote.
Eine schöne Qulle für eine rohe Vorlage ist http://www.initializr.com/. Von hier kann man sich schön z.B. das Grundgerüst für eine Seite auf der Basis von Bootstrap holen.
Die Vorlage
Die folgende Beschreibung geht von einem selbst erstellten Template auf Basis von Twitter Bootstrap aus, die folgendes Aussehen hat.
Unter
- http://www.bootply.com/usApXfH4He# (dreispaltig)
- http://www.bootply.com/UxluD5TnMr# (zweispaltig)
- http://www.bootply.com/sGlQYEN6Zk# (einspaltig)
kann man online mit der Vorlage experimentieren.
Die Farben folgen keinen künstlerischen Ansprüchen, sondern sollen nur das Auffinden der einzelnen Elemente in der CSS-Datei erleichtern und damit auch die individuelle Anpassung.
Alle individuellen Dateien befinden sich im Verzeichnis nettemplate unterhalb von fileadmin. Das hat den Hintergrund, dass ich das Layout auch als Distribution anbieten möchte und dabei gibt es die Möglichkeit bei der Installation Dateien in einen Unterordner von fileadmin kopieren zu lassen, der den gleichen Namen hat wie die Distribution. In diesem Bereich hat man auch vom Backend aus einfachen Zugriff auf die Dateien, ohne unnötig die Zugriffspfade erweitern zu müssen.
Das Paket ist nicht mehr herunter ladbar, da inzwischen die Version 8.7 aktuell ist.
nettemplate
|-- indexed_search
|-- news
|-- Resources
|-- Privat
|-- Layouts
|-- Partials
|-- Templates
|-- Public
|-- Bilder
|-- Css
|-- Fonts
|-- JavaScript
Das Archiv beinhaltet einige Unterordner, die sich im Prinzip an die Konventionen halten. Das eigene Layout befindet sich im Verzeichnis Resources und den Unterordnern. Die Ordner indexed_search, news und magnific-popup enthalten die Dateien zur Anpassung der Gestaltung der entsprechenden Extensionen.
Das ZIP-Archiv wird in den Ordner fileadmin/ entpackt, wobei der Unterordner nettemplate erstellt wird.
Layouts mit Fluid
Ein Fluid-Layout findet sich überlicherweise in einem Verzeichnis Resources. Dieses verzeichnis besitzt dann die beiden Unterordner Private und Public. Im Ordner Public befinden sich alle Dateien, die unverändert an den Browser ausgeliefert werden, also Bilder, Css, Fonts und Javascript. Der Übersichtlichkeit halber befinden sich diese Elemente jeweils wieder in eigenen Unterverzeichnissen.
Der Aufbau des Layout wird über die Elemente im Ordner Private definiert. Direkt referenziert werden die Templates aus dem gleichnamigen Ordner. Jedes dieser Templates ist dann Teil eines Layouts, hier werden die Dinge festgelegt, die bei allen Templates gleich sind. Im Ordner Partials finden sich dann Teile des Layouts, die in mehreren Templates identisch benötigt werden, also z.B. die Beschreibung für den Footer.
Die Dateinmane, z.B. der Partials, müssen auf .html enden. Aber beim Aufruf des Partials muss man jeweils die Endung weglassen.
Hinweis: Bei Typo3 8.7.x müssen die Dateinamen der Partials mit einem Großbuchstaben beginnen.
Das Layout baut sich momentan nach folgendem Schema auf.
Layout: DefaultLayout.html
<f:render section="inhalt" />
Hier könnte man natürlich deutlich mehr Zeilen unterbringen, z.B. für den Kopf der Seite.
Template: zweispaltig.html
<f:layout name="DefaultLayout" />
<f:section name="inhalt">
<div id="zweispaltig">
<div class="container">
<div class="row" id="header">
<div class="col-md-12"><f:cObject typoscriptObjectPath="lib.field_headerimage" /></div>
</div>
<f:render partial="navbar" />
<f:render partial="service" />
<f:render partial="rootline" />
<div id="inhalt" class="row equalheight">
<div class="col-md-3 equal" id="spalte-links">
<div id="menu-links">
<a id="subnav" name="subnav"></a><ul class="nav nav-pills nav-stacked" role="tablist">
<f:cObject typoscriptObjectPath="lib.field_submenu" />
</ul>
</div>
<div id="inhalt-links">
<!--TYPO3SEARCH_begin-->
<f:format.raw>{inhaltLinks}</f:format.raw>
<!--TYPO3SEARCH_end-->
</div>
</div>
<div class="col-md-9 equal" id="hauptinhalt">
<a id="content" name="content"></a>
<!--TYPO3SEARCH_begin-->
<f:if condition="{data.subtitle}">
<f:then><h1 class="pagetitle">{data.subtitle}</h1><br></f:then>
<f:else><h1 class="pagetitle">{data.title}</h1><br></f:else>
</f:if>
<f:format.raw>{hauptInhalt}</f:format.raw>
<!--TYPO3SEARCH_end-->
<p style="font-size:0px"> <p>
</div>
</div>
<f:render partial="footer" />
</div>
</div>
</f:section>
<div class="row" id="footer">
<div class="col-md-12"><f:cObject typoscriptObjectPath="lib.field_footer" /></div>
</div>
Dieses Partial legt den Aufbau des Footers fest. Dabei greift es auf den Viewhelper f:cObject zurück, über den ein Typoscript-Objekt aufgerufen wird, welches sich in diesem Beispiel im Backend auf der Seite mit den Templates befindet.
<div id="navbar">
<nav class="navbar navbar-default" role="navigation">
<a id="navigation" name="navigation"></a>
<!-- Titel und Schalter werden für eine bessere mobile Ansicht zusammengefasst -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Navigation ein-/ausblenden</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Hauptmenü</a>
</div>
<!-- Alle Navigationslinks, Formulare und anderer Inhalt werden hier zusammengefasst und können dann ein- und ausgeblendet werden -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<f:cObject typoscriptObjectPath="lib.mainnav" />
</ul>
</div> <!-- /.navbar-collapse -->
</nav>
</div>
Partial: Rootline.html
<div class="row" id="rootline"><f:cObject typoscriptObjectPath="lib.field_rootline" /></div>
Partial: Service.html
<div class="row" id="service"><f:cObject typoscriptObjectPath="lib.field_service" /></div>
Typoscript zum Layout
Auf der Root-Seite habe ich folgenden Inhalte stehen.
Feld: Konstanten
resDir = fileadmin/nettemplate/Resources defaultDescription = Das ist eine von Netthelp erstellte Seite
Feld: Setup
page = PAGE
page {
bodyTag >
bodyTagCObject = TEXT
bodyTagCObject.dataWrap = <body id="uid-{field:uid}">
config.index_enable = 1
10 = FLUIDTEMPLATE
10 {
partialRootPath = {$resDir}/Private/Partials
layoutRootPath = {$resDir}/Private/Layouts
variables {
inhaltLinks < styles.content.get
inhaltLinks.select.where = colPos = 1
inhaltLinks.slide = -1
hauptInhalt < styles.content.get
hauptInhalt.select.where = colPos = 0
inhaltRechts < styles.content.get
inhaltRechts.select.where = colPos = 2
inhaltRechts.slide = -1
}
file = {$resDir}/Private/Templates/zweispaltig.html
}
} # Ende FLUIDTEMPLATE
includeCSS {
bootstrap = {$resDir}/Public/Css/Bootstrap/css/bootstrap.css
magnific = {$resDir}/Public/Css/magnific-popup.css
anpassung = {$resDir}/Public/Css/anpassung.css
}
} # Ende PAGE
Ohne Javascript geht das nicht
page.footerData.10 = TEXT
page.footerData.10.value (
<!-- jQuery (wird für Bootstrap JavaScript-Plugins benötigt) -->
<script src="{$resDir}/Public/JavaScript/jquery.min.js" type="text/javascript"></script>
<!-- Binde alle kompilierten Plugins zusammen ein (wie hier unten) oder such dir einzelne Dateien nach Bedarf aus -->
<script src="{$resDir}/Public/JavaScript/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function($){
$(document).ready(function(){
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
event.preventDefault();
event.stopPropagation();
$(this).parent().siblings().removeClass('open');
$(this).parent().toggleClass('open');
});
});
})(jQuery);
</script>
)
Dieser Code-Teil ist für das Responsive-Layout auf kleinen Displays wichtig. Damit wird das Menü geöffnet und geschlossen. Das Script sucht dazu auf der Seite bestimmte Klassen, die im Layout gesetzt sein müssen. Wenn das alles richtig eingegeben ist, dann sollte auch das Frontend der Seite bereits aufrufbar sein, da das benötigte Css ja eingebunden ist.
Mehrere Templates
In meinem Ordner Templates habe ich noch zwei weitere Vorlagendateien liegen.
Template: einspaltig.html
<f:layout name="DefaultLayout" />
<f:section name="inhalt">
<div id="einspaltig">
<div class="container">
<div class="row" id="header">
<div class="col-md-12"><f:cObject typoscriptObjectPath="lib.field_headerimage" /></div>
</div>
<f:render partial="navbar" />
<f:render partial="service" />
<f:render partial="rootline" />
<div id="inhalt" class="row equalheight">
<div class="col-md-12 equal" id="hauptinhalt">
<a id="content" name="content"></a>
<!--TYPO3SEARCH_begin-->
<f:if condition="{data.subtitle}">
<f:then><h1 class="pagetitle">{data.subtitle}</h1><br></f:then>
<f:else><h1 class="pagetitle">{data.title}</h1><br></f:else>
</f:if>
<f:format.raw>{hauptInhalt}</f:format.raw>
<!--TYPO3SEARCH_end-->
<p style="font-size:0px"> <p>
</div>
</div>
<f:render partial="footer" />
</div>
</div>
</f:section>
Template: dreispaltig.html
<f:layout name="DefaultLayout" />
<f:section name="inhalt">
<div id="dreispaltig">
<div class="container">
<div class="row" id="header">
<div class="col-md-12"><f:cObject typoscriptObjectPath="lib.field_headerimage" /></div>
</div>
<f:render partial="navbar" />
<f:render partial="service" />
<f:render partial="rootline" />
<div id="inhalt" class="row equalheight">
<div class="col-md-3 equal" id="spalte-links">
<div id="menu-links">
<a id="subnav" name="subnav"></a>
<ul class="nav nav-pills nav-stacked" role="tablist">
<f:cObject typoscriptObjectPath="lib.field_submenu" />
</ul>
</div>
<div id="inhalt-links">
<!--TYPO3SEARCH_begin-->
<f:format.raw>{inhaltLinks}</f:format.raw>
<!--TYPO3SEARCH_end-->
</div>
</div>
<div class="col-md-6 equal" id="hauptinhalt">
<a id="content" name="content"></a>
<f:if condition="{data.subtitle}">
<f:then><h1 class="pagetitle">{data.subtitle}</h1><br></f:then>
<f:else><h1 class="pagetitle">{data.title}</h1><br></f:else>
</f:if>
<!--TYPO3SEARCH_begin-->
<f:format.raw>{hauptInhalt}</f:format.raw>
<!--TYPO3SEARCH_end-->
<p style="font-size:0px"> <p>
</div>
<div class="col-md-3 equal" id="spalte-rechts">
<!--TYPO3SEARCH_begin-->
<f:format.raw>{inhaltRechts}</f:format.raw>
<!--TYPO3SEARCH_end-->
</div>
</div>
<f:render partial="footer" />
</div>
</div>
</f:section>
Auswahl und Zuordnung der Templates
Da anscheinend keine direkte Auswahl des Templates im Backend vorgesehen ist geht man hier einen kleinen Umweg. Für die Auswahl zwischen Mehrspaltigen Templates ist es generell sehr praktisch, wenn auch im Backend nur die benötigte Anzahl an spalten vorhanden ist. Die Gestaltung solcher Backend-Layouts ist vorgesehen. Für die Auswahl des Backend-layouts gibt es auch ein Feld in den Seiteneigenschaften. Im Typoscript zur Gestaltung kann man dann auf diese Einstellung Bezug nehmen.
Erstellung von Backend-Layouts
Für die Speicherung der Backend-Layouts habe ich den Sysordner Backend-Layout vorgesehen. Über die Funktion Liste wählt man diesen Ordner aus und landet dann die Möglichkeit ein neues Element vom Typ Backend-Layout anzulegen.
Hier muss man nur einen Namen festlegen und im Feld Konfiguration die entsprechende Aufteilung.
backend_layout {
colCount = 1
rowCount = 1
rows {
1 {
columns {
1 {
name = Hauptinhalt
colPos = 0
}
}
}
}
}
Im einfachsten Fall also nur eine Reihe und eine Spalte. Der Hauptinhalt befindet sich in Spalte 0.
Für das zweispaltige Layout hat die Konfiguration folgenden Inhalt.
backend_layout {
colCount = 2
rowCount = 1
rows {
1 {
columns {
1 {
name = Inhalt unter linkem Menü
colPos = 1
}
2 {
name = Hauptinhalt
colPos = 0
}
}
}
}
}
Und für das dreispaltige Layout dann
backend_layout {
colCount = 3
rowCount = 1
rows {
1 {
columns {
1 {
name = Inhalt unter linkem Menü
colPos = 1
}
2 {
name = Hauptinhalt
colPos = 0
}
3 {
name = Rechte Spalte
colPos = 2
}
}
}
}
}
Wichtig ist, dass man sich die Nummer des zugehörigen Datensatzes merkt. Für das erste Layout ist das die Nummer 1 und für das dritte die Nummer 3, man sollte sie also auch in dieser Reihenfolge anlegen. Auf die Nummern nimmt man nämlich dann im Typoscript Bezug.
Das Typoscript dazu
Das Typoscript-Template auf der Root-Seite muss nun erweitert werden:
#file = {$resDir}/Private/Templates/zweispaltig.html
file.stdWrap.cObject = CASE
file.stdWrap.cObject {
key.data = levelfield:-1, backend_layout_next_level, slide
key.override.field = backend_layout
# key.data = pagelayout
default = TEXT
default.value = {$resDir}/Private/Templates/einspaltig.html
1 < .default
2 < .default
2.value = {$resDir}/Private/Templates/zweispaltig.html
3 < .default
3.value = {$resDir}/Private/Templates/dreispaltig.html
}
}
Jetzt kann man z.B. in den Seiteneigenschaften der Root-Seite die Spaltenzahl einstellen, die man als Vorgabe für alle späteren Seiten machen möchte.
Die Vorgabe lässt sich natürlich auf jeder Seite individuell überschreiben, sofern die Rechte dazu nicht eingeschränkt wurden.
