Templating-Einleitung
Dateien des Templates in der App
Die wichtigsten Verzeichnisse für Templating und Design sind
├── ... ├── app das Hauptverzeichnis der App │ └── index.html das Basis-HTML der App │ └── styles LESS-Styles der App │ │ └── app.less Basis-LESS-Style der App │ │ ├── ... weitere Style-Dateien │ └── template Handlebars (.hbs) Dateien der App │ │ └── application.hbs Basis .hbs-Template der App │ ... ├── theme veränderte Template-Dateien der App
Dateien im Template-Verzeichnis
Im Template-Verzeichnis sollte nicht gearbeitet oder dort Änderungen vorgenommen werden. Dazu die zu verändernden Dateien in das Theme-Verzeichnis in der identischen Ordnerstruktur kopieren, wie Sie im Template-Verzeichnis vorliegen. Bei der Kompilierung der App werden dann die original Template-Dateien durch mit den angelegten Dateien aus dem Theme-Verzeichnis überschrieben.
index.html
Die index.html ist das HTML5-Boilerplate für die Webapp.
Es enthält die wichtigsten Favicon- und Manifest-Tags und die Links für das Einbetten des Codes aus der Webapp.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="manifest" href="/site.webmanifest"> <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"> <meta name="msapplication-TileColor" content="#2b5797"> <meta name="theme-color" content="#ffffff"> {{content-for 'head'}} <link rel="stylesheet" href="{{rootURL}}assets/vendor.css"> <link rel="stylesheet" href="{{rootURL}}assets/webapp.css"> {{content-for 'head-footer'}} {{content-for 'ga-script'}} </head> <body class="fastboot"> <!--[if lte IE 9]> <div style="color: black;"> <h3 style="color: black;">Ihr Browser wird nicht unterstützt</h3> Bitte installieren Sie einen aktuellen Browser </div> <![endif]--> {{content-for 'ga-frame'}} {{content-for 'body'}} <script src="{{rootURL}}assets/vendor.js"></script> <script src="{{rootURL}}assets/webapp.js"></script> {{content-for 'piwik'}} {{content-for 'body-footer'}} </body> </html>
Änderungen in der index.html vermeiden
Änderungen in der index.html sollten vermieden werden. Alle wichtigen Elemente werden durch die WebApp dynamisch befüllt und erweitert. Dazu gehört auch z.B. der Titelaufbau (der title-Tag ist in der index.html deshalb leer). Nur falls spezielle Tracking-Elemente integriert werden sollen, spezielle Klassen oder ein anderer Doctype zwingend ausgeliefert werden soll, empfiehlt sich eine Änderung in der index.html.
Styles-Verzeichnis
Eigene Styles sollten im Stylesverzeichnis angelegt werden. Dies kann direkt im Verzeichnis oder in einem Unterordner (wenn mehrere partielle Styledateien verwendet werden) geschehen:
├── app │ └── styles │ │ └── app.less Basis-LESS-Style der App │ │ ├── mein-style.less eigene Style-Datei
Laden der Styleanweisung aus der app.less
Da die app.less automatisch in die Webapp eingebunden wird, empfiehlt es sich, die eigenen Styles aus der app.less über die @import Regel nachzuladen:
@import 'uikit'; @import 'uikit.theme.less'; @import 'fonts.less'; ... @import 'mein-style.less';
Sollten die Basisanweisungen aus UIKit oder der app.less nicht benötigt werden, können diese auskommentiert werden.
Dateien (fonts, png, jpg, svg), die über die LESS-Definitionen eingebunden werden, müssen sich im public-Verzeichnis befinden:
app (das Haupt-Applikationsverzeichnis) public (das Verzeichnis für öffentlich zugängliche Dateien) ├── assets (Verzeichnis für Dateien, die direkt verwendet werden) │ ├── img z.B. Verzeichnis für Bilder │ └── fonts z.B. Verzeichnis für Schriften │ ...
Keine CSS-Dateien in den Public-Ordner legen oder diese dort modifizieren.
In der LESS-Datei können zu verlinkende Dateien relativ, also ausgehend von der späteren Position im public-Verzeichnis angegeben werden, z.B.:
.mein-stil {background-image:url(img/example.png);}
Sowohl beim späteren Deployment, als auch während der Entwicklung werden die Änderungen in der LESS-Datei und die Dateizuweisungen zum public-Verzeichnis korrekt umgesetzt.
Styles werden im Kapitel Design näher erläutert.
Theme-Verzeichnis
Das Theme-Verzeichnis enthält alle Dateien, deren Seitenaufbau verändert wurde. Bevor Veränderungen an den Templatedateien vorgenommen werden, sollten diese in das Themeverzeichnis kopiert werden.
Es ist wichtig, dass die Ordnerstruktur und der Name der kopierten Datei im Themeverzeichnis identisch mit der Struktur im Templateverzeichnis ist:
├── template │ └── components │ │ └── detail │ │ │ └── document-files.hbs ... ├── theme │ └── components │ │ └── detail │ │ │ └── document-files.hbs
Übersicht der Templatebestandteile
Auf der ersten Ebene im im Templateverzeichnis befinden sich die Dateien, die für den spezialisierten Seitenaufbau notwendig sind:
├── template │ └── application.hbs Basisseite │ └── index.hbs Renderer für <main> │ └── head.hbs <head> Ergänzungen │ └── page.hbs Logik für Seitentypen │ └── account.hbs Basis für den Benutzeraccount ... │ └── login.hbs Login-Seite │ └── logout.hbs Logout-Seite │ └── register.hbs Registrierungs-Seite │ └── verify-email.hbs Überprüfung Registrierungs-E-Mail │ └── request-password-reset.hbs Passwort zurücksetzen │ └── password-reset.hbs Passwort zurücksetzen
sowie die Detailverzeichnisse:
├── template │ └── account Alle Account-Funktionsseiten │ └── components Alle Funktionsseiten │ └── content Alle Partials der application.hbs
Was sind Partials
Partials sind .hbs-Dateien, die innerhalb einer .hbs-Datei integriert werden können. Das vereinfacht die .hbs-Datei und sorgt für mehr Übersichtlichkeit. Besonders interessant ist die Verwendung von Partials, wenn identische Inhalte in einer Template-Datei mehrfach integriert werden sollen, aber keine besondere Funktionalität haben. Partials sind an Ihrem Dateinamen zu erkennen, er beginnt immer mit einem "-".
Innerhalb des Content-Ordners befinden sich alle Partials, die von der application.hbs aufgerufen werden. Es sollten für jede Position aus der application.hbs auch eine Position in den Templateinstellungen existieren. Wie Positionen angelegt werden erklärt die Templatekonfiguration.