Pug 速查表

本文根据 Devhints / Pug 翻译。代码示例及版本范围沿用原文。原文标注更新日期：2017-10-30。

Pug

基础文档

doctype html
html(lang='en')
  h1.class#id(name='hi')
    | This is some text, hello there,
    = name

  - javascript()

元素

div
  | Just a div

.search
  | A div, with class 'search'

h1 A heading with text

h1= page.title

div.class
div.class1.class2
h1.header

属性

input(type='text' name='q' autofocus)

- var authenticated = true
body(class=authenticated ? 'authed' : 'anon')

参见： 属性

注释

// This comment will appear in the HTML

//- This is a silent comment

//-
  Nesting inside a comment creates
  a comment block

参见： 注释

迭代

ul
  each user in users
    li= user

布局

//- page.pug
extends layout.pug

block title
  | hello

block content
  | hello

//- layout.pug
title
  block title
body
  block content

包含 (Includes/partials)

include ./includes/head.pug

include:markdown article.md

参见： 包含 (Includes)

多行文本

p.
  This is text that doesn't need to
  be prefixed by pipes.

script.
  // It's great for raw
  // JavaScript and stuff
  alert('hello')

条件判断

if authenticated
  a(href='/logout') Sign out
else
  a(href='/login') Sign in

参见： 条件判断

混合 (Mixins)

混合 (Mixins)

mixin list
  ul
    ···

+list

Mixin 允许你创建可重用的代码块。参见： 混合 (Mixins)

Mixin 属性

mixin pet(name)
  span.pet= name

+pet('cat')

参见： Mixin 属性

Mixin 代码块

mixin article(title)
  article
    h2.title= title
    block

+article('hello there')
  p Content goes here

参见： Mixin 代码块