2. Sprachreferenz
Im Folgenden finden Sie eine systematische Sprachreferenz basierend auf der Original-Dokumentation. Der Einstieg in die online verfügbaren Informationen ist Github.
2.1 Doctype
Der typische HTML 5-Doctype wird direkt folgendermaßen geschrieben:
1 doctype html
Das erzeugte HTML sieht dann folgendermaßen aus:
1 <!DOCTYPE html>
Kurzschreibweisen
Wegen der häufigen Nutzung von Doctypes gibt es ein paar Kurzschreibweisen.
1 doctype html
Das erzeugte HTML sieht dann folgendermaßen aus:
1 <!DOCTYPE html>
1 doctype xml
Das erzeugte HTML sieht dann folgendermaßen aus:
1 <?xml version="1.0" encoding="utf-8" ?>
1 doctype transitional
Das erzeugte HTML sieht dann folgendermaßen aus:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN\
2 " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
1 doctype strict
Das erzeugte HTML sieht dann folgendermaßen aus:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "htt\
2 p://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
1 doctype frameset
Das erzeugte HTML sieht dann folgendermaßen aus:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "h\
2 ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
1 doctype 1.1
Das erzeugte HTML sieht dann folgendermaßen aus:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www\
2 .w3.org/TR/xhtml11/DTD/xhtml11.dtd">
1 doctype basic
Das erzeugte HTML sieht dann folgendermaßen aus:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http\
2 ://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
1 doctype mobile
Das erzeugte HTML sieht dann folgendermaßen aus:
1 <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN"\
2 "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.d\
3 td">
Eigene Doctypes
Falls davon abweichende Doctypes notwendig sind, lässt sich folgende Syntax nutzen:
1 doctype html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
Folgendes HTML wird daraus erstellt:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN">
Optionen
Die Doctypes sind nicht nur eine Information für den Browser. Sie sollten unbedingt die Pug-Version nehmen, denn diese wirken sich auch auf den HTML-Generator aus, beispielsweise auf den Umgang mit schließenden Tags.
Hier der direkte Aufruf des Renderers mit dem Doctype ‘XHTML’:
1 var pug = require('pug');
2
3 // Übersetzen
4 var fn = pug.compile('img(src="foo.png")',
5 { doctype: 'xml' });
6
7 // Rendern
8 var html = fn({});
Folgendes HTML wird daraus erstellt:
1 <img src="foo.png"></img>
Wird dagegen HTML erzeugt, wird das Tag nicht geschlossen:
1 // Übersetzen
2 var fn = pug.compile('img(src="foo.png")',
3 { doctype: 'html' });
4
5 // Rendern
6 var html = fn({});
Folgendes HTML wird daraus erstellt:
1 <img src="foo.png">
2.2 Attribute
Attribute sehen aus wie in HTML, die Argumente sind allerdings JavaScript, sodass hier einfach dynamisch gearbeitet werden kann.
1 a(href='google.com') Google
2 a(class='button', href='google.com') Google
Übersetzt sieht das folgendermaßen aus:
1 <a href="google.com">Google</a><a href="google.com" class="bu\
2 tton">Google</a>
Alle üblichen JavaScript-Ausdrücke funktionieren problemlos. Sie werden mit - abgetrennt, damit Pug sie nicht als HTML interpretiert:
1 - var authenticated = true
2 body(class=authenticated ? 'auth' : 'anon')
Übersetzt sieht das folgendermaßen aus:
1 <body class="auth"></body>
Mehrere Attribute lassen sich zur Verbesserung der Lesbarkeit auf mehrere Zeilen aufteilen:
1 input(
2 type='checkbox'
3 name='agreement'
4 checked
5 )
Übersetzt nach HTML sieht das folgendermaßen aus:
1 <input type="checkbox" name="agreement" checked="checked"/>
Nicht codierte Attribute
Standardmäßig werden alle Attribute codiert, d.h. Sonderzeichen werden durch entsprechende Entitäten ersetzt (< durch > und > durch < usw.). Mit den Zuweisungszeichen = und != lässt sich das Verhalten steuern:
1 div(escaped="<code>")
2 div(unescaped!="<code>")
In HTML sieht das folgendermaßen aus:
1 <div escaped="<code>"></div>
2 <div unescaped="<code>"></div>
Logische-Attribute
Logische (boolean) Attribute werden in Pug als Funktionen dargestellt, die Argumente verarbeiten können, die ihrerseits true oder false ergeben. Wird kein Argument angegeben, ist der Standard true.
1 input(type='checkbox', checked)
2 input(type='checkbox', checked=true)
3 input(type='checkbox', checked=false)
4 input(type='checkbox', checked=true.toString())
Übersetzt sieht das folgendermaßen aus:
1 <input type="checkbox" checked="checked"/>
2 <input type="checkbox" checked="checked"/>
3 <input type="checkbox"/>
4 <input type="checkbox" checked="true"/>
Wenn der Doctype des Dokuments HTML ist, werden die verkürzten Attribute benutzt, wie sie alle Browser verstehen:
1 doctype html
2 input(type='checkbox', checked)
3 input(type='checkbox', checked=true)
4 input(type='checkbox', checked=false)
5 input(type='checkbox', checked=true && 'checked')
Übersetzt sieht das folgendermaßen aus:
1 <!DOCTYPE html>
2 <input type="checkbox" checked>
3 <input type="checkbox" checked>
4 <input type="checkbox">
5 <input type="checkbox" checked="checked">
Stil-Attribute
Das style-Attribut ist etwas komplexer, weil die Parameter ein Stil-Objekt darstellen. Im Gegensatz zur reinen HTML-Version, die nur als Zeichenkette gelesen werden kann, verarbeitet Pug hier in der Tat ein JSON-Objekt.
1 a(style={color: 'red', background: 'green'})
Dies sieht in HTML dann folgendermaßen aus:
1 <a style="color:red;background:green"></a>
&-Attribute
Diese spezielle Form, genannt “und-Attribute” (engl. “and attributes”) wird benutzt, um ein Objekt in Attribute zu zerlegen:
1 div#foo(data-bar="foo")&attributes({'data-foo': 'bar'})
In HTML wird dann daraus folgendes:
1 <div id="foo" data-bar="foo" data-foo="bar"></div>
Dabei muss es sich nicht um ein Objekt-Literal handeln, eine Variable die ein Objekt liefert eignet sich ebenso.
1 - var attributes = {'data-foo': 'bar'};
2 div#foo(data-bar="foo")&attributes(attributes)
Hier entsteht dasselbe HTML draus:
1 <div id="foo" data-bar="foo" data-foo="bar"></div>
2.3 Umgang mit CSS-Klassen
CSS-Klassen werden durch Attribute oder Literale beschrieben.
Das class-Attribut
Das class-Attribut kann wie jedes Attribut mit einer Zeichenkette benutzt werden. Nun kommt es häufig vor, dass mehrere Klassennamen gesetzt werden. Dafür sind auch Arrays erlaubt.
1 - var classes = ['btn', 'btn-default']
2 a(class=classes)
3 a.bing(class=classes class=['bing'])
Wie in Zeile 3 gezeigt, kann das Atribut wiederholt werden. Pug kombiniert die Einträge dann. In HTML wird dann daraus folgendes:
1 <a class="btn btn-default"></a>
2 <a class="btn btn-default bing"></a>
Wenn Klassennamen über Bedingungen gesetzt werden, muss meist eine separate Logik her. In Pug eignet sich dafür ein Objekt-Mapping:
1 - var curUrl = '/about'
2 a(class={active: curUrl === '/'} href='/') Home
3 a(class={active: curUrl === '/about'} href='/about') Über uns
Dies sieht in HTML dann folgendermaßen aus:
1 <a href="/">Home</a>
2 <a href="/about" class="active">Über uns</a>
2.4 Das Class-Literal
Noch einfacher ist die direkte Nutzung der Literale aus CSS:
1 a.button
Dies sieht in HTML dann folgendermaßen aus:
1 <a class="button"></a>
Eine Besonderheit bei den Literalen ist das <div>-Tag. Dies ist der Standard, wenn kein Element angegeben wird:
1 .content
In HTML wird dann daraus folgendes:
1 <div class="content"></div>
2.5 ID-Literal
IDs nutzen die #idname-Syntax:
1 a#main-link
Dies sieht in HTML dann folgendermaßen aus:
1 <a id="main-link"></a>
Da das div-Element sehr häufig benutzt wird, können Sie es weglassen:
1 #content
In HTML wird dann daraus folgendes:
1 <div id="content"></div>
2.6 Befehle
Befehle bringen interaktive Abschnitte in die Vorlage. Sie ähneln den Möglichkeiten von JavaScript, werden jedoch vor der Skript-Ebene verarbeitet. HTML kann direkt eingebettet werden.
Fallunterscheidung (case)
case ist eine Prozessanweisung und entspricht dem switch in JavaScript. Die case-Zweige in JavaScript werden bei Pug als when geschrieben:
1 - var friends = 10
2 case friends
3 when 0
4 p Du hast keine Freunde
5 when 1
6 p Du hast einen Freund
7 default
8 p Du hast #{friends} Freunde
In HTML wird dann daraus folgendes:
1 <p>Du hast 10 Freunde</p>
Weiterleitung zum nächsten Fall
Ebenso wie in JavaScript fällt die Anweisung zum nächsten Zweig durch, wenn keine Anweisung folgt:
1 - var friends = 0
2 case friends
3 when 0
4 when 1
5 p Du hast kaum Freunde
6 default
7 p Du hast #{friends} Freunde
In HTML wird dann daraus folgendes:
1 <p>Du hast kaum Freunde</p>
Erweiterung von Blöcken
Statt der mehrzeiligen Schreibweise können kurze Texte auf derselben Zeile platziert werden und sind dann auf diese Zeile begrenzt:
1 - var friends = 1
2 case friends
3 when 0: p Du hast keinen Freund
4 when 1: p Du hast einen Freund
5 default: p Du hast #{friends} Freunde
Das HTML sieht dann folgendermaßen aus:
1 <p>Du hast einen Freund</p>
Bedingungen (if)
Bedingungen sind ein elementarer Baustein in Pug. Gegenüber JavaScript ist die Schreibweise geringfügig vereinfacht – so können Sie die Klammern um die Bedingung weglassen.
1 - var user = { description: 'Mustertext' }
2 - var authorised = false
3 #user
4 if user.description
5 h2 Beschreibung
6 p.description= user.description
7 else if authorised
8 h2 Beschreibung
9 p.description.
10 Benutzer hat keine Beschreibung,
11 füge eine hinzu...
12 else
13 h1 Beschreibung
14 p.description Benutzer hat keine Beschreibung
Die Eingabedaten bestimmen dann, welches HTML entsteht:
1 <div id="user">
2 <h2>Beschreibung</h2>
3 <p class="description">Mustertext</p>
4 </div>
Es gibt weiterhin das Schlüsselwort unless für negierte Bedingungen:
1 unless user.isAnonymous
2 p Du bist als #{user.name} angemeldet
Dies ist vollkommen identisch zum folgenden Ausdruck:
1 if !user.isAnonymous
2 p Du bist als #{user.name} angemeldet
Iterationen
Mit each und while stehen zwei Möglichkeiten bereit, Schleifen zu bilden.
each
Die Anwendung von each ist weitgehend intuitiv:
1 ul
2 each val in [1, 2, 3, 4, 5]
3 li= val
Das HTML wird auf Basis des Arrays auf dem Server gebildet:
1 <ul>
2 <li>1</li>
3 <li>2</li>
4 <li>3</li>
5 <li>4</li>
6 <li>5</li>
7 </ul>
Mit zwei Parametern besteht Zugriff auf den Index und den Laufwert:
1 ul
2 each val, index in ['zero', 'one', 'two']
3 li= index + ': ' + val
Das HTML zeigt, dass der Index 0-basiert ist:
1 <ul>
2 <li>0: zero</li>
3 <li>1: one</li>
4 <li>2: two</li>
5 </ul>
Werden Hashes (Objekt-Maps) benutzt, so lassen sich Index und Wert noch genauer bestimmen:
1 ul
2 each val, index in {1:'one',2:'two',3:'three'}
3 li= index + ': ' + val
Das HTML zeigt, dass der Index vom Quellobjekt bestimmt ist:
1 <ul>
2 <li>1: one</li>
3 <li>2: two</li>
4 <li>3: three</li>
5 </ul>
Statt der direkten Angabe lässt sich natürlich jeder JavaScript-Ausdruck benutzen, der eine passende Struktur erzeugt oder enthält:
1 - var values = [];
2 ul
3 each val in values.length ? values : ['Keine Werte']
4 li= val
Da das Array im Beispiel leer ist, wird folgendes HTML erzeugt:
1 <ul>
2 <li>Keine Werte</li>
3 </ul>
while
Eine Schleife mit while verfügt über eine Abbruchbedingung. Die Schleife wird durchlaufen. solange der Ausdruck true ergibt.
1 - var n = 0
2 ul
3 while n < 4
4 li= n++
Das dynamisch erzeugte HTML sieht nun folgendermaßen aus:
1 <ul>
2 <li>0</li>
3 <li>1</li>
4 <li>2</li>
5 <li>3</li>
6 </ul>
2.7 JavaScript-Code
Mit Pug können JavaScript-Fragmente direkt in die Seite geschrieben werden. Diese Teile werden dann serverseitig ausgeführt. Es gibt dabei drei Arten von Code:
- Ungepufferte Codes
- Die Ergebnisse beim Verarbeiten werden sofort in die Ausgabe geschrieben.
- Gepufferte Codes
- Die Ergebnisse beim Verarbeiten werden zuerst in einen Puffer geschrieben und am Ende der Anweisung komplett gesendet.
- Gepufferte und nicht codierte Codes
- Die Ergebnisse beim Verarbeiten werden zuerst in einen Puffer geschrieben und am Ende der Anweisung komplett gesendet. Dabei erfolgt keine Codierung der Ausgabe.
Ungepufferte Codes
Ungepuffert und auch nicht codiert sieht das folgendermaßen aus:
1 - for (var x = 0; x < 3; x++)
2 li item
Im HTML entsteht aus dem letzten Beispiel folgendes:
1 <li>item</li>
2 <li>item</li>
3 <li>item</li>
Dies funktioniert auch mit Blöcken (das --Zeichen ist alleinstehend abgesetzt und der folgende Text eingerückt):
1 -
2 list = ["Uno", "Dos", "Tres",
3 "Cuatro", "Cinco", "Seis"]
4 each item in list
5 li= item
Auch diese Schleife generiert pures HTML:
1 <li>Uno</li>
2 <li>Dos</li>
3 <li>Tres</li>
4 <li>Cuatro</li>
5 <li>Cinco</li>
6 <li>Seis</li>
Gepufferte Code
Der gepufferte Teil startet mit einem =-Zeichen und gibt das Ergebnis der Berechnung in JavaScript aus. Hier die codierte Variante (beachten Sie die Einrückung auf Zeile 2):
1 p
2 = 'Dieser Code ist <kodiert>!'
Im HTML sehen Sie, wie die Sonderzeichen konvertiert wurden:
1 <p>Dieser Code ist <kodiert>!</p>
JavaScript-Ausdrücke lassen sich auch hier einsetzen:
1 p= 'Dieser Code ist' + ' <kodiert>!'
Es ergibt sich dasselbe Ergebnis wie im vorherigen Beispiel:
1 <p>Dieser Code ist <kodiert>!</p>
Gepufferte und nicht codierte Codes
Die Codierung startet wieder mit dem !=-Operator. Beachten Sie auch hier, dass dies in Bezug auf Daten aus Benutzereingaben nicht sicher ist.
1 p
2 != 'Dieser Code ist <strong>nicht</strong> kodiert!'
Das folgende HTML wird daraus erstellt:
1 <p>Dieser Code ist <strong>nicht</strong> kodiert!
2 </p>
Auch in dieser Nutzung können JavaScript-Ausdrücke eingesetzt werden:
1 p!= 'Dieser Code ist' + ' <strong>nicht</strong> kodiert!'
Das folgende HTML wird daraus erstellt:
1 <p>Dieser Code ist <strong>nicht</strong> kodiert!</p>
2.8 Kommentare
Kommentare werden wie in JavaScript geschrieben, werden dann jedoch in HTML-Kommentare konvertiert, also nicht komplett entfernt:
1 // Hier folgt etwas HTML:
2 p foo
3 p bar
Das folgende HTML wird daraus erstellt:
1 <!-- Hier folgt etwas HTML: -->
2 <p>foo</p>
3 <p>bar</p>
Wird hinter das Kommentarzeichen ein Strich gesetzt, wird der Kommentar entfernt und im HTML nicht wiederholt:
1 //- Dies ist nicht für die Öffentlichkeit
2 p foo
3 p bar
Das folgende HTML wird daraus erstellt:
1 <p>foo</p>
2 <p>bar</p>
Kommentarblöcke
Soll sich ein Kommentar über mehrere Zeilen erstrecken, so wird das Kommentarzeichen alleine auf eine Zeile gestellt:
1 body
2 //
3 So viel Text wie
4 Sie mögen
Das folgende HTML wird daraus erstellt:
1 <body>
2 <!--
3 So viel Text wie
4 Sie mögen
5 -->
6 </body>
Bedingte Kommentare
Der Internet Explorer kann Abschnitte bedingt ausführen, um abwärtskompatiblen HTML-Code zu schreiben. Pug hat dafür keine spezielle Syntax. Da jeder nicht weiter erkannte Text aber unverändert ausgegeben wird werden Zeilen, die mit dem <-Zeichen beginnen, direkt ins HTML transportiert:
1 <!--[if IE 8]>
2 <html lang="en" class="lt-ie9">
3 <![endif]-->
4 <!--[if gt IE 8]><!-->
5 <html lang="en">
6 <!--<![endif]-->
2.9 Erben von Vorlagen
Zum Erben von Vorlagen wird das Schlüsselwort extends benutzt. Damit lassen sich auch vordefinierte Bereiche der Layout-Seite gezielt überschreiben. Zuerst die Layout-Seite:
1 doctype html
2 html
3 head
4 block title
5 title Default title
6 body
7 block content
Die eigentliche Seite nutzt (erbt) nun diese Layout-Seite. Der Bereich block und darin der Bereich title wird überschrieben. Die Angaben sind freiwillig und wenn sie nicht vorhanden wären, würde der Inhalt der Layout-Seite angezeigt werden.
1 extends layout
2
3 block title
4 title Meine Artikel
5
6 block content
7 h1 Hier steht der Inhalt
Das finale HTML sieht nun folgendermaßen aus:
1 <!doctype html>
2 <html>
3 <head>
4 <title>Meine Artikel</title>
5 </head>
6 <body>
7 <h1>Hier steht der Inhalt</h1>
8 </body>
9 </html>
Details zum Vererben von Vorlagen
Das einfache Vererben von Vorlagen kann erweitert werden, indem mit block Bereiche festgelegt werden, die gezielt überschrieben werden können. Ein “Block” ist dabei Pug-Code, der ersetzt werden kann. Der Vorgang ist rekursiv.
Wenn der Platzhalter mit Inhalt bestückt ist, fungiert dieser als Standard. Betrachten Sie die folgende Layout-Seite:
1 html
2 head
3 title My Site - #{title}
4 block scripts
5 script(src='/jquery.js')
6 body
7 block content
8 block foot
9 #footer
10 p Inhalt der Fußzeile
Diese wird nun mittels extends benutzt. Die Seite index.Pug** im folgenden Beispiel überschreibt dabei die Blöcke scripts und content. Der Block foot bleibt dagegen unverändert und wird aus der Layout-Seite übernommen.
1 extends layout
2
3 block scripts
4 script(src='scripts/jquery.js')
5 script(src='scripts/data.js')
6
7 block content
8 h1= title
9 each pet in pets
10 include pet
In einem Block können weitere Blöcke definiert werden, die bei weiteren Ableitungen verschachtelter Layout-Seiten wiederum überschrieben werden. Die weitere Layout-Seite sub-layout.Pug** wird folgendermaßen definiert:
1 extends layout
2
3 block content
4 .sidebar
5 block sidebar
6 p nothing
7 .primary
8 block primary
9 p nothing
Die Seite page-b.Pug** nutzt diese abgeleitete Layout-Seite nun:
1 extends sub-layout
2
3 block content
4 .sidebar
5 block sidebar
6 p nothing
7 .primary
8 block primary
9 p nothing
Die Blöcke sidebar und primary werden hier überschrieben.
Blöcken Inhalt voran- und hintenanstellen
Neben dem blanken Ersetzen lassen sich Inhalte auch voranstellen (prepend) oder ergänzen (append). Bei der Definition ändert sich erstmal nichts:
1 html
2 head
3 block head
4 script(src='/vendor/jquery.js')
5 script(src='/vendor/bootstrap.js')
6 body
7 block content
Weitere Skripte lassen sich nun wie folgt ergänzen:
1 extends layout
2
3 block append head
4 script(src='/scripts/data.js')
Das Schlüsselwort block ist bei der Benutzung von prepend oder append optional:
1 extends layout
2
3 append head
4 script(src='/scripts/data.js')
2.10 Filter
Filter dienen dazu, innerhalb des Quelltextes andere Sprachen zu nutzen. Typische Beispiele sind Markdown und CoffeeScript.
1 :markdown
2 # Markdown
3
4 I often like including markdown documents.
5
6 script
7 :coffee-script
8 console.log 'This is coffee script'
Der Sprachblock wird mit dem :-Zeichen eingeleitet und entsprechend interpretiert. Das vorangegangene Beispiel sieht in HTML wie folgt aus:
1 <h1>Markdown</h1>
2 <p>I often like including markdown documents.</p>
3 <script>console.log('This is coffee script')</script>
2.11 Partielle Seiten
Komplexe Seiten lassen sich in Teile – partielle Seiten – zerlegen. Das Einbinden erfolgt mit dem Schlüsselwort includes und der Angabe des Dateinamens, gegebenenfalls mit dem relativen Pfad.
1 doctype html
2 html
3 include ./parts/head.*Pug*
4 body
5 h1 Meine Seite
6 p Welcome to my super lame site.
7 include ./includes/foot.*Pug*
1 head
2 title Meine Seite
3 script(src='/javascripts/jquery.js')
4 script(src='/javascripts/app.js')
1 #footer
2 p Copyright (c) foobar
Daraus entsteht folgendes HTML:
1 <!doctype html>
2 <html>
3 <head>
4 <title>My Site</title>
5 <script src='/javascripts/jquery.js'></script>
6 <script src='/javascripts/app.js'></script>
7 </head>
8 <body>
9 <h1>My Site</h1>
10 <p>Welcome to my super lame site.</p>
11 <div id="footer">
12 <p>Copyright (c) foobar</p>
13 </div>
14 </body>
15 </html>
Text einbinden
Partielle Seiten müssen nicht nur Pug sein, auch einfacher Text kann benutzt werden. Pug erkennt dies automatisch:
1 doctype html
2 html
3 head
4 style
5 include style.css
6 body
7 h1 My Site
8 p Welcome to my super lame site.
9 script
10 include script.js
1 /* style.css */
2 h1 { color: red; }
1 // script.js
2 console.log('You are awesome');
Daraus entsteht folgendes HTML:
1 <!doctype html>
2 <html>
3 <head>
4 <style>
5 /* style.css */
6 h1 { color: red; }
7 </style>
8 </head>
9 <body>
10 <h1>My Site</h1>
11 <p>Welcome to my super lame site.</p>
12 <script>
13 // script.js
14 console.log('You are awesome');
15 </script>
16 </body>
17 </html>
Kombination aus Filtern und partiellen Seiten
Bei der Kombination aus Filtern und partiellen Seiten werden Seiten eingebunden, die Inhalte in anderen Sprachen enthalten.
1 doctype html
2 html
3 head
4 title Ein Artikel
5 body
6 include:markdown article.md
Die eingeschlossene Seite wird hier als Markdown interpretiert:
1 # Überschrift in Markdown
2
3 Dieser Artikel wurde in Markdown erstellt
Daraus entsteht folgendes HTML:
1 <!doctype html>
2 <html>
3 <head>
4 <title>Ein Artikel</title>
5 </head>
6 <body>
7 <h1>Überschrift in Markdown</h1>
8 <p>Dieser Artikel wurde in Markdown erstellt.</p>
9 </body>
10 </html>
Vor allem die Kombination mit Markdown ist interessant, weil bereits vorliegende Inhalte unverändert übernommen werden können.
2.12 Interpolationen
Interpolationen ersetzen Variablen in Zeichenfolgen. Vergleichbare Techniken kennt wohl fast jede Programmiersprache. Pug kennt folgende Operatoren:
- Codierte Zeichenketten-Interpolation
- Nicht codierte Zeichenketten-Interpolation
- Tag-Interpolation
Codierte Zeichenketten-Interpolation
In der folgenden Vorlage werden einige Variablen definiert und dann in Ausdrücken eingesetzt, ohne erneut auf JavaScript-Syntax zuzugreifen:
1 - var title = "Einführung in Node.js";
2 - var author = "Joerg";
3 - var version = "<span>0.11</span>";
4
5 h1= title
6 p Zusammengestellt von #{author}
7 p #{version}
Das folgende HTML zeigt das Ergebnis der Interpolation:
1 <h1>Einführung in Node.js</h1>
2 <p>Zusammengestellt von Joerg</p>
3 <p> Für die Version: <span>0.11!</span></p>
Der Code zwischen #{ und } wird ausgewertet, codiert und als gepuffertes Ergebnis an die Ausgabe gesendet. Der Ausdruck selbst kann wiederum JavaScript sein, sodass sogar hier komplexere Ausdrücke entstehen können.
1 - var msg = "ziemlich cool";
2 p Dies ist #{msg.toUpperCase()}
Daraus entsteht in diesem Fall ziemlich cooles HTML:
1 <p>Dies ist ZIEMLICH COOL</p>
Nicht codierte Zeichenketten-Interpolation
Falls Sicherheit nicht notwendig ist oder HTML gewünscht ist, geht auch hier wieder die nicht codierte Variante:
1 - var riskyQuote = "<em>Node braucht *Pug*.</em>";
2 .quote
3 p Joerg: !{riskyQuote}
Das HTML wird unverändert ausgegeben:
1 <div class="quote">
2 <p>Joerg: <em>Node braucht *Pug*.</em></p>
3 </div>
Tag-Interpolation
Interpolationen lassen sich auch direkt in Tags einsetzen. Hierzu wird #[] benutzt.
1 p.
2 Wenn Sie sich den Quellcode auf #[a(target="_blank", href="\
3 https://github.com/*Pug*js/*Pug*/blob/master/docs/views/refer\
4 ence/interpolation.*Pug*") GitHub],
5 ansehen, finden Sie viele Stellen wo die Interpolation ben\
6 utzt wird.
Hieraus ensteht recht kompaktes HTML:
1 <p>Wenn Sie sich den Quellcode auf <a target="_blank" href="\
2 https://github.com/*Pug*js/*Pug*/blob/master/docs/views/refer\
3 ence/interpolation.*Pug*"> GitHub</a>,
4 ansehen, finden Sie viele Stellen wo die Interpolation benu\
5 tzt wird.
6 </p>
Der Renderer nutzt intern seinen Puffer zur Ablage und zum Weiterleiten, sodass dies besser ist als direkt HTML einzubinden.
2.13 Mixins (Funktionen)
Mixins erzeugen wiederverwendbare Blöcke aus Pug-Code. Damit lassen sich endlose Wiederholungen gleicher HTML-Bausteine vermeiden. Besonders im Zusammenhang mit Bootstrap lassen sich so komplexere Konstrukte vorbereiten und dann jederzeit einsetzen.
Ein Mixin (lies: Funktion) wird folgendermaßen deklariert:
1 mixin list
2 ul
3 li foo
4 li bar
5 li baz
Die Benutzung basiert auf einem speziellen Operator:
1 +list
2 +list
Die Benutzung wird mit dem +-Zeichen eingeleitet. Im HTML ist davon nichts mehr zu finden:
1 <ul>
2 <li>foo</li>
3 <li>bar</li>
4 <li>baz</li>
5 </ul>
6 <ul>
7 <li>foo</li>
8 <li>bar</li>
9 <li>baz</li>
10 </ul>
Mixins sind JavaScript-Funktionen und können wie diese mit Parametern versehen werden:
1 mixin pet(name)
2 li.pet= name
3 ul
4 +pet('Katze')
5 +pet('Hund')
6 +pet('Vogel')
Folgendes HTML entsteht daraus:
1 <ul>
2 <li class="pet">Katze</li>
3 <li class="pet">Hund</li>
4 <li class="pet">Vogel</li>
5 </ul>
Mixin-Blöcke
Mixins können eine Block mit Pug-Code aufnehmen und gewinnen damit weiter an Dynamik:
1 mixin article(title)
2 .article
3 .article-wrapper
4 h1= title
5 if block
6 block
7 else
8 p Keine Inhalte
9
10 +article('Hallo *Pug*')
11
12 +article('Hallo *Pug*')
13 p Dies ist ein
14 p Artikel zu Node.js
Folgendes HTML entsteht daraus:
1 <div class="article">
2 <div class="article-wrapper">
3 <h1>Hallo *Pug*</h1>
4 <p>Keine Inhalte</p>
5 </div>
6 </div>
7 <div class="article">
8 <div class="article-wrapper">
9 <h1>Hallo *Pug*</h1>
10 <p>Dies ist ein</p>
11 <p>Artikel zu Node.js</p>
12 </div>
13 </div>
Mixin-Attribute
Ähnlich wie bei JavaScript-Funktionen können Mixins Parameter über ein implizites attributes-Objekt aufnehmen:
1 mixin link(href, name)
2 //- attributes == {class: "btn"}
3 a(class!=attributes.class, href=href)= name
4
5 +link('/foo', 'foo')(class="btn")
Folgendes HTML entsteht daraus:
1 <a href="/foo" class="btn">foo</a>
1 mixin link(href, name)
2 a(href=href)&attributes(attributes)= name
3
4 +link('/foo', 'foo')(class="btn")
Folgendes HTML entsteht daraus:
1 <a href="/foo" class="btn">foo</a>
Weitere Argumente
Ist die Anzahl der Argumente nur teilweise variabel, lässt sich eine Definition der Art “der ganze Rest” aufbauen:
1 mixin list(id, ...items)
2 ul(id=id)
3 each item in items
4 li= item
5
6 +list('my-list', 1, 2, 3, 4)
Folgendes HTML entsteht daraus:
1 <ul id="my-list">
2 <li>1</li>
3 <li>2</li>
4 <li>3</li>
5 <li>4</li>
6 </ul>
2.14 Umgang mit Text
Einfacher Text wird nicht interpretiert und unverändert ausgegeben, auch wenn darin Steuerzeichen enthalten sind.
Text verbinden
Der |-Operator (“pipe”) setzt vorhergehende Zeilen mit Text einfach fort.
1 | Einfacher Text kann <strong>html</strong> enthalten
2 p
3 | Er muss immer alleine auf einer Zeile stehen
Der Text kommt unverändert in der HTML-Seite an:
1 Einfacher Text kann <strong>html</strong> enthalten
2 <p>Er muss immer alleine auf einer Zeile stehen</p>
Inline im Tag
Tags in Tags sind in HTML an der Tagesordnung. Denn in fast jedem Blockelement sind diverse Inline-Elemente zu finden (<span> im <div>). Text nach einem Element wird unverändert übernommen und kann HTML enthalten. Das ist oftmals einfacher, als die komplette Hierarchie zu definieren:
1 p Einfacher Text kann <strong>HTML</strong> haben
Das HTML kommt unverändert in der Seite an:
1 <p>Einfacher Text kann <strong>HTML</strong> haben</p>
Block im Tag
Oft werden große Blöcke mit Text benötigt. Skripte oder längere Stil-Definitionen sind gute Beispiele dafür. Hier wird selten Interaktivität verlangt. Um solch einen Block einzuleiten, wird dem Element-Befehl ein Punkt . nachgestellt:
1 script.
2 if (using*Pug*)
3 console.log('you are awesome')
4 else
5 console.log('use *Pug*')
Der Inhalt kommt unverändert in der Seite an:
1 <script>
2 if (using*Pug*)
3 console.log('you are awesome')
4 else
5 console.log('use *Pug*')
6 </script>
Umgang mit Tags
Tags werden lediglich durch Ihren Namen beschrieben, ohne die Markup-Klammern. Die Hierarchie wird durch die Einrückung (zwei Leerzeichen) festgelegt.
1 ul
2 li Item A
3 li Item B
4 li Item C
Aus diesem Beispiel entsteht gültiges HTML:
1 <ul>
2 <li>Item A</li>
3 <li>Item B</li>
4 <li>Item C</li>
5 </ul>
Wenn der Doctype dies verlangt werden selbstschließende Elemente automatisch erzeugt. Für das Element img sieht das folgendermaßen aus:
1 img
Hier entsteht gültiges HTML mit schließendem Tag:
1 <img/>
Erweiterungen von Blöcken
Verschachtelte Blöcke lassen, solange keine Inhalte folgen, auch in einer Zeile definieren. Dies erfolgt durch den :-Operator. Dies spart Platz bei häufigen typischen Kombinationen, beispielsweise mit Hyperlinks:
1 a: img
Aus diesem Beispiel entsteht gültiges HTML wie folgt:
1 <a><img/></a>
Selbstschließende Tags
Einige Tags, wie img, meta und link enthalten nie Inhalt. Sie sind deshalb selbstschließend, ausgenommen mit dem XML-Doctype. Solle dies unabhängig vom Doctype angezeigt werden, kann dies mit einem abschließenden /-Zeichen erfolgen.
1 meta/
2 link(rel='stylesheet')/
Aus diesem Beispiel entsteht folgendes HTML:
1 <meta/>
2 <link rel="stylesheet"/>