pug
Интерполяция с мопсом
Поиск…
Вступление
Важно иметь возможность использовать серверные переменные на вашем веб-сайте. Мопс позволяет вам интерполировать данные, созданные вашим сервером в HTML, CSS и даже JavaScript-код.
Синтаксис
- res.render (путь, переменные) // Ищет файл мопса для рендеринга по пути «путь» и передает ему «переменные»
- # {variable} // Интерполирует «переменную» в строку с окружающим Jade-кодом после оценки «переменной»
- ! {variable} // Интерполирует «переменную» inline с окружающим Jade-кодом, не оценивая «переменную».
- # [element] // Интерполирует «элемент» внутри существующего элемента HTML Pug. Синтаксис интерполированных элементов HTML идентичен синтаксису нормальных элементов HTML.
параметры
| параметр | подробности |
|---|---|
| дорожка | Используется в res.render . Это путь файла Pug, который мы будем отображать. Путь берется из корня папки, установленной в вашем приложении Express: app.set("views", "templates/views") . Например, res.render("index") будет искать файл Pug в templates/views/index.pug . Также могут быть указаны подкаталоги; res.render("admin/index") ищет файл Pug в templates/views/admin/index.pug . |
| переменные | Используется в res.render . Объект переменных JavaScript, который должен быть доступен для файла Pug, определенного по path (см. Выше). Внутри файла Pug ключи указанного выше объекта JavaScript становятся доступными как переменные. Если variables = {title: "Hello", color: "red"} , мы могли бы использовать title и color переменную. Также доступны подпрограммы вложенных объектов. |
| переменная | Используется в синтаксисе #{} или !{} . Значение variable будет выводиться в контексте окружающего кода Pug. Если к открывающей фигурной скобке добавлен символ фунта, variable будет оценена до вывода. Если восклицательный знак добавляется к открывающей фигурной скобке, variable не будет оцениваться. |
| элемент | Используется в квадратной скобе sytax #[] . Элемент HTML (в синтаксисе Pug, а не в стандартном синтаксисе HTML) будет оцениваться и выводиться в очередь с окружающим кодом Pug. |
замечания
Для получения дополнительной информации об интерполяции PugJS см. Официальную документацию по интерполяции PugJS.
Интерполяция переменных на стороне сервера
Вы можете передавать переменные с вашего сервера в Pug для динамического контента или генерации сценариев. Шаблоны шаблонов могут обращаться к переменным, переданным функции res.render в Express (или pug.renderFile если вы не используете Express, аргументы идентичны).
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);
Внутри вашего файла index.pug вас есть доступ к переменной locals посредством его ключей. Именами переменных в вашем файле Pug становятся siteColors и siteNames .
Чтобы установить полный элемент HTML равным переменной, используйте оператор equals = для этого. Если ваша переменная должна быть встроена встроенной, используйте для этого синтаксис #{} .
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
<!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>
Необработанная переменная интерполяции в HTML
Контекст, интерполированный с помощью синтаксиса, будет оцениваться для кода, выход которого включен в ваш вывод HTML.
title следует за базовым шаблоном для оценки локального шаблона, но код между
#{и}оценивается, экранируется, а результат буферизуется в вывод отображаемого шаблона. [Источник]
Если вам нужно включить сырой синтаксис HTML, используйте восклицательный знак вместо символа фунта ( !{} Вместо #{} ).
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
<!DOCTYPE html>
<html>
<head></head>
<body>
<div>You can't escape me!</div>
</body>
</html>
Интерполяция значений в JavaScript-коде
Интерполирующие значения полезны, если вам нужно передать серверную переменную на клиентский JavaScript (или на другие языки, которые этого требуют).
В случае переменных, чисел, строк и т. Д. Вы можете передавать эти типы переменных непосредственно в свой JavaScript с помощью синтаксиса с помощью скобки плюс пояснительную точку (так что код внутри скобок не оценивается.) Это полезно для параметризации Код JavaScript, который требует что-то с вашего сервера.
В приведенном ниже примере нам нужно обернуть username в кавычки, чтобы JavaScript интерпретировал его как строку; Pug выведет содержимое переменной as-is, поэтому нам нужно поместить его в кавычки для правильной строки JavaScript. Это необязательно для number , где JavaScript будет интерпретировать наш номер, как мы его намерены (в виде числа).
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
<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>
Если вам нужно интерполировать значение объекта JavaScript (например, всю информацию о пользователе), вы должны укрепить вывод в Pug, чтобы он рассматривался как объект JavaScript. Также необходимо выводить необработанное содержимое переменной вместо оцениваемой формы. Если вы должны были выполнить вывод экранированной переменной ( var user = #{JSON.stringify(user)} ), вы получили бы экранированную версию объекта (где кавычки и апострофы преобразуются в " ), что не является чем-то мы хотим, чтобы JSON.stringify работал над этим.
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
<!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 становится равным Leeroy Jenkins . Содержимое user переменной печатается непосредственно в источнике HTML
Интерполяция HTML-элементов
Возможно, необходимо вставить HTML-теги друг в друга. Интерполяция элементов выполняется в синтаксисе, подобном переменной интерполяции; квадратные скобки вместо фигурных скобок. Синтаксис интерполированных элементов HTML идентичен реализации обычных 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
<!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>