pug Tutorial
Erste Schritte mit Mops

Bemerkungen

Versionen

Installation

Gehen Sie folgendermaßen vor, um das Pug-Vorlagenwiedergabesystem zu installieren:

1. Lassen Sie die Node.js-Umgebung auf Ihrem Computer installieren
2. Führen Sie npm install pug --save , um das pug Modul in Ihrem aktuellen Projekt zu installieren.

Sie können nun pug in Ihrem Projekt durch den Standard require Mechanismus:

const pug = require("pug");

Wenn Sie in Ihrer Anwendung Express verwenden, brauchen Sie require("pug") . Sie müssen jedoch die view engine Eigenschaft Ihrer Express-Anwendung auf pug .

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

Außerdem müssen Sie das Ansichtsverzeichnis Ihrer App so einstellen, dass Express weiß, wo Sie nach Ihren Pug-Dateien suchen müssen (zum Kompilieren).

app.set("views", "path/to/views");

Innerhalb Ihrer Express-Route können Sie dann Ihre Pug-Dateien rendern, indem Sie die Funktion res.render mit dem Pfad der Datei aufrufen (beginnend mit dem Verzeichnis, das mit der Option app.set("views") ).

app.get("/", function (req, res, next) {
    // Your route code
    var locals = {
        title: "Home",
    };
    res.render("index", locals);
});

In diesem Beispiel verweist index auf eine Datei, die sich unter views/index.pug , und locals stellt ein Objekt mit Variablen dar, die für Ihre Datei views/index.pug sind. Wie in späteren Abschnitten erläutert, kann Pug auf an ihn übergebene Variablen zugreifen und eine Vielzahl von Aktionen ausführen (Bedingungen, Interpolation, Iteration usw.).

Hallo Weltbeispiel

Zuerst erstellen wir eine Vorlage, die gerendert werden soll!

p Hello World, #{name}!

Speichern Sie dies in einer Datei mit der Erweiterung .pug (Sie können es beliebig nennen, aber wir verwenden view.pug im folgenden Code, um es zu kompilieren).

Jetzt müssen Sie nur noch diese Vorlage kompilieren! Erstellen Sie eine JS-Skriptdatei (wir nennen unsere main.js ), und fügen Sie den folgenden Inhalt hinzu:

// Import the pug module
const pug = require('pug');

// Compile the template (with the data not yet inserted)
const templateCompiler = pug.compileFile('view.pug');

// Insert your data into the template file
console.log(templateCompiler({ name: 'John' });

Wenn Sie diese Datei mit npm main.js , sollte der folgende HTML-Code in Ihrer Konsole ausgegeben werden:

<p>Hello World, John!</p>

Herzlichen Glückwunsch, Sie haben gerade Ihre erste Vorlage erstellt und kompiliert! Weiter zu fortgeschrittenem Material wie Conditionals , Iteration und vielem mehr!