HTML: Препроцессор Pug

Теория: Теги и контент

Полный доступ к материалам

Зарегистрируйтесь и получите доступ к этому и десяткам других курсов

Первое, с чем стоит ознакомиться при изучении Pug — синтаксис HTML разметки. Он не очень сложный, но имеет несколько ключевых моментов, которые влияют на компиляцию разметки.

В Pug нет понятий открытия и закрытия тегов, все теги указываются один раз без необходимости их закрывать. Например,

p
div
span
form

выведет

<p></p>
<div></div><span></span>
<form></form>

Это одна из причин, по которой разработчики любят html-препроцессоры. Как часто вы допускали ошибку в отсутствии закрывающего тега? Здесь этого не будет. Обратите внимание, что Pug, при компиляции в HTML, блочные элементы располагает на новых строках, а строчные на той же. Это может немного запутать вначале, но не бойтесь — вам редко понадобится смотреть в итоговый HTML.

Чтобы вложить контент внутрь тегов, возможны три варианта:

Инлайн-стиль. Весь контент располагается сразу после обозначения тега.
Pipe-стиль. Контент можно расположить в несколько строк. Каждая строка начинается с символа |
Блочный стиль. Контент можно располагать в несколько строк. Для этого сразу после тега указывается точка.

p Это текст в «инлайн-стиле». Внутри тега будет весь контент, который вы укажете в строке.

p
  | Контент в Pipe-стиле
  | Каждая строка начинается с вертикальной черты

p.
  Блочный стиль. Здесь можно указывать любое количество строк.
  И для этого не нужно использовать специальные символы.

<p>Это текст в «инлайн-стиле». Внутри тега будет весь контент, который вы укажете в строке.</p>

<p>
  Контент в Pipe-стиле
  Каждая строка начинается с вертикальной черты
</p>

<p>
  Блочный стиль. Здесь можно указывать любое количество строк.
  И для этого не нужно использовать специальные символы.
</p>

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

Вложенность тегов

Для создания вложенности в Pug используются отступы. Их количество может быть любым. Зачастую ориентируются на стандарт отступов в HTML, то есть в два пробела. Например,

section
  p Я — вложенный параграф в секцию
section
  h2 Лучшие товары в нашем магазине
  div
    h3 Товар 1
    p Цена: 55 рублей

<section>
  <p>Я — вложенный параграф в секцию</p>
</section>

<section>
  <h2>Лучшие товары в нашем магазине</h2>
  <div>
    <h3>Товар 1</h3>
    <p>Цена: 55 рублей</p>
  </div>
</section>

Важно: сохраняйте одинаковое количество отступов во всех вложенных элементах. В большинстве случаев Pug правильно поймёт разметку и с разным количеством отступов, но, потенциально, это может привести к ошибкам.

Атрибуты

Добавление атрибутов поначалу может немного запутать. Pug предоставляет несколько возможностей по добавлению атрибутов.

Используя круглые скобки. В таком варианте возможно добавлять все аргументы, в том числе и пользовательские.
Специальный синтаксис для классов и идентификаторов. Они просто обозначаются внутри разметки и похожи на селекторы CSS

section(id='news-container' class='container')
section#news-container.container

<section class="container" id="news-container"></section>
<section class="container" id="news-container"></section>

В разработке для классов используют второй синтаксис, а все другие атрибуты записываются в скобках. Здесь нет выработанных стандартов, но такое использование позволяет сократить код следующим образом: если не указать тег, а сразу написать класс, то Pug автоматически создаст <div> с нужным классом.

.container(data-container='news')
  .row
    .col
      p А вот и текст

<div class="container" data-container="news">
  <div class="row">
    <div class="col">
      <p>А вот и текст</p>
    </div>
  </div>
</div>

Важно: не смешивайте подходы. Если в проекте не указывается div вместе с классом, то стоит придерживаться такого подхода. Всегда важно сохранять общую стилистику. Если же в проекте до вас использовали указание div, то делайте так же.

Интерполяция тегов

Эта техника работы с тегами достаточно редкая, но всегда стоит иметь в виду её наличие. Внутри текста Pug позволяет использовать специальную конструкцию, чтобы добавить тег. Это помогает не дробить текст на несколько разных частей. Например, как вставить тег внутрь такого параграфа?

p.
  Хекслет — практические курсы по программированию.
  Мы помогаем новичкам стать профессиональными программистами, а опытным разработчикам получать новые знания и расти профессионально.

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

p.
  Хекслет — <strong>практические</strong> курсы по программированию.
  Мы помогаем новичкам стать профессиональными программистами, а опытным разработчикам получать новые знания и расти профессионально.

Избежать этого помогает конструкция #[тег контент].

p.
  Хекслет — #[strong практические] курсы по программированию.
  Мы помогаем новичкам стать профессиональными программистами, а опытным разработчикам получать новые знания и расти профессионально.

<p>Хекслет — <strong>практические</strong> курсы по программированию.
  Мы помогаем новичкам стать профессиональными программистами, а опытным разработчикам получать новые знания и расти профессионально.
</p>

Пробельные символы

Самая распространённая проблема при изучении Pug — понимание работы с отступами. На первый взгляд может показаться, что в этом не должно быть проблемы — ставь отступы и они появятся в HTML. И правда, в большинстве случаев Pug перенесёт все пробельные символы так, как они были установлены, но есть особенности. Рассмотрим их на примере текстового содержимого в Pipe-стиле.

Pipe-стиль удобен, если внутри текстового содержимого нужно использовать теги. Например,

div
  | Хотите получить товар?
  | Воспользуйтесь кнопкой
  button Оформить заказ
  | и оставьте свои контакты

Скорее всего, при переводе в HTML, вы ожидаете следующий результат:

<div>Хотите получить товар? Воспользуйтесь кнопкой <button>Оформить заказ</button> и оставьте свои контакты</div>

На самом деле получится такая разметка:

<div>Хотите получить товар? Воспользуйтесь кнопкой<button>Оформить заказ</button>и оставьте свои контакты</div>

Обратите внимание на пробелы вокруг тега <button>, а точнее на их отсутствие — Pug удаляет все пробелы между элементами. В этом примере есть текст и кнопка. Поскольку это два элемента, интерпретатор удаляет пробелы между ними, так как они не несут смысловой нагрузки. Такое поведение допустимо для удаления лишних символов между тегами, но приводит к проблемам при добавлении элемента внутрь текста.

Есть несколько вариантов решения этой проблемы:

Добавить пустую Pipe-строку, которая преобразуется в пробельный символ.
Использовать HTML-мнемонику.
Добавить дополнительные пробелы. Этот вариант возможен, но использовать его не стоит по причинам, о которых мы ещё поговорим.

Пустая Pipe-строка — это разновидность официального «хака» — трюка, позволяющего решить проблему. Любая Pipe-строка должна вернуть некий символ, что играет на руку разработчикам. Если сама строка пустая, то интерпретатор подставит пробельный символ. Это немного загрязняет итоговый код, но выглядит достаточно прилично, чтобы использовать такой способ. Всё, что надо сделать — добавить по пустой строке до и после элемента.

div
  | Хотите получить товар?
  | Воспользуйтесь кнопкой
  |
  button Оформить заказ
  |
  | и оставьте свои контакты

<div>Хотите получить товар? Воспользуйтесь кнопкой <button>Оформить заказ</button> и оставьте свои контакты</div>

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

div
  | Хотите получить товар?
  | Воспользуйтесь кнопкой&nbsp;
  button Оформить заказ
  | &nbsp;и оставьте свои контакты

<div>Хотите получить товар? Воспользуйтесь кнопкой&nbsp;<button>Оформить заказ</button>&nbsp;и оставьте свои контакты</div>

Попробуйте добавить этот HTML-код в ваш файл и посмотрите, как браузер преобразует мнемоники в нужные символы.

Последний способ, который может помочь в примере выше — добавление отдельных пробелов в разметку Pug. Этот способ похож на использование мнемоник, только вместо них добавляется именно символ. Pug не удаляет пробельные символы внутри элемента. Если добавить тысячу пробелов между двумя словами, то интерпретатор бережно перенесёт их в разметку. Поэтому достаточно добавить пробел после фразы «Воспользуйтесь кнопкой» и перед фразой «и оставьте свои контакты». При всей работоспособности этот способ несёт несколько проблем:

Такую разметку тяжело читать. Не всегда возможно сходу разобраться, сколько пробелов стоит перед строкой, а количество пробелов после строки и вовсе не видно.
Большинство редакторов кода автоматически удаляют символы в конце строки, так как в них нет необходимости. В этом случае нет возможности добавить пробел после фразы «Воспользуйтесь кнопкой».

Теперь можете забыть последние два абзаца и сделать вид, что никогда о таком не слышали.

Дополнительное задание

Используя синтаксис Pug, воспроизведите следующую разметку:

<section class="container">
  <div class="col-2">
    <div class="content">
      <h1>О Хекслете</h1>
      <p>Хекслет — практические курсы по программированию. Мы помогаем новичкам стать профессиональными программистами, а опытным разработчикам получать новые знания и расти профессионально.</p>
    </div>
    <div class="side">
      <ul>
        <li><strong>Теория.</strong> Короткая лекция в виде текста или видео. Она основана на задаче, так что в отличие от традиционной академической теории, мы делаем упор на специфическую задачу, которая уже решена умными инженерами и программистами, а затем следуем по их шагам, чтобы понять решение.</li>
        <li><strong>Тест.</strong> Проверка вашего понимания. Нам не важно запоминание фактов, поэтому вопросы теста нацелены на понимание концепции, а не на тренировку памяти.</li>
        <li><strong>Практика.</strong> Упражнения по программированию в реальной среде разработки, доступны через браузер. Не в виде симуляции, не в виде игрушки, а на настоящей машине с базами данных, фреймворками, серверами и другими инструментами.</li>
      </ul>
    </div>
  </div>
</section>

Каталог

Полный список доступных курсов по разным направлениям