Pug는 들여쓰기 기반의 간결한 축약 문법을 깔끔한 HTML로 컴파일하는 Node.js 대표 고성능 템플릿 엔진입니다 (구 Jade).
기본 요소 및 속성 정의 (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.
템플릿 상속 및 재사용 Mixin (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.