Краткий справочник

Шпаргалка по шаблонизатору Pug (ранее Jade)

Краткое руководство по Pug (ранее Jade): синтаксис с отступами, атрибуты, наследование шаблонов, циклы и миксины.

· Опубликовано

Pug — это производительный шаблонизатор для Node.js, компилирующий синтаксис на основе отступов в чистый HTML.

Элементы и атрибуты (Elements & Attributes)

doctype html
html(lang="en")
  head
    title My Application
  body
    h1.heading#main-title Welcome
    p Just a simple paragraph of text.
    .container
      | Plain text can be piped

    input(type="text" name="query" placeholder="Search..." autofocus)
    div(style={ color: 'red', background: '#fff' })

Управление потоком и циклы (Control Flow)

// Conditionals
if user.role === 'admin'
  button.danger Delete User
else if user.isLoggedIn
  a(href="/profile") Profile
else
  a(href="/login") Log In

// Loops
ul
  each item, index in items
    li= `${index + 1}: ${item.name}`
  else
    li No items found.

Наследование шаблонов и миксины (Inheritance & Mixins)

// Template inheritance (index.pug)
extends layout.pug

block title
  | Home Page

block content
  h1 Hello World!
// Mixins (reusable macros)
mixin userCard(name, role)
  .card
    h3= name
    span.badge= role
    if block
      .card-body
        block

+userCard('Alice', 'Lead Engineer')
  p Alice leads the core infrastructure team.

Связанные шпаргалки

Связанные темы