Код
Pug позволяет писать Javascript в шаблонах. Существует три типа кода: небуферизированный, буферизированный и неэкранированный буферезированный.
Небуферезированный.
Небуферизированный код начинается с "-". Он ничего не добавляет к выводу на прямую.
- for (let x = 0; x < 3; x++)
li item
<li>item</li>
<li>item</li>
<li>item</li>
Pug поддерживает блоки небуферизированного кода.
-
let list = ["Uno", "Dos", "Tres",
"Cuatro", "Cinco", "Seis"]
each item in list
li= item
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
<li>Cuatro</li>
<li>Cinco</li>
<li>Seis</li>
Буферизованный код начинается с =. Он вычисляет выражение JavaScript и выводит результат. Для безопасности буферизованный код сначала экранируется.
p
= 'This code is <escaped>!'
<p>This code is <escaped>!</p>
Он также может быть встроен в атрибуты и поддерживает выражения JavaScript.
p= 'This code is' + ' <escaped>!'
<p>This code is <escaped>!</p>
Неэкранированный буферизованный код начинается с ! =. Он вычисляет выражение JavaScript и выводит результат. Неэкранированный буферизованный код не выполняет экранирования, поэтому небезопасен для ввода пользователем
p
!= 'This code is <strong>not</strong> escaped!'
<p>This code is <strong>not</strong> escaped!</p>
Неэкранированный буферизованный код может быть встроен в атрибуты и поддерживает выражения JavaScript.
p!= 'This code is' + ' <strong>not</strong> escaped!'
<p>This code is <strong>not</strong> escaped!</p>
Неэкранированный буферизованный код может быть опасным. Вы должны обязательно проверять и обробатывать данные вводимые пользователями, чтобы избежать межсайтовых сценариев (XSS).
Комментарии
Буферизованные комментарии выглядят так же, как однострочные комментарии JavaScript. Как и теги, буферизованные комментарии должны появляться в отдельной строке.
// just some paragraphs
p foo
p bar
<!-- just some paragraphs-->
<p>foo</p>
<p>bar</p>
Pug поддерживает небуферезированные комментарии. Такие комментарии будут присутствовать в Pug и не попадут в HTML. Отличаются наличием знака — перед текстом
//- will not output within markup
p foo
p bar
<p>foo</p>
<p>bar</p>
Блоки комментариев работают по таким же принципам
body
//-
Comments for your template writers.
Use as much text as you want.
//
Comments for your HTML readers.
Use as much text as you want.
<body>
<!--Comments for your HTML readers.
Use as much text as you want.-->
</body>
Pug не имеет специального синтаксиса для условных комментариев. (Условные комментарии являются своеобразным методом добавления резервной разметки для старых версий Internet Explorer.) Можно использовать обычные условные комментарии в стиле HTML.
doctype html
<!--[if IE 8]>
<html lang="en" class="lt-ie9">
<![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en">
<!--<![endif]-->
body
p Supporting old web browsers is a pain.
</html>
<!DOCTYPE html>
<!--[if IE 8]>
<html lang="en" class="lt-ie9">
<![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en">
<!--<![endif]-->
<body>
<p>Supporting old web browsers is a pain.</p>
</body>
</html>
Case
Оператор case сокращённый вариант switch из Javascript.
- let friends = 10
case friends
when 0
p you have no friends
when 1
p you have a friend
default
p you have #{friends} friends
<p>you have 10 friends</p>
В примере ниже показано как можно объединить два условия. Похожая ситуация возникает в JS switch если не указать breake.
- var friends = 0
case friends
when 0
when 1
p you have very few friends
default
p you have #{friends} friends
<p>you have very few friends</p>
Что делать если для какого-то значения не нужно ничего выводить. Если не указать какой блок выводить то, как показывает пример выше, будет выведен следующий по коду блок. Для таких ситуаций используйте breake
- var friends = 0
case friends
when 0
- break
when 1
p you have very few friends
default
p you have #{friends} friends
Значение по умолчанию
let friends = 7
case friends
when 0: p you have no friends
when 1: p you have a friend
default: p you have #{friends} friends
<p>you have 7 friends</p>
Условные выражения
Условный синтаксис Pug похож на Javascript. Отличие в том, что не нужны скобки.
- var user = { description: 'foo bar baz' }
- var authorised = false
#user
if (user.description)
h2.green Description
p.description= user.description
else if authorised
h2.blue Description
p.description.
User has no description,
why not add one...
else
h2.red Description
p.description User has no description
<div id="user">
<h2 class="green">Description</h2>
<p class="description">foo bar baz</p>
</div>
В Pug можно использовать unless вместо if с отрицанием. Ниже два куска кода которые работают одинаково.
unless user.isAnonymous
p You're logged in as #{user.name}
if !user.isAnonymous
p You're logged in as #{user.name}
Итерация
Pug поддерживает два вида итерации: each и while
each
Pug упрощает итерацию массивов и объектов в шаблоне.
ul
each val in [1, 2, 3, 4, 5]
li= val
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
Можно получать индекс итерируемых элементов.
ul
each val, index in ['zero', 'one', 'two']
li= index + ': ' + val
<ul>
<li>0: zero</li>
<li>1: one</li>
<li>2: two</li>
</ul>
Подобным образом можно перебирать объекты.
ul
each val, index in {1:'one',2:'two',3:'three'}
li= index + ': ' + val
<ul>
<li>1: one</li>
<li>2: two</li>
<li>3: three</li>
</ul>
Итерируемый объект или массив - это просто JavaScript. Таким образом, это может быть переменная, или результат вызова функции, или что-то еще.
- var values = [];
ul
each val in values.length ? values : ['There are no values']
li= val
<ul>
<li>There are no values</li>
</ul>
Можно также добавить блок else, который будет выполняться, если массив или объект не содержат значений. Следующий пример эквивалентен приведенному выше.
- var values = [];
ul
each val in values
li= val
else
li There are no values
<ul>
<li>There are no values</li>
</ul>
Вместо each можно использовать for
While
Для создания цикла можно использовать while
- var n = 0;
ul
while n < 4
li= n++
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
- Войдите, чтобы оставлять комментарии