pug Tutorial
Inizia con pug

Osservazioni

Versioni

Installazione

Per installare il sistema di rendering del modello Pug, attenersi alla seguente procedura:

1. Avere l' ambiente Node.js installato sul tuo computer
2. Esegui npm install pug --save per installare il modulo pug sul tuo attuale progetto.

Ora puoi usare pug nel tuo progetto attraverso il meccanismo standard require :

const pug = require("pug");

Se si utilizza Express nella propria applicazione, non è necessario require("pug") . Tuttavia, è necessario impostare la proprietà del view engine della propria applicazione Express su pug .

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

Inoltre, devi impostare la directory di visualizzazione della tua app in modo che Express sappia dove cercare i tuoi file Pug (per la compilazione).

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

All'interno della tua rotta Express, puoi quindi eseguire il rendering dei tuoi file Pug chiamando la funzione res.render con il percorso del file (a partire dalla directory impostata app.set("views") ).

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

In quanto sopra, l' index punta a un file situato in views/index.pug e le locals rappresentano un oggetto di variabili che sono esposte al tuo file. Come verrà spiegato nelle sezioni successive, Pug può accedere alle variabili passate ad esso ed eseguire una varietà di azioni (condizionali, interpolazione, iterazione e altro).

Ciao esempio del mondo

Per prima cosa, creiamo un modello da rendere!

p Hello World, #{name}!

Salvalo in un file che termina con l'estensione .pug (puoi chiamarlo come vuoi, ma useremo view.pug nel seguente codice per compilarlo).

Tutto quello che resta da fare, ora, è compilare quel modello! Crea un file di script JS (chiameremo il nostro main.js ) e aggiungi il seguente contenuto:

// 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' });

Quando esegui questo file con npm main.js , dovresti ottenere il seguente output di codice HTML nella tua console:

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

Congratulazioni, hai appena creato e compilato il tuo primo modello! Passiamo a cose più avanzate, come Conditionals , Iteration e molto altro!