pug
Interpolacja z mopsem
Szukaj…
Wprowadzenie
Ważne jest, aby móc używać zmiennych po stronie serwera w swojej witrynie. Mops pozwala interpolować dane generowane przez serwer w HTML, CSS, a nawet w kodzie JavaScript.
Składnia
- res.render (ścieżka, zmienne) // Wyszukuje plik mopsa do renderowania na ścieżce „path” i przekazuje do niego „zmienne”
- # {zmienna} // Interpoluje „zmienną” w linii z otaczającym kodem Jade po ocenie „zmiennej”
- ! {zmienna} // Interpoluje „zmienną” w linii z otaczającym kodem Jade, bez oceny „zmiennej”.
- # [element] // Interpoluje „element” wewnątrz istniejącego elementu HTML Mopsa. Składnia interpolowanych elementów HTML jest identyczna jak w przypadku normalnych elementów HTML.
Parametry
| Parametr | Detale |
|---|---|
| ścieżka | Używane w res.render . Jest to ścieżka do pliku Pug, który będziemy renderować. Ścieżka pochodzi z katalogu głównego folderu ustawionego w aplikacji Express: app.set("views", "templates/views") . Na przykład res.render("index") wyszuka plik Pug w templates/views/index.pug . Można również podać podkatalogi; res.render("admin/index") szuka pliku Pug w templates/views/admin/index.pug . |
| zmienne | Używane w res.render . Obiekt JavaScript zmiennych, które mają być dostępne dla pliku Mops zdefiniowanego przez path (powyżej). W pliku Mops klucze powyższego obiektu JavaScript stają się dostępne jako zmienne. Jeśli variables = {title: "Hello", color: "red"} , moglibyśmy użyć zmiennej title i color . Dostępne są również właściwości podrzędne zagnieżdżonych obiektów. |
| zmienna | Używany w składni nawiasu #{} lub !{} . Wartość variable zostanie wyprowadzona w kontekście otaczającego jej kodu Pug. Jeśli do otwierającego nawiasu klamrowego zostanie wstawiony symbol funta, variable zostanie oszacowana przed wyprowadzeniem. Jeśli wykrzyknik zostanie dodany do otwierającego nawiasu klamrowego, variable nie będzie oceniana. |
| element | Używany w nawiasie kwadratowym sytax #[] . Element HTML (w składni Pug, a nie w normalnej składni HTML) zostanie oceniony i wyprowadzony zgodnie z otaczającym kodem Pug. |
Uwagi
Więcej informacji na temat interpolacji PugJS znajduje się w oficjalnej dokumentacji interpolacji PugJS.
Interpolacja zmiennych po stronie serwera
Możliwe jest przekazywanie zmiennych z serwera do Mopsa w celu dynamicznego generowania treści lub skryptów. Szablony mopsów mają dostęp do zmiennych przekazywanych do funkcji res.render w Express (lub pug.renderFile jeśli nie używasz Express, argumenty są identyczne).
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);
Wewnątrz pliku index.pug masz dostęp do zmiennej locals za pomocą jej kluczy. Nazwy zmiennych w pliku Mops stać siteColors i siteNames .
Aby ustawić całość elementu HTML równą zmiennej, użyj w tym celu operatora równości = . Jeśli twoja zmienna musi być osadzona wbudowana, użyj do tego składni nawiasowej #{} .
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
wynik 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>
Surowa interpolacja zmiennych w HTML
Treści interpolowane składnią nawiasów zostaną ocenione pod kątem kodu, którego wynik jest zawarty w wynikach HTML.
title podąża za podstawowym wzorcem oceny szablonu lokalnego, ale kod między
#{i}jest oceniany, zmieniany i wynik jest buforowany w wynikach renderowanego szablonu. [Źródło]
Jeśli potrzebujesz dołączyć surową składnię HTML, użyj wykrzyknika zamiast symbolu funta ( !{} Zamiast #{} ).
index.js
let tag = "<div>You can't escape me!</div>";
res.render("index", {
myTag: tag
});
index.pug
doctype html
html
head
body
!{myTag}
wynik index.pug
<!DOCTYPE html>
<html>
<head></head>
<body>
<div>You can't escape me!</div>
</body>
</html>
Interpolacja wartości w kodzie JavaScript
Interpolacja wartości jest przydatna, jeśli potrzebujesz przekazać zmienną po stronie serwera do JavaScript po stronie klienta (lub innych języków, które tego wymagają).
W przypadku zmiennych, liczb, ciągów znaków i tym podobnych, możesz przekazywać te typy zmiennych bezpośrednio do swojego JavaScript za pomocą składni nawiasów plus punkt objaśniający (aby kod w nawiasach nie był oceniany). Jest to przydatne do parametryzacji Kod JavaScript, który wymaga czegoś z twojego serwera.
W poniższym przykładzie musimy zawinąć username w cudzysłów, aby JavaScript zinterpretował ją jako ciąg; Mops wyświetli zawartość zmiennej w stanie, w jakim się znajduje, więc musimy wstawić ją w cudzysłów, aby był to prawidłowy ciąg JavaScript. Nie jest to konieczne w przypadku number , w której JavaScript interpretuje nasz numer tak, jak zamierzamy (jako liczbę).
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!
wynik 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>
Jeśli potrzebujesz interpolować wartość obiektu JavaScript (np. Wszystkie informacje o użytkowniku), musisz skreślić dane wyjściowe w Pug, aby można je było traktować jako obiekt JavaScript. Konieczne jest również wyprowadzenie surowej zawartości zmiennej zamiast jej obliczonej postaci. Gdybyś miał wyprowadzić zmienną o zmienionym znaczeniu ( var user = #{JSON.stringify(user)} ), otrzymasz ucieczkową wersję obiektu (w której znaki cudzysłowu i apostrofy są konwertowane na " ), co nie jest tym, co chcemy, aby JSON.stringify nad nim pracował.
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")
wynik 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>
innerHTML #welcome-user staje się równy Leeroy Jenkins . Zawartość zmiennej user jest drukowana bezpośrednio do źródła HTML
Interpolacja elementów HTML
Może być konieczne zagnieżdżenie tagów HTML w sobie. Interpolacja elementów odbywa się w składni podobnej do interpolacji zmiennej; zastosowano nawiasy kwadratowe zamiast nawiasów klamrowych. Składnia interpolowanych elementów HTML jest identyczna z implementacją normalnych elementów 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.
wynik 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>