Пуги - идеальные собаки для вашей семьи

Шаблонизатор Pug (ранее известный как Jade)

Является одним из самых популярных инструментов для создания HTML-разметки в экосистеме Node.js. Используя Pug, вы можете создавать чистый и эффективный код без избыточных тегов, что позволяет сэкономить время и упростить процесс разработки.

Основной отличительной особенностью Pug является его синтаксис

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

Пример 1:


doctype html
html
  head
    title My Pug Page
  body
    h1 Hello, Pug!
    p This is a paragraph created using Pug.

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

Пример 2:


ul
  each user in users
    li= user.name

В этом примере мы используем цикл each для создания списка ul с элементами li, содержащими имена пользователей из массива users. Знак = используется для передачи значений переменной в разметку.

Пример 3:


- var name = "John"
- var age = 25

p #{name} is #{age} years old.

В этом примере мы объявляем переменные name и age, а затем используем их значения в элементе p с помощью символа #. Результатом будет "John is 25 years old."

Pug также поддерживает условные выражения, миксины (многоразовые блоки кода), импорт других файлов и многое другое. Это позволяет более эффективно организовывать и структурировать ваш код.

Для использования Pug вам понадобится установить его через npm, добавить подходящий скрипт в ваш пакетный файл и использовать компилятор Pug для преобразования ваших файлов Pug в HTML. Например, вы можете использовать команду pug mytemplate.pug -o dist, чтобы скомпилировать файл mytemplate.pug и сохранить результат в папке dist.