Pug - комментарии, условия, итерации

Pug - case, each, while, if
  1. Код
  2. Комментарии
  3. Case
  4. Условные выражения
  5. Итерация

Код

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 &lt;escaped&gt;!</p>

Он также может быть встроен в атрибуты и поддерживает выражения JavaScript.

p= 'This code is' + ' <escaped>!'
<p>This code is &lt;escaped&gt;!</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>