Шпаргалка по фреймворку Pug

Pug-cheatsheet-rus.md

Шпаргалка по фреймворку Pug

Pug (ранее известный как Jade) - это шаблонизатор для Node.js, который позволяет писать HTML-код в более лаконичном и читаемом формате. Вот подробная шпаргалка по основным возможностям Pug.

Основы синтаксиса

Теги HTML

// Простой тег
div

// Тег с классом
div.container

// Тег с идентификатором
div#main

// Тег с классом и идентификатором
div.container#main

// Сокращенная запись для div
.container
#main
.container#main

Вложенность

nav
  ul
    li
      a(href="#") Главная
    li
      a(href="#") О нас
    li
      a(href="#") Контакты

Атрибуты

// Простые атрибуты
a(href="https://example.com", target="_blank") Ссылка

// Атрибуты с переменными
- var url = "https://example.com";
a(href=url) Ссылка

// Условные атрибуты
input(type="checkbox", checked=isChecked)

// Атрибуты в стиле JS-объекта
input&attributes({type: "checkbox", checked: true})

Текст и содержимое

Текст внутри тегов

p Это текст внутри параграфа
h1 Заголовок страницы

Многострочный текст

p.
  Это многострочный текст.
  Он будет отображаться как есть,
  сохраняя переносы строк.

// Или с использованием вертикальной черты
p |
  | Это многострочный текст.
  | Он будет отображаться как есть,
  | сохраняя переносы строк.

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

- var name = "Пользователь"
p Привет, #{name}!
p= "Привет, " + name + "!"

Логика и управление потоком

Переменные

- var title = "Моя страница"
- var items = ["Элемент 1", "Элемент 2", "Элемент 3"]
- var isLoggedIn = true

Условные операторы

// if-else
if isLoggedIn
  p Вы вошли в систему
else
  p Пожалуйста, войдите

// unless (if not)
unless isLoggedIn
  p Пожалуйста, войдите

// case-when (switch-case)
case fruit
  when "яблоко"
    p Это яблоко
  when "банан"
    p Это банан
  default
    p Неизвестный фрукт

Циклы

// Цикл each
ul
  each item in items
    li= item

// С индексом
ul
  each item, index in items
    li= index + ": " + item

// Цикл while
- var n = 0
ul
  while n < 5
    li= n++

Миксины (Mixins)

Определение и использование

// Определение миксина
mixin item(title)
  li.item= title

// Использование миксина
ul
  +item("Элемент 1")
  +item("Элемент 2")
  +item("Элемент 3")

Миксины с блоками

mixin card(title)
  .card
    h2= title
    block

+card("Заголовок карточки")
  p Это содержимое карточки
  a(href="#") Подробнее

Миксины с атрибутами

mixin link(href, name)
  a(href=href)&attributes(attributes)= name

+link("https://example.com", "Ссылка")(class="external", target="_blank")

Включение и наследование

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

// Включение файла header.pug
include header

// Включение с путем
include ./partials/header

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

// layout.pug
doctype html
html
  head
    title Мой сайт
    block styles
  body
    header
      block header
        h1 Мой сайт
    main
      block content
    footer
      block footer
        p © 2025 Мой сайт

// page.pug
extends layout

block styles
  link(rel="stylesheet", href="/css/style.css")

block content
  h2 Добро пожаловать!
  p Это страница моего сайта.

block append footer
  p Контакты: [email protected]

Комментарии

// Комментарий, который будет виден в HTML
//- Комментарий, который не будет виден в HTML

//-
  Многострочный комментарий,
  который не будет виден в HTML

Фильтры

// Использование фильтра markdown
:markdown
  # Заголовок
  Это **жирный** текст, а это *курсив*.

// Использование фильтра stylus
style
  :stylus
    body
      padding: 50px
      font: 14px "Lucida Grande", Helvetica, Arial, sans-serif

Встраивание кода JavaScript

- var numbers = [1, 2, 3, 4, 5]
- var sum = numbers.reduce(function(a, b) { return a + b; }, 0)
p Сумма: #{sum}

script.
  document.addEventListener('DOMContentLoaded', function() {
    console.log('Страница загружена');
  });

Практические примеры

Форма входа

.login-form
  h2 Вход в систему
  form(action="/login", method="post")
    .form-group
      label(for="username") Имя пользователя:
      input#username(type="text", name="username", required)
    .form-group
      label(for="password") Пароль:
      input#password(type="password", name="password", required)
    .form-actions
      button(type="submit") Войти
      a(href="/forgot-password") Забыли пароль?

Карточки товаров

mixin product-card(product)
  .product-card
    img.product-image(src=product.image, alt=product.name)
    .product-info
      h3.product-name= product.name
      p.product-description= product.description
      .product-price $#{product.price.toFixed(2)}
      button.add-to-cart(data-id=product.id) Добавить в корзину

.products-grid
  each product in products
    +product-card(product)

Навигационное меню

- var menu = [{title: 'Главная', url: '/'}, {title: 'О нас', url: '/about'}, {title: 'Услуги', url: '/services'}, {title: 'Контакты', url: '/contacts'}]
- var currentUrl = '/about'

nav.main-nav
  ul
    each item in menu
      li(class=currentUrl === item.url ? 'active' : '')
        a(href=item.url)= item.title