Γρήγορη αναφορά

Pug Template Engine Cheat Sheet

Συνοπτικός οδηγός για το Pug (πρώην Jade): σύνταξη εσοχών, χαρακτηριστικά, κληρονομικότητα προτύπων και επαναχρησιμοποιήσιμα mixins.

· Δημοσιεύτηκε

Το 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.

Κληρονομικότητα Προτύπων και 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.

Σχετικά Cheat Sheets

Σχετικά θέματα