pug
Interpolering med mops
Sök…
Introduktion
Det är viktigt att kunna använda variabler på serversidan på din webbplats. Pug låter dig interpolera data som genereras av din server i HTML, CSS och till och med JavaScript-kod.
Syntax
- res.render (sökväg, variabler) // Söker efter en mopsfil som ska visas på sökvägen "sökväg" och överför "variabler" till den
- # {variabel} // Interpolerar "variabel" inline med den omgivande Jade-koden, efter utvärdering av "variabel"
- ! {variabel} // Interpolerar "variabel" inline med den omgivande Jade-koden, utan att utvärdera "variabel".
- # [element] // Interpolerar "element" inuti ett befintligt Pug HTML-element. Syntax för interpolerade HTML-element är identisk med normala HTML-element.
parametrar
| Parameter | detaljer |
|---|---|
| väg | Används i res.render . Detta är vägen till Pug-filen som vi kommer att återge. Sökvägen är hämtad från roten till mappuppsättningen i din Express-app: app.set("views", "templates/views") . Till exempel kommer res.render("index") att söka efter en Pug-fil på templates/views/index.pug . Underkataloger kan också specificeras; res.render("admin/index") letar efter en Pug-fil vid templates/views/admin/index.pug . |
| variabler | Används i res.render . Ett JavaScript-objekt med variabler som ska göras tillgängliga för Pug-filen definierad av path (ovan). I Pug-filen blir nycklarna för ovanstående JavaScript-objekt tillgängliga som variabler. Om variables = {title: "Hello", color: "red"} , kan vi använda title och color . Det är också tillgängligt att subpartier av kapslade objekt är tillgängliga. |
| variabel | Används i parentessyntax #{} eller !{} . Värdet på variable kommer att matas ut i samband med dess omgivande Pug-kod. Om en pundsymbol är förberedd på den öppna lockiga konsolen, kommer variable att utvärderas innan den matas ut. Om en utropstecken förhindras till den öppna krullningen, kommer variable inte att utvärderas. |
| element | Används i fyrkantig fäste-sytax #[] . HTML-elementet (i Pug-syntax, inte vanlig HTML-syntax) kommer att utvärderas och matas ut i linje med den omgivande Pug-koden. |
Anmärkningar
För mer information om PugJS-interpolering, se den officiella PugJS-interpolationsdokumentationen.
Interpolering av serversidan
Det är möjligt att överföra variabler från din server till Pug för dynamiskt innehåll eller skriptgenerering. Pug-mallar kan komma åt variabler som skickas till res.render funktionen i Express (eller pug.renderFile om du inte använder Express, argumenten är identiska).
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);
Inuti din index.pug fil har du sedan tillgång till locals med hjälp av dess nycklar. Namnen på variablerna i din Pug-fil blir siteColors och siteNames .
För att ställa in hela HTML-elementet lika med en variabel använder du lika operator = att göra det. Om din variabel måste vara inbäddad inline, använd parentessyntax #{} att göra det.
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-utgång
<!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>
Rå variabel interpolation i HTML
Innehåll interpolerat med parentessyntax utvärderas med avseende på kod, vars utgång ingår i din HTML-utgång.
rubriken följer det grundläggande mönstret för utvärdering av en lokal mall, men koden mellan
#{och}utvärderas, undviks och resultatet buffras i utgången från mallen som återges. [Källa]
Om du behöver inkludera rå HTML-syntax använder du en utropstecken i stället för en pundsymbol ( !{} Istället för #{} ).
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-utgång
<!DOCTYPE html>
<html>
<head></head>
<body>
<div>You can't escape me!</div>
</body>
</html>
Värdeinterpolering i JavaScript-kod
Att interpolera värden är bra om du behöver skicka en variabel på serversidan till JavaScript på klientsidan (eller andra språk som kräver det).
När det gäller variabler, siffror, strängar och liknande kan du skicka dessa typer av variabler direkt till din JavaScript med parentessyntax plus en förklaringspunkt (så att koden inuti parenteserna inte utvärderas.) Detta är användbart för parametrisering JavaScript-kod som kräver något från din server.
I exemplet nedan måste vi lägga in username i citattecken för att JavaScript ska tolka det som en sträng; Pug kommer att mata ut innehållet i variabeln som det är, så vi måste lägga det i anbudstecken för att det ska vara en korrekt JavaScript-sträng. Detta är inte nödvändigt för number , där JavaScript kommer att tolka vårt nummer som det vi tänker det (som ett 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-utgång
<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>
Om du behöver interpolera värdet på ett JavaScript-objekt (t.ex. all information om en användare), måste du stränga utdata i Pug för att det ska behandlas som ett JavaScript-objekt. Det är också nödvändigt att mata ut innehållet i variabeln i stället för den utvärderade formen av den. Om du skulle mata ut den undkomna variabeln ( var user = #{JSON.stringify(user)} ), skulle du få en undgått version av objektet (där citattecken och apostrofer konverteras till " ), vilket inte är vad vi vill att JSON.stringify ska arbeta med det.
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-utgång
<!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>
Det innerHTML för #welcome-user blir lika med Leeroy Jenkins . user innehåll skrivs ut direkt till HTML-källan
HTML-elementinterpolering
Det kan vara nödvändigt att bygga in HTML-taggar i varandra. Elementinterpolering utförs i en syntax som liknar variabel interpolering; fyrkantiga konsoler används istället för lockiga hängslen. Syntaxen för interpolerade HTML-element är identisk med implementeringen av normala HTML-element.
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-utgång
<!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>