Pug vs HTML. Возможности шаблонизатора Pug (Jade)

В настоящее время Pug является одним из популярных шаблонизаторов.

В большинстве случаев в процессе верстки сайта на чистом HTML разработчику будет не хватать его возможностей. Давайте рассмотрим основные преимущества Pug.

Теги

Прежде всего давайте обратим внимание на то, что в Pug теги не закрываются — это осуществляется с помощью табуляции.

ul
  li Пункт 1
  li Пункт 2
  li Пункт 3

Результат:

<ul>
  <li>Пункт 1</li>
  <li>Пункт 2</li>
  <li>Пункт 3</li>
</ul>

В данном шаблонизаторе используется минимум уголков и скобочек. Это удобно и способствует ускорению работы верстальщика. Поначалу это может быть странно, но позже вы привыкните.

Теги можно записывать в одну строку. Такая запись имеет следующий вид:

ul
  li: p Текст параграфа

Результат:

<ul>
  <li>
    <p>Текст параграфа</p>
  </li>
</ul>

Записывать теги в одну строку можно, даже если их количество больше двух:

ul: li: p Текст параграфа

Результат будет таким же:

<ul>
  <li>
    <p>Текст параграфа</p>
  </li>
</ul>

Атрибуты

Атрибуты записываются в скобках. Несколько атрибутов перечисляются преимущественно через пробел (хотя можно и через запятую).

input(type="text" placeholder="search")

Результат:

<input type="text" placeholder="search">

Классы можно записывать таким же образом, но для удобства все-таки принято писать так:

.content

// или так, но это менее удобная запись:
div(class="content")

Результат:

<div class="content"></div>

Если перед классом нет никакого тега, как в примере выше, то подразумевается, что это будет div.

Таким же образом записывается идентификатор, но вместо точки используется решетка #:

#content

// или так, но это менее удобная запись:
div(id="content")

Результат:

<div id="content"></div>

Подключение файлов

Это очень полезная возможность. Если вам необходимо разбить файл на несколько частей и подключить в необходимом месте, то используйте include:

#page
  include pug/block-header
  include pug/block-skills

Результат:

<div id="page">
  <!-- код из файла block-header -->
  <!-- код из файла block-skills -->
</div>

Мне всегда не хватало этой возможности в HTML, т.к. на странице может быть очень много блоков, а держать весь код в одном файле — совсем неудобно.

Комментирование

Комментирование бывает двух видов:

  • первый вид комментариев виден только в pug-шаблоне, но не виден в итоговом HTML;
  • второй вид комментариев виден в pug-шаблоне и так же попадает в итоговый HTML.
body
  //-
    Комментарий виден только в шаблоне
    Это многострочный комментарий
  //
    Комментарий виден в pug-шаблоне и попадает в HTML
    Это многострочный комментарий

Результат:

<body>
  <!-- Комментарий виден в pug-шаблоне и попадает в HTML
    Это многострочный комментарий -->
</body>

Наследование шаблонов

Наследование шаблонов — это очень полезная штука, имеется у большинства шаблонизаторов. Например, у вас есть шаблон страницы base.pug:

html
  head
    title My Site
    block scripts
      script(src="/jquery.js")
  body
    block content
    block footer
      #footer
        p cute cats seized the world

И есть главная страница index.pug(она наследуется от базового шаблона):

extends base

block content
  h1 Заголовок
  img(src="images/pets/unicorn.png" alt="")

В необходимом шаблоне вы указываете, что текущий шаблон наследуются от base.pug — ключевое слово extends.

Скрипты (jQuery в данном примере), а так же блок footer будут автоматически подключены в тех pug-файлах, которые наследуют базовый шаблон с помощью extends (index.pug в нашем примере).

Таким же образом можно, например, подключать фавиконы в базовом шаблоне, чтобы не дублировать их на всех остальных страницах (pug-шаблонах). То есть, вы избегаете копирования и дублирования кода. Зачем копировать, если у всех страниц одна и та же структура? Для этого и нужно наследование шаблонов. На чистом HTML такого точно нельзя сделать.

JavaScript в Pug

В этом шаблонизаторе также можно встраивать JavaScript код и использовать подобные ему конструкции прямо в шаблоне.

Цикл each

- let names = ['Bob', 'Lizza', 'John']

ul
  each name, index in names
    li= index + ': ' + name

Результат:

<ul>
  <li>0: Bob</li>
  <li>1: Lizza</li>
  <li>2: John</li>
</ul>

Цикл while

- let n = 0

ul
  while n < 5
    li= n++

Результат:

<ul>
  <li>0</li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

Конструкция case-when

- let dogs = 3

case dogs
  when 0
    p you have no a dog
  when 1
    p you have a dog
  default
    p you have a dogs

Результат:

<p>you have a dogs</p>

Как вы уже заметили, данный код очень напоминает обычный JavaScript (лишь немного отличается синтаксис). По сути, это он и есть. Вы также можете использовать, например, тернарные выражения:

- let values = []

ul
  each val in values.length ? values : ['Values пуст!']
    li= val

Результат:

<ul>
  <li>Values пуст!</li>
</ul>

Не забывайте, что в шаблонизаторе Pug не нужно использовать фигурные и круглые скобки, как мы делаем это в JS. Со временем вы к этому привыкните.

Конструкция if-else

- let user = { description: 'foo bar baz' }
- let 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 class="user">
  <h2 class="green">Description</h2>
  <p class="description">foo bar baz</p>
</div>

Пример с экранированием текста

p
  != 'Этот код <strong>не</strong> экранирован!'

Результат:

<p>Этот код <strong>не</strong> экранирован!</p>

Для вывода экранированного текста, нужно использовать = вместо !=.

Интерполяция строк

Вставить в строку выражение можно так:

- let message = 'my pug'

p This is #{message}

Результат:

<p>This is my pug</p>

Миксины

Также существует возможность создавать миксины — это по сути JavaScript-функции. Допустим, нужен быстрый способ разместить большое количество статей на сайте:

mixin article(title)
  .article
    .article-wrapper
      h1= title
      if block
        block
      else
        p Текст статьи не добавлен

//- используем миксину

+article('Привет, мир!')

+article('Привет, мир!')
  p Текст статьи
  p Текст статьи

Результат:

<div class="article">
  <div class="article-wrapper">
    <h1>Привет, мир!</h1>
    <p>Текст статьи не добавлен</p>
  </div>
</div>
<div class="article">
  <div class="article-wrapper">
    <h1>Привет, мир!</h1>
    <p>Текст статьи</p>
    <p>Текст статьи</p>
  </div>
</div>

Миксины дают нам возможность использовать компонентный подход в разработке сайта. Обычно для удобства миксины создают в отдельных файлах, а применяют уже в необходимых местах в шаблоне.

На простых примерах я вам показала, основные преимущества верстки с помощью данного шаблонизатора. Мы выяснили, что Pug дает нам огромные возможности, каких нет в обычном HTML. Его применение упрощает процесс разработки и ускоряет работу в несколько раз.

Ссылка на официальную документацию здесь.