pug Tutoriel
Commencer avec Carlin

Remarques

Versions

Installation

Pour installer le système de rendu de modèle Pug, procédez comme suit:

1. Avoir l' environnement Node.js installé sur votre machine
2. Exécutez npm install pug --save pour installer le module pug dans votre projet en cours.

Vous pouvez maintenant utiliser pug dans votre projet via le mécanisme de require standard:

const pug = require("pug");

Si vous utilisez Express dans votre application, vous n'avez pas besoin de require("pug") . Toutefois, vous devez définir la propriété du view engine de votre application Express sur pug .

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

De plus, vous devez définir le répertoire d'affichage de votre application pour qu'Express sache où rechercher vos fichiers Pug (pour la compilation).

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

Dans votre itinéraire Express, vous pouvez ensuite rendre vos fichiers Pug en appelant la fonction res.render avec le chemin du fichier (en commençant par le répertoire défini par l’ app.set("views") ).

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

Dans ce qui précède, l' index pointe vers un fichier situé à views/index.pug , et les locals représentent un objet de variables exposées à votre fichier. Comme expliqué dans les sections suivantes, Pug peut accéder aux variables qui lui sont transmises et effectuer diverses actions (conditions, interpolation, itération, etc.).

Bonjour Monde Exemple

Tout d'abord, créons un modèle à rendre!

p Hello World, #{name}!

Enregistrez-le dans un fichier se terminant par l'extension .pug (vous pouvez l'appeler comme vous voulez, mais nous utiliserons view.pug dans le code suivant pour le compiler).

Il ne reste plus qu'à compiler ce modèle! Créez un fichier de script JS (nous appellerons ours main.js ) et ajoutez le contenu suivant:

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

Lorsque vous exécutez ce fichier avec npm main.js , vous devez obtenir le code HTML suivant dans votre console:

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

Félicitations, vous venez de créer et de compiler votre premier modèle! Sur des trucs plus avancés, tels que les conditionnels , les itérations et bien plus encore!