Silverstripe - America Design » 5 - Template für den Header

5 - Template für den Header

Nun werden die vom Page-Controller gelieferten Angaben ins Template eingebunden und zur Anzeige gebracht. Wir wenden uns wieder unserem Theme 'meintemplate' zu. Um übersichtlicher arbeiten zu können, erstellen wir für Header und Footer je eine eigene Datei die wir mit 'include' einbinden.

Include-Dateien erstellen

Erstellen der neuen Dateien für die Anzeige von Header und Footer im Ordner 'Includes'.

1. Erstelle je eine neue Datei:
    themes/meintemplate/Includes/Header.ss
    themes/meintemplate/Includes/Footer.ss
2. Bearbeite die Datei: themes/meintemplate/Layout/Page.ss
    Füge die Include-Regeln an die gewünschte Position ein:
    <% include Header %>
    <% include Footer %>
3. Verschiebe den HTML-Code für den Footer nach 'Include/Footer.ss'
4. Speichere/Publiziere die Dateien und prüfe sie im Browser

Datei: themes/meintemplate/Layout/page.ss (Neu: rot, Verschieben: pink)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>$Title</title>
    <% base_tag %>
    <% require themedCSS('typography') %>
    <% require themedCSS('form') %>
    <% require themedCSS('layout') %>
</head>
<body>
<header><% include Header %></header>
<nav>
    <ul>
     <% loop Menu(1) %>
       <li><a href="$Link">$MenuTitle</a></li>
     <% end_loop %>
    </ul>
</nav>
<article>
    $Layout
</article>
<footer><% include Footer %>
  <p>Adresse in der Fusszeile</p>
  <a href="javascript:window.print()">
      <img src="$ThemeDir/images/printer.png">
  </a>
</footer>
</body>
</html>

Dadurch hat sich gerade mal nichts verändert was die Anzeige betrifft. Wir haben aber sichergestellt, dass unser Template noch korrekt funktioniert und die Dateien zur weiteren Bearbeitung bereit sind.

Header.ss ausbauen

Der Aufruf der Methode aus dem Page-Controller, wird mit 'loop' ausgelesen:

<% loop $HeaderContent %>
    ...
<% end_loop %>

Darin werden Bildinformationen mit $Photo und den Editor-Inhalt mit $Content geladen:

<% loop $HeaderContent %>
    ...
    $Photo.SetWidth(...)
    ...
    $Content
    ...
<% end_loop %>

Zusammen mit dem erforderlichen HTML-Code um mit den CSS-Stilen den Header richtig gestalten zu können, sieht der Code folgendermassen aus. Zusätzlich wurde der Anzeige des Header-Bildes eine feste Grösse mitgegeben. Dies verhindert unbrauchbare Bildgrössen. Damit die Anzeige auch mit Responsiv-Design klappt, müssen Bildgrösse und CSS-Angaben übereinstimmen.

5. Ergänze die Datei Header.ss mit untenstehendem Code-Schnippsel
6. Speichere/Publiziere die Datei und rufe deine Site auf mit ?flush=1Datei: theme/meintemplate/templates/Includes/Header.ss

<% loop $HeaderContent %>
    <div class="HeaderImage">
        $Photo.SetWidth(600)
    </div>
    <div class="HeaderContent">
        $Content
    </div>
<% end_loop %>

Die CSS-Stile dazufügen

Etwas CSS brauchen wir für eine brauchbare Anzeige. In der Datei layout.css kannst du folgendes Code-Schnippsel einfügen:

header {
    width:100%;
}
.header .HeaderImage {position:relative;}
.header img {width:100%;height:auto;}
.HeaderContent {
    position: absolute;
    top: 0;
    margin:80px 0 0 200px;
    color:#ccc;
 }

Dem weiteren Ausbau des Templates nach eigenen Wünsche steht nun nichts mehr im Weg.

Weiter mit der Anzeige für den Footer