Einführung in Pug (vormals JADE)

JADE wurde in Pug umbenannt, um einem Rechtsstreit bzgl. des Namens aus dem Weg zu gehen. Die beiden Engines sind ansonsten identisch. Künftige Entwicklungen wird es nur bei Pug geben. Die aktuelle Version ist 2.0.

Pug ist eine Template-Engine für Express, der Middlware- und Routing-Lösung für Node.js. Sie ist der Standard für Express. Wenn Sie sich also intensiv mit Node.js und Express auseinandersetzen, führt kein Weg an Pug vorbei.

Übersicht

Pug nutzt eine vereinfachte Darstellung der HTML-Seite durch simple Textbefehle. Praktischerweise entsprechen diese den Namen der HTML-Tags. Da HTML eine Hierarchie aufbaut und Pug keine schließenden Tags kennt, muss die Baumstruktur anders entstehen. Pug nutzt dazu Einrückungen im Texteditor. 2 Leerzeichen zeigen an, dass das folgende Element ein Kindelement ist.

Editor einrichten

Damit Pug funktioniert, muss der Texteditor auf eine Einrückung von 2 Zeichen eingestellt werden.

Vorbereitung

Pug setzt voraus, dass Sie mit Node.js arbeiten und die Middleware Express nutzen. Der einfachste Weg zu einer funktionierenden Umgebung geht über ein schrittweises Abarbeiten der Bausteine einer node.js-Installation.

Installationsanleitung

Sie finden eine vollständige Anleitung als begleitendes Video zum Buch auf meinem Youtube-Kanal „JoergIsAGeek“. Es zeigt die Installation folgender Komponenten:

  • Installation eines Ubuntu-Servers auf Hyper-V
  • Installation von NPM und Node.js
  • Aktivierung von Express und Pug
  • Nutzung von Git und Bower zur Einrichtung von Bootstrap
  • Aufbau eines Applikationsskeletts

Der Zeitaufwand inkl. Zeit zum Herunterladen beträgt ca. 2 Stunden.

Damit steht die Umgebung, und der Beschäftigung mit Pug steht nichts im Weg.

Installationsanleitung

Zur Installation gibt es wenig Besonderheiten. Pug benötigt Express. Falls dies mit der Videoanleitung bereits installiert wurde, kann dieser Schritt überprungen werden. Ansonsten folgen Sie der Schrittfolge hier.

Installieren Sie nun das Pug-Paket. Ich habe meine Projekte unter /home/joerg/Apps und für dieses Bändchen dann unter Pug . Legen Sie dann einen Ordner views an, in dem eine erste Testseite entstehen wird (sie befinden sich in Apps):

mkdir Pug 
cd Pug 
npm install express
npm install Pug 
npm init
npm install express --save
mkdir views

{title=“Beschreibung der Applikation“}
Abbildung

npm init erstellt die Node.js-Applikation. Dabei wird eine Paket-Datei erzeugt, deren Werte interaktiv abgefragt werden. Die erzeugte Paket-Datei muss ggf. noch manuell korrigiert werden.

Legen Sie in dem neu erstellten Applikationsverzeichnis Pug eine Datei mit dem Namen index.js an. Sie hat folgenden Inhalt:

var express = require('express');
var app = express();

app.get('/', function (req, res) {
  res.send('Hallo Express!');
});

var server = app.listen(3000, function () {});

Starten Sie nun den Node-Server:

npm start

Abbildung

Geben Sie nun im Browser auf dem Entwicklungssystem folgende URL ein: http://localhost:3000. Sie sollten dann die „Hallo Express!“-Ausgabe sehen.

Abbildung

Applikationsstruktur

Express bietet eine Reihe spannender Funktionen. Ich will hier jedoch nur auf Pug eingehen und deshalb ist das manuelle Erzeugen und nutzen einer View einfacher. Lesen Sie das Bändchen zu Express, um mehr über die Applikationsstruktur herauszufinden.

Die einfachste Nutzung besteht aus zwei Bausteinen. Zum einen die erste View, index.pug:

{title=“index.pug“}

doctype html
html(lang='en')  
  head  
    title= title  
  body!= body  
    h1 title

Zum anderen wird das „Hallo Express“-Beispiel so verändert, dass nun statt des statischen Texts die View benutzt wird:

var express = require('express');
var app = express();
app.set('view engine', 'pug');

app.get('/', function (req, res) {
  res.render('index', { 
    title: 'Hallo Jade!' 
  });
});

var server = app.listen(3000, function () {});

Zum einen wird hier Pug als Standard vereinbart, sodass keine Dateierweiterung angegeben werden muss und das passende Modul vorab geladen werden kann. Dies passiert durch:

app.set('view engine', 'pug');

Dann wird statt res.send die Funktion res.render benutzt. Der erste Parameter ist der Name der View, der ohne Pfad (standardmäßig wird im view-Ordner gesucht) und ohne Dateierweiterung (standardmäßig wird nun pug benutzt) angegeben werden kann. Der zweite Parameter ist ein Objekt, dass lokale Variablen für die View bestimmt. Jede Eigenschaft des Objekts wird als lokale Variable bereitgestellt. Im Beispiel dann der Wert title.

Pug-Views

Statt HTML schreiben Sie ab jetzt die Ansichtsseiten in Pug. Noch einmal das eben benutzte Beispiel:

doctype html
html(lang='en')  
  head  
    title= title  
  body!= body  
    h1 title

Auf jeder Zeile der View steht zuerst ein HTML-Name. Statt der Schreibweise in XML-Form (<title></title>) nimmt Pug hier eine vereinfachte Darstellung.

title= title

Der linke Teil ist das HTML-Element. Es folgt ein Gleichheitszeichen, dass die Kodierung bestimmt, also die Behandlung von HTML-spezifischen Entitäten wie < oder >. Dann folgt JavaScript. Da eine lokale Variable mit dem Namen title vereinbart wurde, wird dieser Ausdruck hier hingeschrieben.
Analog funktioniert das mit h1, dass unterhalb des body-Elements steht. Der Umgang mit body zielt darauf ab, dass Views üblicherweise auf Stammseiten (Layout- oder Master-Seiten) basieren und der eigentliche Inhalt über die Variable body (rechts im Ausdruck) zugeordnet wird. Da HTML aus einer Seite direkt übernommen werden soll, wird der Operator != benutzt, der nicht codiert.

{title=“Ausgabe durch die View“}
Abbildung

Umgang mit Teil-Seiten

Eine Pug-Seite sieht beispielsweise folgendermaßen aus:

doctype html
html(lang='en')  
  head  
    title= title  
  body!= body  
    include navigation
    h1= title

Mit dem Befehl include wird eine weitere View eingebunden, navigation.pug. Beachten Sie, dass diese ohne Anführungszeichen und Klammern angegeben wird.

Diese Navigation wird nun in einer weiteren Datei erstellt: views/navigation.pug:

div#navigation
  a(href='/') home

{title=“Ausgabe durch die View“}
Abbildung

Umgang mit Layout-Seiten

Eine Layout-Seite ist ein Master, eine Stammseite deren Inhalte von Inhaltsseiten bestimmt werden. Das entspricht der Layout-Seite in ASP.NET MVC oder der Master-Seite in ASP.NET.

Eine Layout-Seite sieht beispielsweise folgendermaßen aus:

doctype html
html(lang='en')  
  head  
    title= title  
  body!= body  
    include navigation

Dies unterscheidet sich in kaum von dem vorherigen Beispiel. Lediglich das h1-Element am Ende fehlt.

Im nächsten Schritt wird die Inhaltsseite erstellt. Sie heißt views/content.pug:

extends index

h1= title
  a(href='http://www.joergkrause.de/') Jörg <Is A Geek> Krause

Sie verweist auf die Layout-Seite. Nun wird das Startskript angepasst, denn Pug rendert zuerst die Inhaltsseite, die ihrerseits die Layout-Seite aufruft.

var express = require('express');
var app = express();
app.set('view engine', 'pug');

app.get('/', function (req, res) {
  res.render('content', { 
    title: 'Hallo Pug !' 
  });
});

var server = app.listen(3000, function () {});

Beachten Sie die res.render-Funktion, die nun content statt vorher index aufruft (Zeile 5).

Jetzt kann der node-Server gestartet werden (im Ordner wo die Datei package.json steht):

npm start

Soweit der Standardport nicht anderweitig vergeben wurde zeigt der Browser die gerenderte HTML-Seite nun an: http://127.0.0.1:3000/

Der Einstiegspunkt ist der Aufruf von res.render mit dem Argument der Inhaltsseite, content.pug. Die Engine sorgt dann für das Laden der Layout-Seite und die Verarbeitung. Der gesamte Vorgang findet also auf dem Server statt.

{title=“Ausgabe mit Layout-Seite“}
Abbildung

Dabei fällt auf, dass die Navigation verschwunden ist. Das ist das normale Verhalten. Denn nun wurde der Inhalt des body-Elements tatsächlich durch eine Inhaltseite geliefert und damit wird der statische Inhalt überschrieben. Freilich gibt es hier einige Optionen, dieses Verhalten zu verändern. Dies wird in der Sprachreferenz genau beschrieben.

Sieh können diesen Text, ergänzt um weitere Beispiele und eine vollständige Referenz in elektronischer Form bei LeanPub oder in gedruckter Form und für Ihren Kindle bei Amazon bestellen.

Einführung in Jade
Markiert in: