Referencia rápida

Hoja de trucos del motor de plantillas Pug

Guía de referencia rápida para Pug (antes Jade): sintaxis de indentación, atributos, herencia de plantillas, bucles y mixins.

· Publicado

Pug es un motor de plantillas de alto rendimiento para Node.js que compila código basado en indentación a HTML limpio.

Elementos y atributos (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 de flujo e iteración (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.

Herencia de plantillas y mixins (Inheritance)

// 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.

Hojas de trucos relacionadas

Temas relacionados