Heim >Web-Frontend >CSS-Tutorial >PUG HTML Template Engine: Ein Anfänger
PUG HTML Template Engine: Ein Anfänger
- Lisa KudrowOriginal
- 2025-02-10 11:27:09995Durchsuche
Als Webdesigner oder Entwickler müssen wir wahrscheinlich alle unseren angemessenen Anteil an HTML schreiben. Und obwohl dies nicht die schwierigste Aufgabe ist, kann es sich oft ein wenig langweilig oder wiederholt anfühlen. Hier kommt der Mops -HTML -Präprozessor ins Spiel.
html ist ebenfalls statisch, was bedeutet, dass Sie, wenn Sie dynamische Daten anzeigen möchten (z. Dies kann ein Albtraum sein, um zu debuggen und aufrechtzuerhalten. PUG ist eine Template -Engine für Knoten und für den Browser. Es kompiliert HTML und verfügt über eine vereinfachte Syntax, mit der Sie produktiver und Ihren Code lesbarer werden können. PUG erleichtert es, sowohl wiederverwendbares HTML zu schreiben als auch um Daten aus einer Datenbank oder API zu rendern.
In diesem Leitfaden werde ich demonstrieren, wie man mit Mops auf dem Laufenden kann. Wir beginnen damit, es von NPM zu installieren, seine grundlegende Syntax zu überschreiten und dann mehrere Beispiele für die Verwendung von JavaScript in PUG zu betrachten. Schließlich werden wir einige erweiterte Funktionen von Pug untersuchen, indem wir ein einfaches Knoten/Express -Projekt erstellen, das Pug als Vorlagemotor verwendet.
Key Takeaways
- Mop, zuvor als Jade bekannt, ist eine Vorlagen -Engine, die zu HTML kompiliert und zum Schreiben von saubererem, lesbarerem Code nützlich ist, insbesondere beim Umgang mit dynamischen Inhalten.
- vereinfacht die Integration dynamischer Daten in HTML und macht es zu einer guten Wahl für datengesteuerte Anwendungen, obwohl es für kleine statische Sites oder minimale dynamische Inhalte nicht erforderlich ist.
- Installation umfasst das Einrichten von Knoten, NPM und dem Pug-CLI-Paket, wobei die Syntax in Ihrem Editor zur Einfache der Entwicklung empfohlen wird.
- Mop verwendet eine vereinfachte Syntax ohne Schließungs -Tags und beruht auf Einrückung, um HTML -Dokumente zu strukturieren, was die Menge des schriftlichen Code erheblich verringern kann.
- Es unterstützt die JavaScript -Integration für dynamische Vorlagen und ermöglicht Variablen, Iterationen und Bedingungen direkt in den PUG -Dateien.
- Das Tutorial endet mit einer praktischen Demonstration mit PUG in einem Knoten/Express -Projekt, um ein Personalverzeichnis zu erstellen, in dem erweiterte Funktionen wie Vorlagenvererbung und Mischung für wiederverwendbaren Code vorgestellt werden.
Wofür wird Mops verwendet?
Bevor wir Mops ansehen, nehmen wir uns eine Sekunde Zeit, um die beteiligten Konzepte zu verstehen.
Eine Vorlagen -Engine ist ein Programm, das für die Kompilierung einer Vorlage (die mit einer von einer Reihe von Sprachen geschrieben werden kann) in HTML verantwortlich ist. Die Template -Engine empfängt normalerweise Daten von einer externen Quelle, die sie in die kompilierende Vorlage injiziert. Dies wird durch das folgende Diagramm veranschaulicht.
Kredit: Dreftymac, Tempengweb016, CC BY-SA 3.0
Mit diesem Ansatz können Sie statische Webseitenelemente wiederverwenden und gleichzeitig dynamische Elemente basierend auf Ihren Daten definieren. Es erleichtert auch eine Trennung von Bedenken und hält Ihre Anwendungslogik von Ihrer Anzeigelogik isoliert.
Sie profitieren eher von einer Vorlagen -Engine, wenn Ihre Website oder Webanwendung datengesteuert ist - z. Suchfunktionalität.
Sie benötigen keine Template -Engine, wenn Sie eine kleine Datenmenge von einer API abrufen (in diesem Fall können Sie nur die nativen Vorlagen -Zeichenfolgen von JavaScript verwenden) oder wenn Sie eine kleine statische Site erstellen.
Ein kleiner Geschichte
Es ist auch erwähnenswert, dass Pug früher als Jade bezeichnet wurde, bis es gezwungen war, seinen Namen aufgrund einer Markenklage im Jahr 2015 zu ändern. Die Namensänderung wurde mit Version 2.0 wirksam.
Es gibt immer noch viele jade-bezogene Materialien online. Und obwohl einige davon wahrscheinlich immer noch recht gültig sind, bedeutet die Tatsache, dass die Namensänderung mit einer Hauptversions -Beule zusammenfiel, dass die Syntax von Pug im Vergleich zu seinem Vorgänger mehrere Unterschiede, Abschreibungen und Umzüge aufweist. Diese werden hier dokumentiert.
Wenn Sie mehr herausfinden möchten, können Sie die Ankündigung der ursprünglichen Namensänderung in diesem GitHub -Problem lesen. Achten Sie darauf, dass Sie Ihren Mops-bezogenen Google-Suche das Wort „Vorlage“ hinzufügen, um zu vermeiden, dass die Ergebnisse voller Hündchen sind.
Mops
installierenBevor wir etwas Mops schreiben können, müssen wir Knoten, NPM (das mit Knoten gebündelt wird) und das Pug-Cli-Paket installieren.
Es gibt einige Optionen zum Installieren von Knoten/NPM. Gehen Sie entweder zur Homepage des Projekts und laden Sie die richtigen Binärdateien für Ihr System herunter oder verwenden Sie einen Versionsmanager wie NVM. Ich würde empfehlen, einen Versionsmanager nach Möglichkeit zu verwenden, da Sie auf diese Weise verschiedene Knotenversionen installieren und nach Belieben zwischen ihnen wechseln können. Es wird auch eine Reihe potenzieller Berechtigungsfehler negieren.
Sie können unser Tutorial „Mehrfachversionen von node.js mit NVM installieren“ für eine eingehende Anleitung ansehen.
Sobald der Knoten und NPM in Ihrem System installiert sind, können Sie das Pug-Cli-Paket wie SO installieren:
<span>npm i -g pug-cli </span>
Sie können überprüfen, ob der Installationsprozess korrekt ausgeführt wurde, indem sie PUG -Verssion in ein Terminal eingeben. Dadurch wird die Version von PUG und die Version der von Ihnen installierten CLI ausgegeben.
Zum Zeitpunkt des Schreibens war dies wie folgt:
$ pug <span>--version </span>pug version: <span>2.0.3 </span>pug-cli version: <span>1.0.0-alpha6 </span>
Syntax -Hervorhebung in Ihrem Editor
Wenn Ihr Editor keine Syntax -Hervorhebung für PUG anbietet, ist es eine gute Idee, nach einer Erweiterung zu suchen, um diese Funktionalität hinzuzufügen.
Ich verwende gerade Sublime Text 3 und aus dem Feld aus dem Feld sieht eine .pug -Datei aus:
Um dies zu beheben, kann man das Sublime Mops -Paket installieren:
Syntax -Hervorhebung erleichtert es viel einfacher, mit PUG -Dateien zu arbeiten, insbesondere mit denen in jeder Länge.
Versuchen Sie Mop HTML, ohne
zu installierenWenn Sie die einfacheren Beispiele in diesem Tutorial verfolgen möchten, können Sie sie auch in verschiedenen Online -Code -Spielplätzen ausführen.
codePen zum Beispiel hat Mops -Unterstützung direkt in eingebacken. Erstellen Sie einfach einen neuen Stift, wählen Sie Einstellungen > html und wählen Sie Mope als Vorprozessor. Auf diese Weise können Sie Mopscode in das HTML -Bereich eingeben und sehen, dass das Ergebnis in Echtzeit angezeigt wird.
Als zusätzlicher Bonus können Sie im HTML -Bereich auf den Abwärtspfeil klicken und kompiliert HTML auswählen, um das Markup zu sehen, das Pug generiert hat.
PUG HTMLs grundlegender Syntax
Jetzt, da wir Mops installiert haben, probieren wir es aus. Erstellen Sie ein neues Verzeichnis namens Pug-Examples und ändern Sie es. Erstellen Sie dann ein weiteres Verzeichnis namens HTML und eine Datei namens Index.pug:
<span>npm i -g pug-cli </span>
Hinweis: Der Befehl touch ist linux/macOS spezifisch. Windows -Benutzer würden Echo tun.> Index.pug, um dasselbe zu erreichen.
Die Art und Weise, wie dies funktionieren wird, ist, dass wir unseren Mopscode in INDEX.PUG schreiben und die Pug-Cli diese Datei für Änderungen ansehen lassen. Wenn es irgendwelche erkennt, wird der Inhalt von index.pug und im HTML -Verzeichnis als HTML erfasst.
.Um dies auszuschalten, öffnen Sie ein Terminal im Verzeichnis von Pug-Examples und geben Sie dies ein:
$ pug <span>--version </span>pug version: <span>2.0.3 </span>pug-cli version: <span>1.0.0-alpha6 </span>
Sie sollten so etwas wie Folgendes sehen:
<span>mkdir -p pug-examples/html </span><span>cd pug-examples </span><span>touch index.pug </span>
Hinweis: Im obigen Befehl steht die Option -W für Watch, der Punkt fordert Pug an, alles im aktuellen Verzeichnis zu sehen, -o ./html fordert Pug an, seine HTML im HTML -Verzeichnis und im HTML -Verzeichnis und in der -Poption erbringt die Ausgabe.
Erstellen wir nun die Seite aus dem obigen Screenshot (der sich über den Mangel an Syntax -Hervorhebung beschwert). Geben Sie Folgendes in Index ein. PUG:
pug <span>-w . -o ./html -P </span>
speichern Sie pug.index und untersuchen Sie dann den Inhalt von ./html/index.html. Sie sollten Folgendes sehen:
watching index.pug rendered /home/jim/Desktop/pug-examples/html/index.html
Nicht schlecht, was? Die Mops -CLI hat unsere Mop -Datei übernommen und sie als reguläres HTML gemacht.
Dieses Beispiel dient dazu, einige wichtige Punkte über Mops hervorzuheben. Erstens ist es weißespace empfindlich, was bedeutet, dass PUG die Einführung verwendet, um herauszufinden, welche Tags ineinander verschachtelt sind. Zum Beispiel:
<span>doctype html </span><span>html<span><span>(lang=<span>'en'</span>)</span></span> </span> <span>head </span> <span>title Hello, World! </span> <span>body </span> <span>h1 Hello, World! </span> <span>div<span>.remark</span> </span> <span>p Pug rocks! </span>
Der obige Code erzeugt Folgendes:
<span><span><!DOCTYPE html></span> </span><span><span><span><html</span> lang<span>="en"</span>></span> </span> <span><span><span><head</span>></span> </span> <span><span><span><title</span>></span>Hello, World!<span><span></title</span>></span> </span> <span><span><span></head</span>></span> </span> <span><span><span><body</span>></span> </span> <span><span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span> </span> <span><span><span><div</span> class<span>="remark"</span>></span> </span> <span><span><span><p</span>></span>Pug rocks!!<span><span></p</span>></span> </span> <span><span><span></div</span>></span> </span> <span><span><span></body</span>></span> </span><span><span><span></html</span>></span> </span>
Nehmen Sie jetzt diesen Code:
<span>div<span>.remark</span> </span> <span>p Pug rocks!! </span>
Dies erzeugt Folgendes:
<span><span><span><div</span> class<span>="remark"</span>></span> </span> <span><span><span><p</span>></span>Pug rocks!!<span><span></p</span>></span> </span><span><span><span></div</span>></span> </span>
Es spielt keine Rolle, welches Einklingelgrad Sie verwenden (Sie können sogar Registerkarten verwenden, wenn Sie müssen). In diesem Artikel werde ich zwei Leerzeichen verwenden.
Zweitens hat PUG keine Schluss -Tags. Dies spart Ihnen offensichtlich ein paar Tastenanschläge und bietet Mops eine saubere und leicht zu lesende Syntax.
Jetzt, da wir einen grundlegenden Mops im Griff haben, gehen wir schnell über seine Syntax. Wenn etwas davon verwirrend erscheint, oder Sie möchten eingehender werden, konsultieren Sie unbedingt die hervorragende Dokumentation des Projekts.
docType
Sie können PUG verwenden, um eine Reihe von Deklarationen von Dokumenttypen zu generieren.
Zum Beispiel wird docType html zu , dem Standard html5 docType, kompilieren, während docType strikt uns . Pug wird sein Bestes tun, um sicherzustellen, dass der Ausgang für den Dokumenttyp gültig ist.
Tags
Wie bereits erwähnt, hat PUG keine Schluss -Tags und stützt sich auf die Verschachtelung. Dies kann ein wenig gewöhnungsbedürftig sein, aber sobald Sie dies tun, sorgt dies für einen sauberen und lesbaren Code. Als Beispiel:
<span>npm i -g pug-cli </span>
Der obige Code kompilt dazu:
$ pug <span>--version </span>pug version: <span>2.0.3 </span>pug-cli version: <span>1.0.0-alpha6 </span>
Beachten Sie, dass PUG intelligent genug ist, um alle selbstklingenden Tags (wie das
Klassen, IDs und Attribute
Klassen und IDs werden mit einem .classname- und #Idname -Notation ausgedrückt. Zum Beispiel:
<span>mkdir -p pug-examples/html </span><span>cd pug-examples </span><span>touch index.pug </span>
Mops bietet uns auch eine praktische Abkürzung. Wenn kein Tag angegeben ist, wird ein
pug <span>-w . -o ./html -P </span>
beide kompilieren zu:
watching index.pug rendered /home/jim/Desktop/pug-examples/html/index.html
Attribute werden mit Klammern hinzugefügt:
<span>doctype html </span><span>html<span><span>(lang=<span>'en'</span>)</span></span> </span> <span>head </span> <span>title Hello, World! </span> <span>body </span> <span>h1 Hello, World! </span> <span>div<span>.remark</span> </span> <span>p Pug rocks! </span>
Dies führt im Folgenden:
<span><span><!DOCTYPE html></span> </span><span><span><span><html</span> lang<span>="en"</span>></span> </span> <span><span><span><head</span>></span> </span> <span><span><span><title</span>></span>Hello, World!<span><span></title</span>></span> </span> <span><span><span></head</span>></span> </span> <span><span><span><body</span>></span> </span> <span><span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span> </span> <span><span><span><div</span> class<span>="remark"</span>></span> </span> <span><span><span><p</span>></span>Pug rocks!!<span><span></p</span>></span> </span> <span><span><span></div</span>></span> </span> <span><span><span></body</span>></span> </span><span><span><span></html</span>></span> </span>
Es gibt noch viel mehr über Attribute zu sagen. Beispielsweise können Sie JavaScript verwenden, um Variablen in Ihre Attribute aufzunehmen oder einem Attribut ein Wertearray zuzuweisen. Wir werden im nächsten Abschnitt JavaScript in PUG verwenden.
Klartext und Textblöcke
Mops bietet verschiedene Methoden zum Hinzufügen von einfachem Text direkt in das gerenderte HTML.
Wir haben bereits gesehen
<span>div<span>.remark</span> </span> <span>p Pug rocks!! </span>Eine andere Möglichkeit besteht darin, eine Linie mit einem Rohrcharakter (|) zu präfixen:
<span><span><span><div</span> class<span>="remark"</span>></span> </span> <span><span><span><p</span>></span>Pug rocks!!<span><span></p</span>></span> </span><span><span><span></div</span>></span> </span>Dies gibt uns Folgendes:
<span>div<span>.remark</span> </span><span>p Pug rocks!! </span>Wenn Sie sich mit großen Textblöcken befassen, können Sie einfach einen Punkt ansprechen. Gleich nach dem Tag -Namen oder nach der schließenden Klammung, wenn das Tag Attribute enthält:
<span><span><span><div</span> class<span>="remark"</span>></span><span><span></div</span>></span> </span><span><span><span><p</span>></span>Pug rocks!!<span><span></p</span>></span> </span>Dies führt zu:
<span>nav </span> <span>navbar-default div </span> <span>h1 My Website! </span> <span>ul </span> <span>li </span> <span>a Home </span> <span>li </span> <span>a Page 1 </span> <span>li </span> <span>a Page 2 </span> <span>input </span>Kommentare
Schließlich können Kommentare wie SO hinzugefügt werden:
<span><span><span><nav</span>></span> </span> <span><span><span><div</span>></span> </span> <span><span><span><h1</span>></span>My Website!<span><span></h1</span>></span> </span> <span><span><span></div</span>></span> </span> <span><span><span><ul</span>></span> </span> <span><span><span><li</span>></span><span><span><a</span>></span>Home<span><span></a</span>></span><span><span></li</span>></span> </span> <span><span><span><li</span>></span><span><span><a</span>></span>Page 1<span><span></a</span>></span><span><span></li</span>></span> </span> <span><span><span><li</span>></span><span><span><a</span>></span>Page 2<span><span></a</span>></span><span><span></li</span>></span> </span> <span><span><span></ul</span>></span> </span> <span><span><span><input</span>/></span> </span><span><span><span></nav</span>></span> </span>Dieser Kommentar wird dem gerenderten HTML hinzugefügt:
<span>nav<span>#navbar-default</span> </span> <span>div<span>.container-fluid</span> </span> <span>h1<span>.navbar-header</span> My Website! </span>Sie starten einen Kommentar wie SO:
<span>nav<span>#navbar-default</span> </span> <span><span>.container-fluid</span> </span> <span>h1<span>.navbar-header</span> My Website! </span>Wenn Sie dies tun, bleibt der Kommentar in der PUG -Datei, wird jedoch nicht in der HTML angezeigt.
Kommentare müssen in ihrer eigenen Zeile erscheinen. Hier wird der Kommentar als einfacher Text behandelt:
<span><span><span><nav</span> id<span>="navbar-default"</span>></span> </span> <span><span><span><div</span> class<span>="container-fluid"</span>></span> </span> <span><span><span><h1</span> class<span>="navbar-header"</span>></span>My Website!<span><span></h1</span>></span> </span> <span><span><span></div</span>></span> </span><span><span><span></nav</span>></span> </span>multiline Kommentare sind auch möglich:
<span>npm i -g pug-cli </span>
grundlegende Syntax -Demo
unten finden Sie eine Demo eines Bootstrap-Layouts, das die Techniken demonstriert, die wir bisher besprochen haben:
Siehe den Stift
grundlegende Mops -Demo von SitePoint (@sinepoint)
auf CodePen.
Verwenden von JavaScript in PUG HTML -Vorlagen
Eines der großartigen Dinge an Mops ist die Fähigkeit, JavaScript in Ihren Vorlagen auszuführen. Dies erleichtert es einfach, Variablen in unsere Vorlagen einzufügen, über Arrays und Objekte zu iterieren, html bedingt zu rendern und vieles mehr.
gepuffert gegen nicht lufferte Code
Dies ist eine wichtige Unterscheidung, die Sie vor der Verwendung von JavaScript in Mops bewusst sind.
abgelassener Code beginnt mit einem Minus (-). Es fügt der Ausgabe nichts direkt hinzu, aber seine Werte können innerhalb von Mops verwendet werden:
$ pug <span>--version </span>pug version: <span>2.0.3 </span>pug-cli version: <span>1.0.0-alpha6 </span>
gepuffertes Code dagegen beginnt mit einem gleichen (=). Es bewertet einen JavaScript -Ausdruck und gibt das Ergebnis aus.
<span>mkdir -p pug-examples/html </span><span>cd pug-examples </span><span>touch index.pug </span>
Der obige Code kompilt dazu:
pug <span>-w . -o ./html -P </span>
Aus Sicherheitsgründen ist gepufferter Code HTML entkommen.
watching index.pug rendered /home/jim/Desktop/pug-examples/html/index.html
Der obige Code kompilt dazu:
<span>doctype html </span><span>html<span><span>(lang=<span>'en'</span>)</span></span> </span> <span>head </span> <span>title Hello, World! </span> <span>body </span> <span>h1 Hello, World! </span> <span>div<span>.remark</span> </span> <span>p Pug rocks! </span>
Interpolation
String Interpolation ist der Prozess, einen oder mehrere Platzhalter in einer Vorlage durch einen entsprechenden Wert zu ersetzen. Wie wir gerade gesehen haben, bietet die gepufferte Eingabe eine Methode, dies zu tun. Ein anderer verwendet #{}. Hier bewertet PUG jeden Code zwischen den Curly -Klammern, entkommt ihm und rendert ihn in die Vorlage.
<span><span><!DOCTYPE html></span> </span><span><span><span><html</span> lang<span>="en"</span>></span> </span> <span><span><span><head</span>></span> </span> <span><span><span><title</span>></span>Hello, World!<span><span></title</span>></span> </span> <span><span><span></head</span>></span> </span> <span><span><span><body</span>></span> </span> <span><span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span> </span> <span><span><span><div</span> class<span>="remark"</span>></span> </span> <span><span><span><p</span>></span>Pug rocks!!<span><span></p</span>></span> </span> <span><span><span></div</span>></span> </span> <span><span><span></body</span>></span> </span><span><span><span></html</span>></span> </span>
Der obige Code kompilt dazu:
<span>div<span>.remark</span> </span> <span>p Pug rocks!! </span>
Da die lockigen Klammern einen gültigen JavaScript -Ausdruck enthalten können, öffnet dies eine Reihe von Möglichkeiten:
<span><span><span><div</span> class<span>="remark"</span>></span> </span> <span><span><span><p</span>></span>Pug rocks!!<span><span></p</span>></span> </span><span><span><span></div</span>></span> </span>
Dies kompiliert:
<span>div<span>.remark</span> </span><span>p Pug rocks!! </span>
Es ist auch möglich, unbezahlte Werte in Ihre Vorlagen mit! {} Zu rendern. Dies ist jedoch nicht die beste Idee, wenn der Eingang von einer nicht vertrauenswürdigen Quelle stammt.
Hinweis: Wenn Sie den in einer Variablen in einem Elementattribut gehaltenen Wert zuweisen möchten, können Sie die #{} weglassen. Zum Beispiel: IMG (Alt = Name).
Iteration
PUGs Jedes Schlüsselwort erleichtert es einfach, über Arrays zu iterieren:
<span><span><span><div</span> class<span>="remark"</span>></span><span><span></div</span>></span> </span><span><span><span><p</span>></span>Pug rocks!!<span><span></p</span>></span> </span>
Dies führt im Folgenden:
<span>nav </span> <span>navbar-default div </span> <span>h1 My Website! </span> <span>ul </span> <span>li </span> <span>a Home </span> <span>li </span> <span>a Page 1 </span> <span>li </span> <span>a Page 2 </span> <span>input </span>
Sie können es auch verwenden, um die Tasten in einem Objekt zu iterieren:
<span><span><span><nav</span>></span> </span> <span><span><span><div</span>></span> </span> <span><span><span><h1</span>></span>My Website!<span><span></h1</span>></span> </span> <span><span><span></div</span>></span> </span> <span><span><span><ul</span>></span> </span> <span><span><span><li</span>></span><span><span><a</span>></span>Home<span><span></a</span>></span><span><span></li</span>></span> </span> <span><span><span><li</span>></span><span><span><a</span>></span>Page 1<span><span></a</span>></span><span><span></li</span>></span> </span> <span><span><span><li</span>></span><span><span><a</span>></span>Page 2<span><span></a</span>></span><span><span></li</span>></span> </span> <span><span><span></ul</span>></span> </span> <span><span><span><input</span>/></span> </span><span><span><span></nav</span>></span> </span>
Dies führt zu:
<span>nav<span>#navbar-default</span> </span> <span>div<span>.container-fluid</span> </span> <span>h1<span>.navbar-header</span> My Website! </span>Mit
Mop können Sie auch einen anderen Block angeben, der ausgeführt wird, wenn das Array oder das Objekt leer ist:
<span>nav<span>#navbar-default</span> </span> <span><span>.container-fluid</span> </span> <span>h1<span>.navbar-header</span> My Website! </span>
Beachten Sie schließlich, dass Sie für jeden als Alias verwenden können.
Conditionals
Bedingungen bieten eine sehr praktische Möglichkeit, je nach Ergebnis eines JavaScript -Ausdrucks unterschiedliche HTML zu machen:
<span>npm i -g pug-cli </span>
In diesem Beispiel überprüfen wir, ob das Mitarbeiterobjekt über eine Extn -Eigenschaft verfügt, und dann entweder den Wert dieser Eigenschaft (falls vorhanden) oder den Text „n/a“ ausgeben.
JavaScript in Pug -Demo
unten finden Sie eine Demo von einigen der Techniken, die wir in diesem Abschnitt erörtert haben. Dies zeigt die Vorteile von Pug etwas mehr als die vorherige Demo, da wir nur weitere Mitarbeiter hinzufügen müssen, besteht darin, unserem SitePointoPoPo -Array weitere Objekte hinzuzufügen.
Siehe den Stift
JavaScript in Pug -Demo von SitePoint (@sinepoint)
auf CodePen.
Ein praktisches Beispiel
Jetzt, da wir eine vernünftige Vorstellung von Pugs Syntax haben und wie sie funktioniert, lassen Sie uns fertig mit einer kleinen Express.js -App erstellen, um einige fortgeschrittenere Funktionen von Pug zu demonstrieren.
Der Code für dieses Beispiel ist auf GitHub verfügbar.
Hinweis: Wenn Sie noch keinen Express verwendet haben, keine Sorgen. Es handelt sich um ein Web -Framework für node.js, das eine robuste Reihe von Funktionen für das Erstellen von Web -Apps bietet. Wenn Sie mehr herausfinden möchten, sehen Sie sich unseren Einstieg mit Express Tutorial an.
Erstellen wir zunächst ein neues Projekt und installieren Sie Express:
$ pug <span>--version </span>pug version: <span>2.0.3 </span>pug-cli version: <span>1.0.0-alpha6 </span>
Erstellen Sie als nächstes eine App.js-Datei im Ordner pug-express:
<span>mkdir -p pug-examples/html </span><span>cd pug-examples </span><span>touch index.pug </span>
Dann fügen Sie Folgendes hinzu:
pug <span>-w . -o ./html -P </span>
Hier deklarieren wir eine Route (/), die auf eine Get -Anfrage mit dem Text "Hallo, Welt!" Beantwortet wird. Wir können dies in unseren Browsern testen, indem wir den Server mit Node App.js starten und dann http: // localhost: 3000.
besuchenWenn Sie so etwas sehen, dann sind die Dinge geplant:
Hinzufügen einiger Daten
Diese Express -App macht nichts zu Spektakuläres. Wir erstellen ein einfaches Personalverzeichnis, das eine Liste von Mitarbeitern aus einer Datenbank abholt und sie in einer Tabelle anzeigt. Damit dies geschieht, benötigen wir eine Datenbank und einige Daten.
Allerdings… die Installation und Konfiguration einer Datenbank ist für dieses kleine Beispiel ein wenig heftig. Ich werde ein Paket namens JSON-Server verwenden. Auf diese Weise können wir eine db.json -Datei erstellen, die sie in eine REST -API verwandelt, gegen die wir CRUD -Operationen ausführen können.
installieren wir es:
watching index.pug rendered /home/jim/Desktop/pug-examples/html/index.html
Erstellen Sie nun die oben genannte DB.json -Datei im Projekt des Projekts:
<span>doctype html </span><span>html<span><span>(lang=<span>'en'</span>)</span></span> </span> <span>head </span> <span>title Hello, World! </span> <span>body </span> <span>h1 Hello, World! </span> <span>div<span>.remark</span> </span> <span>p Pug rocks! </span>
Schließlich brauchen wir etwas JSON, um es zu bevölkern. Wir werden den zufälligen Benutzergenerator verwenden, der eine kostenlose Open-Source-API zum Generieren zufälliger Benutzerdaten ist. Fünfundzwanzig Menschen sollten für unser Beispiel tun. Gehen Sie also zu https://randomuser.me/api/?results=25 und kopieren Sie die Ergebnisse in db.json.
Starten Sie den Server schließlich in einem zweiten Terminalfenster mit:
<span>npm i -g pug-cli </span>
Dies führt dazu, dass JSON-Server mit Port 3001 startet und unsere Datenbankdatei nach Änderungen ansieht.
Einrichten von Mops als Template Engine
Express hat eine hervorragende Unterstützung für die Verwendung von Müdel, sodass nur sehr wenig Konfiguration erforderlich ist.
Fügen wir zuerst Mops zu unserem Projekt hinzu:
$ pug <span>--version </span>pug version: <span>2.0.3 </span>pug-cli version: <span>1.0.0-alpha6 </span>
Dann müssen wir in App.js Express sagen, dass er PUG verwenden soll:
<span>mkdir -p pug-examples/html </span><span>cd pug-examples </span><span>touch index.pug </span>
Erstellen Sie als nächstes ein View -Verzeichnis und fügen Sie im Verzeichnis der Ansicht eine Index hinzu.
pug <span>-w . -o ./html -P </span>Fügen Sie dieser Datei einige Inhalte hinzu:
watching index.pug rendered /home/jim/Desktop/pug-examples/html/index.htmldann app.js wie SO:
ändern
<span>doctype html </span><span>html<span><span>(lang=<span>'en'</span>)</span></span> </span> <span>head </span> <span>title Hello, World! </span> <span>body </span> <span>h1 Hello, World! </span> <span>div<span>.remark</span> </span> <span>p Pug rocks! </span>Starten Sie schließlich den Knotenserver neu und aktualisieren Sie Ihren Browser und Sie sollten Folgendes sehen:
Erstellen des Personalverzeichnisses
Die nächste Aufgabe in der Liste besteht darin, einige Daten an die angezeigte PUG -Vorlage zu übergeben. Dazu benötigen wir eine Methode, um die Daten vom JSON-Server abzurufen. Leider wird die Fetch -API nicht im Knoten implementiert. Verwenden wir also Axios, den beliebten HTTP -Client stattdessen:
<span><span><!DOCTYPE html></span> </span><span><span><span><html</span> lang<span>="en"</span>></span> </span> <span><span><span><head</span>></span> </span> <span><span><span><title</span>></span>Hello, World!<span><span></title</span>></span> </span> <span><span><span></head</span>></span> </span> <span><span><span><body</span>></span> </span> <span><span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span> </span> <span><span><span><div</span> class<span>="remark"</span>></span> </span> <span><span><span><p</span>></span>Pug rocks!!<span><span></p</span>></span> </span> <span><span><span></div</span>></span> </span> <span><span><span></body</span>></span> </span><span><span><span></html</span>></span> </span>dann app.js wie SO:
ändern
<span>div<span>.remark</span> </span> <span>p Pug rocks!! </span>hier sind ein paar Dinge los. Wir haben unseren Route-Handler in eine asynchronisierte Funktion gemacht, damit wir darauf warten können, dass die Mitarbeiterdaten von JSON-Server zurückgegeben werden, bevor wir sie an die Vorlage abgeben.
Dann rendern wir den Index wie zuvor, aber diesmal übergeben wir ihm ein Objekt, das alle unsere Daten enthält.
Hinweis: Sie müssen den Knotenserver jedes Mal neu starten, wenn Sie eine Änderung zu App.js. Wenn dies ärgerlich wird, schauen Sie sich Nodemon an, das dies für Sie tut.
jetzt für den Mops. Ändern Sie index.pug, um wie folgt auszusehen:
<span><span><span><div</span> class<span>="remark"</span>></span> </span> <span><span><span><p</span>></span>Pug rocks!!<span><span></p</span>></span> </span><span><span><span></div</span>></span> </span>hier ist hoffentlich nichts überraschendes hier. Wir verwenden Semantic-UI-CSS für ein Styling sowie ein paar eigene Stile.
In der Tabellenbehörde iterieren wir dann über die Auswahl der Mitarbeiter, die wir von app.js übergeben und ihre Details an eine Tabelle ausgeben.
am Ende der Seite befindet sich eine Fußzeile mit unserem Urheberrecht und im laufenden Jahr.
Wenn Sie die Seite jetzt aktualisieren, sollten Sie Folgendes sehen:
Das ist schon ziemlich schön, aber um die Dinge abzurunden, werde ich demonstrieren, wie wir unsere Ansichten strukturieren können, um maximale Flexibilität zu bieten, wenn das Projekt wächst.
Beginnen wir mit dem Erstellen einer Layout.Pug -Datei im Ansichtsverzeichnis:
<span>div<span>.remark</span> </span><span>p Pug rocks!! </span>Dann fügen Sie Folgendes hinzu:
<span><span><span><div</span> class<span>="remark"</span>></span><span><span></div</span>></span> </span><span><span><span><p</span>></span>Pug rocks!!<span><span></p</span>></span> </span>Wir haben hier eine Layoutdatei erstellt, als sie von anderen PUG -Dateien in unserem Projekt erweitert werden können. Wenn Sie eine große Anzahl von PUG -Dateien haben, speichert dies eine beträchtliche Menge an Code.
so wie dies funktioniert, ist, dass wir zwei Inhaltsblöcke definiert haben (Blockinhalt und Fußzeile blockieren), die eine untergeordnete Vorlage ersetzen kann. Im Falle des Fußzeilenblocks haben wir auch einige Fallback -Inhalte definiert, die wiedergegeben werden, wenn die untergeordnete Vorlage diesen Block nicht neu definiert.
Jetzt können wir unsere Index.pug -Datei von unserem Layout erben:
<span>npm i -g pug-cli </span>
Das Ergebnis ist das gleiche wie zuvor, aber der Code hat jetzt eine bessere Struktur.
mixins
MitMixins können Sie wiederverwendbare Mopsblöcke erstellen. Wir können dies verwenden, um unsere Tabellenzeile in eine eigene Datei zu extrahieren.
Erstellen Sie einen Ordner namens Mixins im Ordner Ansicht und erstellen Sie in diesem Ordner eine Datei namens _tablerow.pug:
$ pug <span>--version </span>pug version: <span>2.0.3 </span>pug-cli version: <span>1.0.0-alpha6 </span>
Mixins werden mit dem Mixin -Schlüsselwort deklariert. Sie werden zu Funktionen zusammengestellt und können Argumente einnehmen. Fügen Sie Folgendes zu Ansichten/Mixins/_tablerow.pug:
hinzu<span>mkdir -p pug-examples/html </span><span>cd pug-examples </span><span>touch index.pug </span>
jetzt index.pug so:
pug <span>-w . -o ./html -P </span>
Wie Sie sehen, importieren wir das Mixin oben in der Datei. Wir nennen es dann, indem wir seinen Namen mit einem Plus -Symbol vorfixieren und es unserem Mitarbeiter -Objekt zum Anzeigen übergeben.
Dies ist Overkill für unsere kleine App, zeigt jedoch eine sehr nützliche Funktion von PUG, mit der wir wiederverwendbares Code schreiben können.
Schlussfolgerung
Gut gemacht, wenn Sie es so weit geschafft haben! Wir haben in diesem Tutorial viel Boden behandelt. Wir haben uns mit der Installation von PUG, seiner grundlegenden Syntax, seiner JavaScript -Unterstützung und den Konstrukten für die Iteration und das bedingte Rendering befasst. Schließlich haben wir eine voll funktionsfähige Express -App erstellt, die Daten aus einer Remotequelle zieht und sie einer Mopsvorlage füttert.
Es gibt noch viel mehr, was Mops tun kann. Ich möchte Sie ermutigen, seine hervorragenden Dokumentation zu überprüfen und sie einfach in Ihren Projekten zu verwenden. Sie können es auch mit mehreren modernen JS -Frameworks wie React oder Vue verwenden, und es wurde sogar auf mehrere andere Sprachen portiert.
Wenn Sie nach einer Herausforderung suchen, versuchen Sie, das Mitarbeiterverzeichnis zu erweitern, um die fehlende CRUD -Funktionalität hinzuzufügen. Und wenn Sie mit der Syntax festhalten, vergessen Sie nicht, dass die Hilfe immer zur Hand ist.
FAQs über Mop -HTML -Vorlagenpräprozessor
Hier sind einige häufig gestellte Fragen zu Mops.
Was ist Mop-HTML-Vorlagenpräprozessor? Es vereinfacht und verbessert den Prozess des Schreibens von HTML, indem es eine prägnantere und ausdrucksstärkere Syntax bereitstellt.
Warum PUG anstelle von HTML? Es ermöglicht eine durch Einrückung basierende Strukturierung, die häufig zu sauberer und organisierterer Code führt. PUG unterstützt auch Variablen, Mixins und umfasst die Erstellung der Vorlage effizienter.
Wofür wird HTML -Mops verwendet? PUG wird häufig in Webentwicklungsprojekten verwendet, um HTML -Vorlagen zu erstellen, die leichter zu lesen, zu schreiben und zu pflegen.
Während Pug viele Vorteile bietet, ist die Hauptbeschränkung die Lernkurve, wenn Sie an herkömmliche HTML gewöhnt sind. Darüber hinaus erfordert die Arbeit in Teams, in denen nicht jeder mit Mops vertraut ist, möglicherweise eine gewisse Anpassung.
Während PUG hauptsächlich zur Erzeugung von HTML entwickelt wurde, kann es in Verbindung mit verschiedenen Front-End-Frameworks wie React, Angular oder Vue.js. Die Verwendung von PUG mit diesen Frameworks erfordert jedoch möglicherweise zusätzliche Konfiguration und Tools.
Ja, Sie können Mopsvorlagen einfach neben regelmäßigen HTML -Dateien innerhalb desselben Projekts integrieren. Dies ist hilfreich, wenn Sie von einem Format zum anderen übergehen oder mit Entwicklern mit verschiedenen Ansätzen zusammenarbeiten.Um Pug zu verwenden, müssen Sie das Paket node.js mit dem Namen "Pug" installieren. Sie können es global oder lokal in Ihrem Projekt installieren. Nach der Installation können Sie mit der .pug -Dateierweiterung Mops -Vorlagen erstellen.
Das obige ist der detaillierte Inhalt vonPUG HTML Template Engine: Ein Anfänger. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
In Verbindung stehende Artikel
Mehr sehen- Wie kann ich mit CSS zuverlässig „Elemente in' Menüs ausblenden?
- Wussten Sie, dass Sie die Ladezeit Ihrer Website mit nur einer Codezeile optimieren können?
- Ist der Z-Index in HTML absolut oder relativ?
- Wie erreicht man die richtige Ausrichtung beim Drehen von Text in CSS?
- Warum funktioniert „Höhe: 100 %' bei untergeordneten Flexbox-Spalten in Chrome nicht?