pug => Interpolation mit Mops

Einführung

Es ist wichtig, serverseitige Variablen in Ihrer Website verwenden zu können. Mit Pug können Sie Daten interpolieren, die von Ihrem Server in HTML-, CSS- und sogar JavaScript-Code generiert wurden.

Syntax

res.render (Pfad, Variablen) // Sucht nach einer Pug-Datei, die unter Pfad "Pfad" gerendert werden soll, und übergibt "Variablen"
# {variable} // Interpoliert "Variable" inline mit dem umgebenden Jade-Code, nachdem "Variable" ausgewertet wurde
! {variable} // Interpoliert "variable" inline mit dem umgebenden Jade-Code, ohne "variable" auszuwerten.
# [Element] // Interpoliert "Element" innerhalb eines vorhandenen Pug-HTML-Elements. Die Syntax interpolierter HTML-Elemente ist mit der von normalen HTML-Elementen identisch.

Parameter

Parameter	Einzelheiten
Pfad	Wird im `res.render` . Dies ist der Pfad der Pug-Datei, die wir rendern werden. Der Pfad wird aus dem Stammverzeichnis des Ordners übernommen, der in Ihrer Express-App festgelegt ist: `app.set("views", "templates/views")` . Beispielsweise `res.render("index")` unter `res.render("index")` `templates/views/index.pug` `res.render("index")` nach einer Pug-Datei. Unterverzeichnisse können ebenfalls angegeben werden. `res.render("admin/index")` sucht unter `res.render("admin/index")` `templates/views/admin/index.pug` `res.render("admin/index")` nach einer Pug-Datei.
Variablen	Wird im `res.render` . Ein JavaScript-Objekt von Variablen, das für die über `path` definierte Pug-Datei zugänglich gemacht werden soll (oben). In der Pug-Datei stehen die Schlüssel des obigen JavaScript-Objekts als Variablen zur Verfügung. Wenn `variables = {title: "Hello", color: "red"}` , könnten wir die `title` und `color` Variable verwenden. Sub-Eigenschaften von geschachtelten Objekten sind ebenfalls verfügbar.
Variable	Wird in Klammer-Syntax `#{}` oder `!{}` Verwendet. Der Wert der `variable` wird im Kontext des umgebenden Pug-Codes ausgegeben. Wenn der öffnenden geschweiften Klammer ein Pfund-Symbol vorangestellt wird, wird die `variable` vor der Ausgabe ausgewertet. Wenn der öffnenden geschweiften Klammer ein Ausrufezeichen vorangestellt wird, wird die `variable` nicht ausgewertet.
Element	Wird in eckigen Klammern sytax `#[]` . Das HTML-Element (in Pug-Syntax, nicht in normaler HTML-Syntax) wird ausgewertet und inline mit dem umgebenden Pug-Code ausgegeben.

Bemerkungen

Weitere Informationen zur PugJS-Interpolation finden Sie in der offiziellen PugJS-Interpolationsdokumentation.

Serverseitige variable Interpolation

Es ist möglich, Variablen von Ihrem Server zur dynamischen Erzeugung von Inhalten oder zur Generierung von Skripts an Pug zu übergeben. Pug-Vorlagen können auf Variablen zugreifen, die an die res.render Funktion in Express übergeben werden (oder pug.renderFile wenn Sie Express nicht verwenden, die Argumente sind identisch).

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 Ihrer index.pug Datei, haben Sie dann Zugriff auf die locals Variable durch seine Schlüssel. Die Namen der Variablen in Ihrer Pug-Datei werden zu siteColors und siteNames .

Um die Gesamtheit eines HTML-Elements einer Variablen gleichzusetzen, verwenden Sie den Gleichheitsoperator = um dies zu tun. Wenn Ihre Variable inline eingebettet werden muss, verwenden Sie die Klammer-Syntax #{} .

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

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

Raw Variable Interpolation in HTML

Mit Klammer-Syntax interpolierter Inhalt wird für Code ausgewertet, dessen Ausgabe in Ihrer HTML-Ausgabe enthalten ist.

Titel folgt dem Grundmuster für die Bewertung einer lokalen Vorlage, der Code zwischen #{ und } wird jedoch ausgewertet, mit Escapezeichen versehen und das Ergebnis wird in die Ausgabe der gerenderten Vorlage gepuffert. [Quelle]

Wenn Sie rohe HTML-Syntax einschließen müssen, verwenden Sie ein Ausrufezeichen anstelle eines Pfundsymbols ( !{} Anstelle von #{} ).

index.js

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

index.pug

doctype html
html
    head
    body
        !{myTag}

Ausgabe von index.pug

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

Wertinterpolation in JavaScript-Code

Das Interpolieren von Werten ist hilfreich, wenn Sie eine serverseitige Variable an clientseitiges JavaScript (oder andere Sprachen, die dies erfordern) übergeben werden müssen.

Im Fall von Variablen, Zahlen, Zeichenfolgen und dergleichen können Sie diese Variablentypen mit Klammer-Syntax und einem Erklärungspunkt direkt in Ihr JavaScript übergeben (damit der Code in den Klammern nicht ausgewertet wird.) Dies ist hilfreich für die Parametrisierung JavaScript-Code, der etwas von Ihrem Server erfordert.

Im folgenden Beispiel müssen wir username in Anführungszeichen einschließen, damit JavaScript es als Zeichenfolge interpretieren kann. Pug gibt den Inhalt der Variablen unverändert aus. Daher müssen wir ihn in Anführungszeichen setzen, damit er eine richtige JavaScript-Zeichenfolge ist. Dies ist nicht für die number erforderlich, bei der JavaScript unsere Nummer so interpretiert, wie sie beabsichtigt ist (als 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!

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

Wenn Sie den Wert eines JavaScript-Objekts interpolieren müssen (z. B. alle Informationen zu einem Benutzer), müssen Sie die Ausgabe in Pug mit einem String versehen, damit sie als JavaScript-Objekt behandelt wird. Es ist auch notwendig, den Rohinhalt der Variablen anstelle der ausgewerteten Form auszugeben. Wenn Sie die Ausgabe der entkam Variable zu tun waren ( var user = #{JSON.stringify(user)} ), würden Sie eine maskierte Version des Objekts erhalten (wo Anführungszeichen und Apostrophe umgewandelt werden " ), das ist nicht das, was Wir möchten, dass JSON.stringify daran arbeitet.

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

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

Die innerHTML von #welcome-user entspricht Leeroy Jenkins . Der Inhalt der user wird direkt in die HTML-Quelle gedruckt

HTML-Element-Interpolation

Eventuell müssen HTML-Tags ineinander geschachtelt werden. Die Elementinterpolation erfolgt in einer der Variableninterpolation ähnlichen Syntax. eckige Klammern anstelle von geschweiften Klammern werden hier verwendet. Die Syntax interpolierter HTML-Elemente ist identisch mit der Implementierung von normalen 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.

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

Lizenziert unter CC BY-SA 3.0

Nicht angeschlossen an Stack Overflow

pug
Interpolation mit Mops

Suche…

Einführung

Syntax

Parameter

Bemerkungen

Serverseitige variable Interpolation

Raw Variable Interpolation in HTML

Wertinterpolation in JavaScript-Code

HTML-Element-Interpolation