pug => Interpolatie met Pug

Invoering

Het is belangrijk om variabelen op de server in uw website te kunnen gebruiken. Met Pug kunt u gegevens die door uw server zijn gegenereerd, interpoleren in HTML, CSS en zelfs JavaScript-code.

Syntaxis

res.render (pad, variabelen) // Zoekt naar een pug-bestand dat moet worden weergegeven op pad "pad" en geeft er "variabelen" aan door
# {variable} // Interpoleert "variabele" in lijn met de omliggende Jade-code, na evaluatie van "variabele"
! {variable} // Interpoleert "variabele" inline met de omringende Jade-code, zonder "variabele" te evalueren.
# [element] // Interpoleert "element" binnen een bestaand Pug HTML-element. Syntaxis van geïnterpoleerde HTML-elementen is identiek aan die van normale HTML-elementen.

parameters

Parameter	Details
pad	Gebruikt in `res.render` . Dit is het pad van het Pug-bestand dat we gaan renderen. Het pad is afkomstig uit de hoofdmap van de map die is ingesteld op uw Express-app: `app.set("views", "templates/views")` . `res.render("index")` zal bijvoorbeeld zoeken naar een Pug-bestand op `templates/views/index.pug` . Subdirectories kunnen ook worden gespecificeerd; `res.render("admin/index")` zoekt naar een Pug-bestand op `templates/views/admin/index.pug` .
variabelen	Gebruikt in `res.render` . Een JavaScript-object van variabelen dat toegankelijk moet worden gemaakt voor het Pug-bestand gedefinieerd door `path` (hierboven). Binnen het Pug-bestand komen de sleutels van het bovenstaande JavaScript-object beschikbaar als variabelen. Als `variables = {title: "Hello", color: "red"}` , kunnen we de `title` en `color` . Subeigenschappen van geneste objecten zijn ook beschikbaar.
veranderlijk	Gebruikt in bracket-syntaxis `#{}` of `!{}` . De waarde van de `variable` wordt uitgevoerd in de context van de omliggende Pug-code. Als een pond-symbool wordt toegevoegd aan de accolade bij opening, wordt de `variable` geëvalueerd voordat deze wordt uitgevoerd. Als er een uitroepteken wordt toegevoegd aan de accolade, wordt de `variable` niet geëvalueerd.
element	Gebruikt in vierkante haak sytax `#[]` . Het HTML-element (in de Pug-syntaxis, niet de normale HTML-syntaxis) wordt geëvalueerd en uitgevoerd in lijn met de omliggende Pug-code.

Opmerkingen

Zie de officiële documentatie van PugJS-interpolatie voor meer informatie over PugJS-interpolatie .

Variabele interpolatie aan serverzijde

Het is mogelijk om variabelen van uw server in Pug door te geven voor dynamische inhoud of het genereren van scripts. Pug-sjablonen hebben toegang tot variabelen die zijn doorgegeven aan de functie res.render in Express (of pug.renderFile als u geen Express gebruikt, de argumenten zijn identiek).

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);

In uw index.pug bestand hebt u vervolgens toegang tot de locals variabele met behulp van de sleutels. De namen van de variabelen in uw Pug-bestand worden siteColors en siteNames .

Om dit geheel van een HTML-element gelijk te stellen aan een variabele, gebruikt u de equals-operator = om dit te doen. Als uw variabele inline moet worden ingesloten, gebruikt u bracket-syntaxis #{} om dit te doen.

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

index.pug-uitvoer

<!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>

Ruwe variabele interpolatie in HTML

Inhoud geïnterpoleerd met haakjesyntaxis wordt geëvalueerd voor code, waarvan de uitvoer is opgenomen in uw HTML-uitvoer.

title volgt het basispatroon voor het evalueren van een lokaal sjabloon, maar de code tussen #{ en } wordt geëvalueerd, ontsnapt en het resultaat gebufferd in de uitvoer van de sjabloon die wordt weergegeven. [Bron]

Als u onbewerkte HTML-syntaxis wilt opnemen, gebruikt u een uitroepteken in plaats van een pond-symbool ( !{} plaats van #{} ).

index.js

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

index.pug

doctype html
html
    head
    body
        !{myTag}

index.pug-uitvoer

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

Waarde-interpolatie in JavaScript-code

Het interpoleren van waarden is handig als u een server-side variabele moet doorgeven aan client-side JavaScript (of andere talen die dit vereisen).

In het geval van variabelen, getallen, tekenreeksen en dergelijke, kunt u dit soort variabelen rechtstreeks in uw JavaScript doorgeven met syntaxis van de haakje plus een uitlegpunt (zodat de code tussen haakjes niet wordt geëvalueerd.) Dit is handig voor het parametriseren JavaScript-code die iets van uw server vereist.

In het onderstaande voorbeeld moeten we username tussen aanhalingstekens plaatsen zodat JavaScript deze als een string kan interpreteren; Pug zal de inhoud van de variabele als zodanig weergeven, dus we moeten deze tussen aanhalingstekens plaatsen om een juiste JavaScript-tekenreeks te zijn. Dit is niet nodig voor number , waar JavaScript ons nummer zal interpreteren zoals het is bedoeld (als een nummer).

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!

index.pug-uitvoer

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

Als u de waarde van een JavaScript-object moet interpoleren (bijvoorbeeld alle informatie over een gebruiker), moet u de uitvoer in Pug stringiseren om deze als een JavaScript-object te kunnen behandelen. Het is ook noodzakelijk om de onbewerkte inhoud van de variabele uit te voeren in plaats van de geëvalueerde vorm ervan. Als u de ontsnapte variabele ( var user = #{JSON.stringify(user)} ) zou uitvoeren, zou u een ontsnapte versie van het object ontvangen (waar aanhalingstekens en apostrofs worden geconverteerd naar " ), wat niet is wat we willen dat JSON.stringify werkt.

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")

index.pug-uitvoer

<!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>

De innerHTML van #welcome-user wordt gelijk aan Leeroy Jenkins . De inhoud van de user wordt rechtstreeks naar de HTML-bron afgedrukt

HTML-elementinterpolatie

Het kan nodig zijn om HTML-tags in elkaar te nestelen. Elementinterpolatie gebeurt in een syntaxis vergelijkbaar met variabele interpolatie; vierkante haakjes in plaats van gekrulde accolades worden hier gebruikt. De syntaxis van geïnterpoleerde HTML-elementen is identiek aan de implementatie van normale HTML-elementen.

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.

index.pug-uitvoer

<!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

Licentie onder CC BY-SA 3.0

Niet aangesloten bij Stack Overflow

pug
Interpolatie met Pug

Zoeken…

Invoering

Syntaxis

parameters

Opmerkingen

Variabele interpolatie aan serverzijde

Ruwe variabele interpolatie in HTML

Waarde-interpolatie in JavaScript-code

HTML-elementinterpolatie