Templating

45 min Niveau 4

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

Les balises sont imbriquées en fonction de leur indentation. Comme dans l'exemple ci-dessus, <title> était indenté à l'intérieur de la balise <head>, il était donc à l'intérieur de celle-ci. Mais la balise <body> était sur la même indentation, elle était donc une sœur de la balise <head>.

Nous n'avons pas besoin de fermer les balises, dès que Pug rencontre la balise suivante au même niveau d'indentation ou à un niveau supérieur, il ferme la balise pour nous.

Pour mettre du texte à l'intérieur d'une balise, nous avons 3 méthodes -

Espace séparé

h1 Welcome to Pug

Texte passepoilé

div
    | To insert multiline text, 
    | You can use the pipe operator.

Bloc de texte

div.
    But that gets tedious if you have a lot of text.
    You can use "." at the end of tag to denote block of text.
    To put tags inside this block, simply enter tag in a new line and 
    indent it accordingly.

Commentaire

Se connecter pour voir la suite

Besoin d'aide ?

Rejoignez notre communauté officielle et ne restez plus seul à bloquer sur un problème !