9 - Zusammenfassung
Super! Du hast mit Tutorial 2 eine (eigene) HTML-Vorlage in ein Template für Silverstripe umgebaut. Wenn du nun deine Gestaltungsideen mit Silverstripe verwirklichen willst, ist es übersichtlicher von Grund auf zu beginnen, statt viele kleine Veränderungen an einem bestehenden Template vorzunehmen. (Das Theme 'simpel' ist sehr gut gebaut, aber auch unglaublich reichhaltig. Um es versiert zu Verändern, must du es kennen, dazu ist ein grosser Lernaufwand nötig.
Zu deiner Unterstützung sind die Schritte hier nochmals aufgelistet
Die Vorlagedatei auf ihre Tauglichkeit prüfen 1
Die Bedingungen für ein zeitgemässes Silverstripe-Template sind:
- HTML5/CSS3
- Keine Font-Tags oder Tabellen im Code
- Positionsrahmen mit DIV-Tags oder HTML5-Elementen
- Falls erforderlich, kann ein Ordner 'images' für die Bilder verwendet werden
- Die Navigation muss mit dem Listen-Element oder HTML5-Tags gebaut sein
Die Funktionsweise eines Templates 2
Der Page-Controller Page.php ruft die Html-Datei Page.ss auf.
Die Ordnerstruktur eines 'Silverstripe-Themes' 3
Sie ist durch das Engine des CMS festegelegt. Folgende Ordner sind notwendig:
theme/
meintemplate/
css/
images/
templates/
Die Externen CSS-Dateien 3
Die bei der Installation bestehenden CSS-Verlinkungen im Page-Controller: Page.php:
Requirements::themedCSS('layout');
Requirements::themedCSS('typography');
Requirements::themedCSS('form');
Requirements::themedCSS('print','print');
In Tutorial 2 haben wir nur die CSS-Datei layout.css verwendet. Die anderen Dateien bleben vorerst leer, wir haben sie erstellt, um eine Fehlermeldung zu vermeiden. In der Datei 'Page.php' sind sie verlinkt. Eine CSS Datei für den Print ist ebenfalls vorbereitet.
Die HTML-Datei Page.ss 5
Sie kann wie jede andere HTML-Datei verwendet werden. Als Silverstripe-Template müssen die PHP-Platzhalter in den gewünschten HTML-Code eingetragen werden. In Tutorial 2 verwendete PHP-Platzhalter:
- $Title im Head-Tag den Seitentitel anzeigen
- <% base_tag %> bringt die CSS-Verlinkung in den Head-Tag
- $Link bringt den Hyperlink in die Navigationsliste
- $MenuTitle bringt die Navigationsbezeichnung in die Navigationsliste
- <% loop Menu(1) %> durchläuft alle Listenelemente <li> im <ul>
- <% end_loop %> beendet die Schleife
- $Content bringt den Inhalt in das Template
- $Form wird für die Anzeige der Formulare verwendet (bsp: Login)
Ein Vergleich von HTML-Vorlage und Page.ss 6
Die Datei Page.ss zeigt sich aufgeräumter, da alle Content-Inhalte und Menu-Inhalte dynamisch aus der Datenbank geladen werden.
Das eigene Template publizieren 7
Das Template muss die Silverstripe-typische Ordnerstruktur ausfweisen. Es wird in den Ordner themes/ kopiert. In der Datei _config.php muss das Template eingetragen werden, damit es als Standardtemplate geladen wird.
SSViewer::set_theme('meintemplate');
Beim Aufruf die Silverstripe-Datenbank aktualisieren mit: http://xxx.ch/dev/build
Bilder im Template verwenden 8
Die Bilder die zum Template gehören, werden meist über die CSS-Stile als Background-Bilder geladen.
background:url(../images/weblabor.png) no-repeat;
Bilder die mit dem img-Tag ins Template geladen werden, sollten mit der Pfadangabe:
$ThemeDir/printer.png referenziert werden.