Commencer avec le carlin

Hello World Exemple

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

p Hello World, #{name}!

Enregistrez ceci 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 le nôtre 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 devriez 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 ! Passons à des éléments plus avancés, tels que Conditionals, Iteration, et bien plus encore !

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 actuel.

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

const pug = require("pug");

Si vous utilisez Express dans votre application, vous n’avez pas besoin de require("pug"). Cependant, vous devez définir la propriété 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 afin qu’Express sache où rechercher vos fichiers Pug (pour la compilation).

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

Dans votre route Express, vous pouvez ensuite rendre vos fichiers Pug en appelant la fonction res.render avec le chemin du fichier (à partir du répertoire défini par l’option 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, index pointe vers un fichier situé dans views/index.pug, et locals représente un objet de variables qui sont 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.).