Silverstripe - America Design » 5- HTML-Datei Page.ss

Wie unter 2 - Funktionsweise des Templates erklärt, muss der HTML-Code in die Datei Page.ss geschrieben werden. Der Silverstripe-Controller Page.php erwartet die Datei unter: themes/meintemplate/templates/Page.ss. Der Dateityp *.ss wird von der Silverstripe eigenen 'Templatemaschine' Saphire verwaltet. Möglicherweise kennt dein Editor oder dein Betriebssystem diesen Dateityp (noch) nicht.

(Optional: Du kannst den Typ *.ss in dein System eintragen: MAC Datei-Informationen >öffnen mit;
PC Explorer >Dateitypen öffnen mit;
In Dreamweaver kannst du den Dateityp unter >Voreinstellungen >Dateitypen / Editoren als neuen Dateityp eintragen und dem Programm Dreamweaver zuweisen.)

Da es sich bei Page.ss (Gleich geschrieben wie der Controller - Klasse: Page) um eine reine Textdatei handelt, kannst du sie mit jedem Editor öffnen. Sie verhällt sich wie eine HTML-Datei wenn sie von Silverstripe in den Browser geladen wird.

1. Erstelle im Ordner themes/meintemplate/templates die Datei Page.ss
2. Öffne sie im Editor
3. Kopiere den HTML-Codeblock der Vorlagedatei in diese Datei
4. Speichere Page.ss

Beispieldatei Codeansicht HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Weblabor HTML5</title>
</head>
<body>
<header><h1>Weblabor</h1></header>
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Seite 1</a></li>
    <li><a href="#">Seite 2</a></li>
    <li><a href="#">Seite 3</a></li>
  </ul>
</nav>
<article>
  <h1>Titel der Startseite</h1>
  <p>Lorem ipsum dolor sit amet ... </p>
</article>
<footer>
  <p>Adresse in der Fusszeile</p>
</footer>
</body>
</html>

Im nächsten Schritten werden wir notwendige PHP-Platzhalter hinzufügen und den überflüssigen HTML-Code entfernen. Beginnen wir oben, um unsere Datei Page.ss zum Silverstripe-Template umzubauen.

Den Head-Title dynamisch einfügen:

Mit dem Platzhalter $Title können wir für jede unserer Seiten den jeweiligen Titel ausgeben.

5. Ersetze 'HTML5 - Weblabor' im Title-Tag durch $Title

<title>$Title</title>

Die Meta-Tags ins Template einfügen

Für die Anzeige der Head- und Meta-Infprmationen im Template einfacher Platzhalter zur Verfügung:
<% base_tag %>, so werden die im Page-Controller festgelegten Dateien geladen.

6. Füge <% base_tag %> unter dem title-Tag in deinen head-Tag ein.

<head>
<meta charset="utf-8">
<title>$Title</title>
<% base_tag %>
</head>

Die CSS-Dateien verlinken

Die im Page-Controller angeforderten CSS-Verlinkungen können direkt ins Template geschrieben werden. Wir benutzen im ersten Schritt nur die CSS-Datei 'layout.css', die noch leeren Dateien können aber auch schon verlinkt werden.

7. Füge die Verlinkung der CSS-Dateien in die Datei Page.ss ein:
   <% require themedCSS('typography') %>
   <% require themedCSS('form') %>
   <% require themedCSS('layout') %>
.

<head>
<meta charset="utf-8">
<title>$Title</title>
    <% base_tag %>
    <% require themedCSS('typography') %>
    <% require themedCSS('form') %>
    <% require themedCSS('layout') %>
</head>

Die Listennavigation mit dynamischen Platzhaltern erstellen

Die bestehende Listennavigation soll durch dynamische PHP-Platzhalter ersetzt werden. Dazu müssen wir die Liste von unnötigem Code säubern und zur Silverstripe-Navigation umbauen. Wir verwenden die bestehenden Tag-Elemente des obersten Listenelements. Darin fügen wir die Platzhalter für Navigationsbezeichnung und Link ein. (Die weiteren Listenelemente können wir löschen, sie werden mit Silverstripe ja dynamisch geladen).

7. Ersetze das Linkziel <a href="index.html"> durch <a href="$Link">
8. Ersetze die Navigationsbezeichnung 'Home' durch '$MenuTitle'
9. Lösche die unteren ListenelementeDu erhälst nun eine kurze Liste mit nur einem Listenelement.

...
<ul>
  <li><a href="$Link">$MenuTitle</a></li>
</ul>
...

Würde das Template so verwendet, würde für die jeweils aufgerufene Seite ihre Navigationsbezeichnung und ihr Hyperlink angezeigt. Das ist noch nicht ganz das, was wir mit unserem Menü erreichen wollen. Unsere Absicht ist es, bei jeder aufgerufenen Seite alle Navigationspunkte anzuzeigen. Wir müssen also mit der Abfrage der Datenbank eine Schleife durchlaufen, die uns ein Array mit sämtlichen Listenelementen ausgiebt. Im Silverstripe-Template nennt sich das, ein "loop"* erstellen. Weiter müssen wir festlegen, was die Schleife durchlaufen soll. In unserem Falle Menu(1), das heisst die oberste Menu-Ebene, die wir im Backend erstellt haben.

*In Silverstripe 3, ist dies eine der wenigen Anpassungen die wir an einem älteren Silverstripe-Template vornehmen müssen, um es auch in der neusten version lauffähig zu machen. Anstelle von <% control Menu(1) %> wird neu <% loop Menu(1) %> verwendet.

10. Füge <% loop Menu(1) %> über dem Listenelement ein
11. Füge <% end_loop %> unter dem Listenelement ein

...
<ul>
 <% loop Menu(1) %>
   <li><a href="$Link">$MenuTitle</a></li>
 <% end_loop %>
</ul>
...

Den Platzhalter für den Seitentitel einfügen

Der im Backend eingegebene Seitentitel kann mit $Title in der Seite angezeigt werden.

12. Füge den Platzhalter $Titel innerhalb eines h1-Elements ein

...
<article>
<h1>$Title</h1>

</article>
...

Den Inhalt durch den Platzhalter ersetzen

Nun kannst du den HTML-codierten Inhalt löschen und durch den Platzhalter $Content ersetzen, um für jede Seite den im Backend-Editor erzeugten HTML-Block in die Seite zu laden.

12. Ersetze alles im article-Element durch den Platzhalter $Content

...
<article>
<h1>$Title</h1>
$Content
</article>
...

Ein Platzhalter für das Login-Formular

Einen Schritt müssen wir noch ausführen, um unser Template zu vollenden. Wenn wir keine Anzeige der Formulare in unserem Template einbauen, können wir damit nicht ins Backend einloggen, um Seiten zu erstellen oder zu editieren. Der Platzhalter $Form bringt uns den Formularblock zur Anzeige.

13. Füge den Platzhalter $Form unter dem Inhalt hinzu
14. Speichere die Datei Page.ss

...
<article>
<h1>$Title</h1>
$Content
$Form
</article>
...

Weiter mit dem Vergleich der Dateien vorher und nachher