pug
Interpolation avec Carlin

Angular 2 AngularJS CSS HTML JavaScript jQuery MongoDB Node.js PHP twitter-bootstrap
Recherche…


Introduction

Il est important de pouvoir utiliser les variables côté serveur sur votre site Web. Pug vous permet d'interpoler les données générées par votre serveur en HTML, CSS et même en code JavaScript.

Syntaxe

  • res.render (path, variables) // Recherche un fichier pug pour effectuer un rendu au chemin "path" et lui transmet des "variables"
  • # {variable} // Interpole "variable" en ligne avec le code Jade environnant, après avoir évalué "variable"
  • ! {variable} // Interpole "variable" en ligne avec le code Jade environnant, sans évaluer "variable".
  • # [element] // Interpole "element" à l'intérieur d'un élément HTML Pug existant. La syntaxe des éléments HTML interpolés est identique à celle des éléments HTML normaux.

Paramètres

Paramètre Détails
chemin Utilisé dans res.render . C'est le chemin du fichier Pug que nous allons rendre. Le chemin provient de la racine du dossier défini sur votre application Express: app.set("views", "templates/views") . Par exemple, res.render("index") recherchera un fichier Pug dans templates/views/index.pug . Les sous-répertoires peuvent également être spécifiés. res.render("admin/index") recherche un fichier Pug dans templates/views/admin/index.pug .
les variables Utilisé dans res.render . Un objet JavaScript de variables à rendre accessible au fichier Pug défini par path (ci-dessus). Dans le fichier Pug, les clés de l'objet JavaScript ci-dessus deviennent disponibles en tant que variables. Si variables = {title: "Hello", color: "red"} , nous pourrions utiliser la variable title et color . Les sous-propriétés des objets imbriqués sont également disponibles.
variable Utilisé dans la syntaxe entre parenthèses #{} ou !{} . La valeur de variable sera sortie dans le contexte de son code Pug environnant. Si un symbole dièse est ajouté au crochet, la variable sera évaluée avant d'être sortie. Si un point d'exclamation est ajouté à l'accolade d'ouverture, la variable ne sera pas évaluée.
élément Utilisé entre crochets sytax #[] . L'élément HTML (dans la syntaxe Pug, pas la syntaxe HTML normale) sera évalué et généré en ligne avec le code Pug environnant.

Remarques

Pour plus d'informations sur l'interpolation PugJS, voir la documentation officielle sur l'interpolation PugJS.

Interpolation des variables côté serveur

Il est possible de passer des variables de votre serveur dans Pug pour générer du contenu dynamique ou des scripts. Les modèles Pug peuvent accéder aux variables transmises à la fonction res.render dans Express (ou pug.renderFile si vous n'utilisez pas Express, les arguments sont identiques).

index.js 

let colors = ["Red", "Green", "Blue"];
let langs  = ["HTML", "CSS", "JS"];
let title  = "My Cool Website";

let locals = {
    siteColors: colors,
    siteLangs:  langs,
    title:      title
};
res.render("index", locals);

Dans votre fichier index.pug , vous avez ensuite accès à la variable locals via ses clés. Les noms des variables de votre fichier Pug deviennent siteColors et siteNames .

Pour définir l'intégralité d'un élément HTML égal à une variable, utilisez l'opérateur égal à = pour le faire. Si votre variable doit être incorporée en ligne, utilisez la syntaxe de parenthèse #{} pour le faire.

index.pug 

doctype html
html
    head
        title= title
    body
        p My favorite color is #{siteColors[0]}.
        p Here's a list of my favorite coding languages
        ul
            each language in siteLangs
                li= language

sortie index.pug 

<!DOCTYPE html>
<html>
    <head>
        <title>My Cool Website</title>
    </head>
    <body>
        <p>My favorite color is Red.</p>
        <p>Here's a list of my favorite coding languages</p>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JS</li>
        </ul>
    </body>
</html>

Interpolation des variables brutes en HTML

Le contenu interpolé avec la syntaxe de parenthèse sera évalué pour le code, dont la sortie est incluse dans votre sortie HTML.

title suit le modèle de base pour évaluer un modèle local, mais le code entre #{ et } est évalué, échappé et le résultat mis en mémoire tampon dans la sortie du modèle en cours de rendu. [La source]

Si vous devez inclure la syntaxe HTML brute, utilisez un point d'exclamation au lieu d'un symbole dièse ( !{} lieu de #{} ).

index.js 

let tag = "<div>You can't escape me!</div>";
res.render("index", {
    myTag: tag
});

index.pug 

doctype html
html
    head
    body
        !{myTag}

sortie index.pug 

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <div>You can't escape me!</div>
    </body>
</html>

Interpolation de valeur dans le code JavaScript

L'interpolation des valeurs est utile si vous devez transmettre une variable côté serveur à JavaScript côté client (ou à d'autres langages qui le requièrent).

Dans le cas de variables, de nombres, de chaînes de caractères, etc., vous pouvez transmettre ces types de variables directement dans votre code JavaScript avec une syntaxe entre crochets et un point d’explication (le code entre parenthèses n’est pas évalué). Code JavaScript nécessitant quelque chose de votre serveur.

Dans l'exemple ci-dessous, nous devons envelopper le username entre guillemets pour que JavaScript puisse l'interpréter comme une chaîne. Pug affichera le contenu de la variable tel quel, nous devons donc le mettre entre guillemets pour qu'il devienne une chaîne JavaScript correcte. Ce n'est pas nécessaire pour le number , où JavaScript interprétera notre numéro comme nous le souhaitons (sous forme de nombre).

index.js 

let number   = 24;
let username = "John";
res.render("index", {
    number:   number,
    username: username
});

index.pug 

html
    head
    script.
        // Sets the username of the current user to be displayed site-wide
        function setUsername(username) {
            // ...
        }
        var number   = #{number};
        var username = "#{username}";
        setUsername(username);
        
    body
        p Welcome to my site!

sortie index.pug 

<html>
    <head>
        <script>
            // Sets the username of the current user to be displayed site-wide
            function setUsername(username) {
                // ...
            }
            var number   = 24;
            var username = "John";
            setUsername(username);
        </script>
    </head>
    <body>
        <p>Welcome to my site!</p>
    </body>
</html>

Si vous devez interpoler la valeur d'un objet JavaScript (par exemple, toutes les informations relatives à un utilisateur), vous devez contraindre la sortie dans Pug pour qu'elle soit traitée comme un objet JavaScript. Il est également nécessaire de générer le contenu brut de la variable, au lieu de la forme évaluée. Si vous deviez faire sortie la variable échappé ( var user = #{JSON.stringify(user)} ), vous recevrez une version échappée de l'objet (où les guillemets et apostrophes sont convertis en &quot; ), ce qui est ce que nous voulons que JSON.stringify fonctionne dessus.

index.js 

var myUser = {
    name:    "Leeroy Jenkins",
    id:      1234567890,
    address: "123 Wilson Way, New York NY, 10165"
};

res.render('index', {
    user: myUser
});

index.pug 

doctype html
html
    head
        script.
            window.onload = function () {
                function setUsername(username) {
                    return username;
                }

                var user = !{JSON.stringify(user)};
                document.getElementById("welcome-user").innerHTML = setUsername(user.name);
            };

    body
        div(id="welcome-user")

sortie index.pug 

<!DOCTYPE html>
<html>
    <head>
        <script>
            window.onload = function() {
                function setUsername(username) {
                    return username;
                }

                var user = {
                    "name": "Leeroy Jenkins",
                    "id": 1234567890,
                    "address": "123 Wilson Way, New York NY, 10165"
                };
                document.getElementById("welcome-user").innerHTML = setUsername(user.name);
        };
        </script>
    </head>
    <body>
        <div id="welcome-user"></div>
    </body>    
</html>

Le innerHTML de #welcome-user devient égal à Leeroy Jenkins . Le contenu de la variable user est imprimé directement dans la source HTML

Interpolation d'éléments HTML

Il peut être nécessaire d'imbriquer les balises HTML les unes dans les autres. L'interpolation d'éléments est effectuée dans une syntaxe similaire à l'interpolation de variables; les crochets au lieu des accolades sont utilisés ici. La syntaxe des éléments HTML interpolés est identique à celle des éléments HTML normaux.

index.pug 

doctype html
html
    head
        title My Awesome Website
    body
        p The server room went #[b boom]!
        p The fire alarm, however, #[u failed to go off...]
        p Not even #[a(href="https://stackoverflow.com/") Stack Overflow] could save them now.

sortie index.pug 

<!DOCTYPE html>
<html>
    <head>
        <title>My Awesome Website</title>
    </head>
    <body>
        <p>The server room went <b>boom</b>!</p>
        <p>The fire alarm, however, <u>failed to go off...</u></p>
        <p>Not even <a href="https://stackoverflow.com/">Stack Overflow</a> could save them now.</p>
    </body>
</html>


Modified text is an extract of the original Stack Overflow Documentation
Sous licence CC BY-SA 3.0
Non affilié à Stack Overflow