pug
Interpolazione con Pug

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


introduzione

È importante poter utilizzare le variabili lato server nel tuo sito web. Pug ti consente di interpolare i dati generati dal tuo server in HTML, CSS e persino codice JavaScript.

Sintassi

  • res.render (percorso, variabili) // Cerca un file pug da renderizzare sul percorso "percorso" e passa a "variabili"
  • # {variable} // Interpola "variabile" in linea con il codice Jade circostante, dopo aver valutato "variabile"
  • ! {variabile} // Interpola "variabile" in linea con il codice Jade circostante, senza valutare "variabile".
  • # [elemento] // Interpola "elemento" all'interno di un elemento Pug HTML esistente. La sintassi degli elementi HTML interpolati è identica a quella dei normali elementi HTML.

Parametri

Parametro Dettagli
sentiero Utilizzato in res.render . Questo è il percorso del file Pug che stiamo per renderizzare. Il percorso è preso dalla radice della cartella impostata nella tua app Express: app.set("views", "templates/views") . Ad esempio, res.render("index") cercherà un file Pug in templates/views/index.pug . Anche le sottodirectory possono essere specificate; res.render("admin/index") cerca un file Pug in templates/views/admin/index.pug .
variabili Utilizzato in res.render . Un oggetto JavaScript di variabili da rendere accessibile al file Pug definito dal path (sopra). All'interno del file Pug, le chiavi dell'oggetto JavaScript sopra descritto diventano disponibili come variabili. Se variables = {title: "Hello", color: "red"} , potremmo usare il title e color variabile di color . Sono disponibili anche sottoproprietà di oggetti nidificati.
variabile Utilizzato nella sintassi della parentesi #{} o !{} . Il valore della variable verrà emesso nel contesto del suo codice Pug circostante. Se un simbolo di cancelletto viene anteposto alla parentesi graffa aperta, la variable verrà valutata prima di essere stampata. Se un punto esclamativo viene anteposto alla parentesi graffa aperta, la variable non verrà valutata.
elemento Utilizzato nella combinazione di parentesi quadra #[] . L'elemento HTML (nella sintassi Pug, non nella normale sintassi HTML) verrà valutato e prodotto in linea con il codice Pug circostante.

Osservazioni

Per ulteriori informazioni sull'interpolazione di PugJS, consultare la documentazione di interpolazione di PugJS ufficiale.

Interpolazione variabile lato server

È possibile passare le variabili dal tuo server a Pug per il contenuto dinamico o la generazione di script. I modelli Pug possono accedere alle variabili passate alla funzione res.render in Express (o pug.renderFile se non si utilizza Express, gli argomenti sono identici).

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

All'interno del tuo file index.pug , puoi accedere alla variabile locals tramite le sue chiavi. I nomi delle variabili nel tuo file Pug diventano siteColors e siteNames .

Per impostare la totalità di un elemento HTML uguale a una variabile, utilizzare l'operatore = uguale per farlo. Se la variabile deve essere incorporata in linea, utilizzare la sintassi della parentesi #{} per farlo.

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 output 

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

Interpolazione delle variabili raw in HTML

Il contenuto interpolato con la sintassi della parentesi verrà valutato per il codice, il cui output è incluso nell'output HTML.

il titolo segue lo schema di base per la valutazione di un modello locale, ma il codice tra #{ e } viene valutato, sottoposto a escape e il risultato memorizzato nel buffer nell'output del modello sottoposto a rendering. [Fonte]

Se è necessario includere la sintassi HTML non elaborata, utilizzare un punto esclamativo anziché un simbolo cancelletto ( !{} Anziché #{} ).

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 output 

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

Interpolazione del valore nel codice JavaScript

I valori di interpolazione sono utili se è necessario passare una variabile lato server a JavaScript lato client (o altre lingue che lo richiedono).

Nel caso di variabili, numeri, stringhe e simili, puoi passare questi tipi di variabili direttamente nel tuo JavaScript con la sintassi della parentesi più un punto di spiegazione (in modo che il codice all'interno delle parentesi non venga valutato). Ciò è utile per la parametrizzazione Codice JavaScript che richiede qualcosa dal tuo server.

Nell'esempio seguente, dobbiamo racchiudere il username tra virgolette affinché JavaScript lo interpreti come una stringa; Pug produrrà il contenuto della variabile così com'è, quindi dobbiamo metterlo tra virgolette perché sia ​​una stringa JavaScript corretta. Questo non è necessario per il number , dove JavaScript interpreterà il nostro numero come lo intendiamo (come numero).

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 output 

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

Se hai bisogno di interpolare il valore di un oggetto JavaScript (ad esempio tutte le informazioni su un utente), devi stringificare l'output in Pug affinché sia ​​trattato come un oggetto JavaScript. È anche necessario generare il contenuto non elaborato della variabile, anziché la forma valutata di esso. Se dovessi eseguire l'output della variabile di escape ( var user = #{JSON.stringify(user)} ), riceverai una versione di escape dell'oggetto (dove virgolette e apostrofi vengono convertiti in &quot; ), che non è quello che vogliamo che JSON.stringify funzioni su di esso.

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 output 

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

Il innerHTML di #welcome-user diventa uguale a Leeroy Jenkins . I contenuti della variabile user sono stampati direttamente sull'origine HTML

Interpolazione elemento HTML

Potrebbe essere necessario annidare i tag HTML l'uno dentro l'altro. L'interpolazione degli elementi viene eseguita in una sintassi simile all'interpolazione delle variabili; qui vengono usate parentesi quadre invece di parentesi graffe. La sintassi degli elementi HTML interpolati è identica all'implementazione di normali elementi HTML.

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 output 

<!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
Autorizzato sotto CC BY-SA 3.0
Non affiliato con Stack Overflow