Traduire cette page

Utiliser les moteurs de gabarits avec Express

Un moteur de modèle vous permet d’utiliser des fichiers de modèles statiques dans votre application. Lors de l’exécution, le moteur de gabarit remplace les variables dans un fichier de gabarit par des valeurs réelles, et transforme le modèle en un fichier HTML envoyé au client. Cette approche facilite la conception d’une page HTML.

The Express application generator uses Pug as its default, but it can generate apps configured for Handlebars-compatible engines such as hbs, EJS, among others.

For apps created by the generator, these settings are added to the generated app.js. For apps you create without the generator, set the following application setting properties yourself:

  • views, le répertoire où se trouvent les fichiers de modèle. Ex. : app.set('vues', './views'). Par défaut, le répertoire views se trouve à la racine de l’application.
  • voir le moteur, le moteur de gabarit à utiliser. Par exemple, pour utiliser le moteur de gabarit Pug : app.set('moteur de vue', 'pug').

Then install the corresponding Express-compatible template engine npm package; for example to install Pug:

Terminal window
npm install pug --save

Les moteurs de gabarits conformes à la norme Express tels que Pug exportent une fonction nommée __express(filePath, options, callback), qui res.render() appelle pour rendre le code du gabarit.

Certains moteurs de gabarits ne suivent pas cette convention. La bibliothèque @ladjs/consolidate suit cette convention en mappant tous les moteurs de gabarits populaires Node.js, et fonctionne donc parfaitement dans Express. For example, install hbs or any other Express-compatible Handlebars view engine instead of the raw handlebars package by itself.

Une fois que le moteur de vue est défini, vous n’avez pas à spécifier le moteur ou charger le module moteur de gabarit dans votre application ; Express charge le module en interne, par exemple :

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

Ensuite, créez un fichier de modèle Pug nommé index.pug dans le dossier views, avec le contenu suivant:

html
  head
    title= title
  body
    h1= message

Créez une route pour afficher le fichier index.pug. Si la propriété view engine n’est pas définie, vous devez spécifier l’extension du fichier view. Sinon, vous pouvez l’oublier.

app.get('/', (req, res) => {
  res.render('index', { title: 'Hey', message: 'Hello there!' });
});

Lorsque vous faites une requête sur la page d’accueil, le fichier index.pug sera rendu en HTML.

Le cache du moteur de vue ne cache pas le contenu de la sortie du modèle, seulement le modèle sous-jacent. La vue est toujours rendue à chaque requête, même lorsque le cache est activé.