Lupe Suche
Responsiv Devices

7 - Datei: Page.ss

Der HTML-Coder zur Seitenanzeige befindet sich in der Datei:
'themes/templates/Page.ss'

<!DOCTYPE html>
<html>

<head>
    <% base_tag %>
    <title>Silverstripe - Theme - Tutorial</title>
    <meta charset="utf-8">
    <meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    $MetaTags(false)
    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <% require themedCSS('typography') %>
    <% require themedCSS('form') %>
    <% require themedCSS('layout') %>
    <link rel="shortcut icon" href="$ThemeDir/images/favicon.ico" />
</head>

<body class="$ClassName<% if not $Menu(2) %> no-sidebar<% end_if %>"
<% if $i18nScriptDirection %>dir="$i18nScriptDirection"<% end_if %>>
<header>Silverstripe - Tutorial - Header</header>
<section>
    <div class="inner typography line">
        $Content
        $Form
    </div>
</section>
<footer>Silverstripe - Tutorial - Footer</footer>

<script type="text/javascript" src="{$ThemeDir}/javascript/script.js"></script>
<% require javascript('framework/thirdparty/jquery/jquery.js') %>


</body>
</html>

Mit dieser Datei werden wir im folgenden unser Template erstellen. Drei PHP-Platzhalter sind bereits vorbereitet. Mit '$Content' wird der Datenbankinhalt der jeweiligen Seite geladen, '$Form' ist für Formulare, Login und dynamische Inhalte vorbereitet. Der Platzhalter '<% base_tag %>' im head-Tag bringt die Meta-Tags und Headerinformationen ins Template.

Für unsere Styles sind bereits CSS-Dateien verknüpft, die im Ordner 'css' bereitliegen.
Die Datei 'layout.css' ist für die Positionen und Div-Rahmen gedacht.
Die Datei 'typography.css' soll alle typografischen CSS-Stile enthalten.
Die Datei 'form.css' ist für die verschiedenen CSS-Stile der Formularfelder gedacht.
Die Datei 'editor.css' für Styles, Formate und Klassen die im Editor angezeigt werden.
Die Datei 'search.css' ist für die Anzeige der Suchmaske und des Suchresultats.

1. Öffne die Datei Page.ss in einem Editor (Dreamweaver, Notepad, ...)
    Pfad: themes/tutorial/templates/Page.ss
3. Stelle sicher, dass du den Quellcode bearbeiten und speichern kannst.

Weiter, einen Seitentitel einsetzen