Einführung in Templates
Ein Template ist eine Textdatei, die die Struktur oder das Layout einer Ausgabedatei festlegt. Platzhalter kennzeichnen, wo beim Rendern des Templates Daten eingefügt werden (in Express werden Templates als Views bezeichnet).
Template-Optionen in Express
Express kann mit vielen verschiedenen Template-Engines verwendet werden. In diesem Tutorial verwenden wir Pug (früher Jade) für unsere Templates. Pug ist die beliebteste Template-Sprache für Node und beschreibt sich selbst als eine „übersichtliche, whitespace-sensitive Syntax zum Schreiben von HTML, die stark von Haml beeinflusst ist“.
Template-Sprachen verwenden unterschiedliche Ansätze, um Layouts zu definieren und Platzhalter für Daten zu kennzeichnen: Einige verwenden HTML für das Layout, andere nutzen Markup-Formate, die sich in HTML umwandeln lassen. Pug gehört zur zweiten Gruppe. Es verwendet eine Darstellung von HTML, bei der das erste Wort einer Zeile normalerweise ein HTML-Element bezeichnet. Einrückungen in den folgenden Zeilen zeigen die Verschachtelung an. Das Ergebnis ist eine Seitendefinition, die sich direkt in HTML übersetzen lässt, dabei aber kompakter und möglicherweise leichter zu lesen ist.
Hinweis: Ein Nachteil von Pug ist, dass es empfindlich auf Einrückungen und Leerzeichen reagiert (ein zusätzliches Leerzeichen an der falschen Stelle kann zu einer wenig hilfreichen Fehlermeldung führen). Sobald Ihre Templates stehen, lassen sie sich jedoch sehr einfach lesen und pflegen.
Template-Konfiguration
Die LocalLibrary wurde für die Verwendung von Pug konfiguriert, als wir die Grundstruktur der Website erstellt haben. Das pug-Modul sollte in der Datei package.json der Website als Abhängigkeit aufgeführt sein. In der Datei app.js sollten außerdem die folgenden Konfigurationseinstellungen stehen. Sie legen fest, dass wir pug als View-Engine verwenden und Express im Unterverzeichnis views/ nach Templates suchen soll.
// View engine setup
app.set("views", path.join(import.meta.dirname, "views"));
app.set("view engine", "pug");
Im Verzeichnis views finden Sie die .pug-Dateien für die Standard-Views des Projekts. Dazu gehören die View für die Startseite (index.pug) und das Basis-Template (layout.pug), deren Inhalt wir durch unseren eigenen ersetzen werden.
express-locallibrary-tutorial ├── views │ ├── error.pug │ ├── index.pug │ └── layout.pug ...
Template-Syntax
Die folgende Beispiel-Template-Datei zeigt viele der nützlichsten Funktionen von Pug.
Zunächst fällt auf, dass die Datei die Struktur einer typischen HTML-Datei abbildet: Das erste Wort in (fast) jeder Zeile ist ein HTML-Element, und Einrückungen kennzeichnen verschachtelte Elemente. So befindet sich beispielsweise das body-Element innerhalb eines html-Elements und Absatz-Elemente (p) befinden sich innerhalb des body-Elements. Nicht ineinander verschachtelte Elemente (z. B. einzelne Absätze) stehen in separaten Zeilen.
doctype html
html(lang="en")
head
title= title
script(type='text/javascript').
body
h1= title
p This is a line with #[em some emphasis] and #[strong strong text] markup.
p This line has un-escaped data: !{'<em> is emphasized</em>'} and escaped data: #{'<em> is not emphasized</em>'}.
| This line follows on.
p= 'Evaluated and <em>escaped expression</em>:' + title
<!-- You can add HTML comments directly -->
// You can add single line JavaScript comments and they are generated to HTML comments
//- Introducing a single line JavaScript comment with "//-" ensures the comment isn't rendered to HTML
p A line with a link
a(href='/catalog/authors') Some link text
| and some extra text.
#container.col
if title
p A variable named "title" exists.
else
p A variable named "title" does not exist.
p.
Pug is a terse and simple template language with a
strong focus on performance and powerful features.
h2 Generate a list
ul
each val in [1, 2, 3, 4, 5]
li= val
Elementattribute werden in Klammern nach dem zugehörigen Element definiert. Innerhalb der Klammern werden die Attribute als durch Kommas oder Leerzeichen getrennte Paare aus Attributnamen und Attributwerten angegeben, zum Beispiel:
script(type='text/javascript'),link(rel='stylesheet', href='/stylesheets/style.css')meta(name='viewport' content='width=device-width')
Die Werte aller Attribute werden escaped (beispielsweise werden Zeichen wie > in ihre HTML-Code-Entsprechungen wie > umgewandelt), um JavaScript-Injection oder Cross-Site-Scripting-Angriffe zu verhindern.
Wenn auf ein Tag ein Gleichheitszeichen folgt, wird der anschließende Text als JavaScript-Ausdruck behandelt. In der ersten Zeile unten ist der Inhalt des h1-Tags beispielsweise die Variable title (die entweder in der Datei definiert oder von Express an das Template übergeben wird). In der zweiten Zeile besteht der Absatzinhalt aus einer Zeichenfolge, die mit der Variable title verknüpft wird. In beiden Fällen wird die Zeile standardmäßig escaped.
h1= title
p= 'Evaluated and <em>escaped expression</em>:' + title
Hinweis:
Eine Variable, die in einem Pug-Template verwendet, aber nicht von Ihrem Express-Code übergeben (oder lokal definiert) wurde, ist „undefined“.
Wenn Sie dieses Template verwenden, ohne eine title-Variable zu übergeben, werden die Tags erstellt, enthalten aber eine leere Zeichenfolge.
Wenn Sie undefinierte Variablen in bedingten Anweisungen verwenden, werden sie als false ausgewertet.
Andere Template-Sprachen verlangen möglicherweise, dass im Template verwendete Variablen definiert sein müssen.
Wenn nach dem Tag kein Gleichheitszeichen steht, wird der Inhalt als Klartext behandelt. In Klartext können Sie mit der Syntax #{} beziehungsweise !{} escaped und nicht escaped Daten einfügen, wie unten gezeigt. Sie können auch direktes HTML in den Klartext einfügen.
p This is a line with #[em some emphasis] and #[strong strong text] markup.
p This line has an un-escaped string: !{'<em> is emphasized</em>'}, an escaped string: #{'<em> is not emphasized</em>'}, and escaped variables: #{title}.
Hinweis:
Daten von Benutzern sollten Sie fast immer escapen (mit der Syntax #{}). Vertrauenswürdige Daten (z. B. berechnete Anzahlen von Datensätzen) können angezeigt werden, ohne die Werte zu escapen.
Mit dem Pipe-Zeichen ('|') am Anfang einer Zeile können Sie „Klartext“ kennzeichnen. Der unten gezeigte zusätzliche Text wird beispielsweise in derselben Zeile wie der vorangehende Link angezeigt, gehört aber nicht zum Link.
a(href='http://someurl/') Link text
| Plain text
In Pug können Sie bedingte Anweisungen mit if, else, else if und unless verwenden – zum Beispiel:
if title
p A variable named "title" exists
else
p A variable named "title" does not exist
Sie können auch Schleifen beziehungsweise Iterationen mit der Syntax each-in oder while ausführen. Im folgenden Codeausschnitt durchlaufen wir ein Array, um eine Liste von Variablen anzuzeigen (beachten Sie die Verwendung von 'li=', um „val“ als Variable auszuwerten). Der Wert, über den iteriert wird, kann dem Template ebenfalls als Variable übergeben werden!
ul
each val in [1, 2, 3, 4, 5]
li= val
Die Syntax unterstützt außerdem Kommentare (die Sie nach Wunsch in der Ausgabe rendern lassen können oder nicht), Mixins zum Erstellen wiederverwendbarer Codeblöcke, case-Anweisungen und viele weitere Funktionen. Weitere Informationen finden Sie in der Pug-Dokumentation.
Templates erweitern
Üblicherweise haben alle Seiten einer Website eine gemeinsame Struktur, einschließlich des standardmäßigen HTML-Markups für den head, den Footer, die Navigation usw. Statt Entwickler dazu zu zwingen, diesen wiederkehrenden Code auf jeder Seite zu duplizieren, können Sie in Pug ein Basis-Template definieren und es anschließend erweitern. Dabei ersetzen Sie nur die Teile, die sich auf der jeweiligen Seite unterscheiden.
Das Basis-Template layout.pug, das in unserem Grundgerüstprojekt erstellt wurde, sieht beispielsweise so aus:
doctype html
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
body
block content
Mit dem block-Tag werden Inhaltsbereiche gekennzeichnet, die in einem abgeleiteten Template ersetzt werden können (wenn der Block nicht neu definiert wird, bleibt seine Implementierung aus dem Basis-Template erhalten).
Die standardmäßige index.pug (die für unser Grundgerüstprojekt erstellt wurde) zeigt, wie wir das Basis-Template überschreiben. Das extends-Tag gibt das zu verwendende Basis-Template an. Anschließend kennzeichnen wir mit block section_name den neuen Inhalt des Bereichs, den wir überschreiben möchten.
extends layout
block content
h1= title
p Welcome to #{title}