Templating
Pug est un moteur de templating pour Express. Les moteurs de templating sont utilisés pour éliminer l'encombrement du code de notre serveur avec du HTML, en concaténant des chaînes de caractères de manière sauvage à des modèles HTML existants. Pug est un moteur de création de modèles très puissant qui dispose d'une grande variété de fonctionnalités, notamment les filtres, les inclusions, l'héritage, l'interpolation, etc. Il y a beaucoup de choses à couvrir sur ce sujet.
Pour utiliser Pug avec Express, nous devons l'installer,
npm install --save pug
Maintenant que Pug est installé, définissez-le comme le moteur de templating de votre application. Vous n'avez pas besoin de l'exiger. Ajoutez le code suivant à votre fichier index.js.
app.set('view engine', 'pug');
app.set('views','./views');
Créez maintenant un nouveau répertoire appelé views. À l'intérieur de celui-ci, créez un fichier appelé first_view.pug, et entrez-y les données suivantes.
doctype html
html
head
title = "Hello Pug"
body
p.greetings#people Hello World!
To run this page, add the following route to your app −
app.get('/first_template', function(req, res){
res.render('first_view');
});
Vous obtiendrez le résultat suivant : Hello World ! Pug convertit ce balisage très simple en html. Nous n'avons pas besoin de garder la trace de la fermeture de nos balises, ni d'utiliser les mots-clés class et id, mais plutôt d'utiliser '.' et '#' pour les définir. Le code ci-dessus est d'abord converti en format -
<!DOCTYPE html>
<html>
<head>
<title>Hello Pug</title>
</head>
<body>
<p class = "greetings" id = "people">Hello World!</p>
</body>
</html>
Pug est capable de faire bien plus que de simplifier le balisage HTML.
Caractéristiques importantes du Pug
Voyons maintenant quelques caractéristiques importantes de Pug.
Simple Tags
Besoin d'aide ?
Rejoignez notre communauté officielle et ne restez plus seul à bloquer sur un problème !
