要使用支持 pug 语法高亮开发工具，推荐使用 code 编辑器，遇到不清楚的语法点或者不知道应该如何表达 html 时，建议直接到 pug 官网上查看。
注释
// 这里的注释会生成到 html 中
//- <!-- 这里的注释会生成到 html 中 -->
//- 多一个 - 字符，是 pug 标记的注释，生成 html 时，会自动忽略
//-
注释也支持缩进...
内联标签
a
img
//- 或
a: img
//- 都会生成 <a><img>
p 这里需要#[em 强调]文字
//- 上面写法可以理解成标签插值
p 这里需要<em>强调</em>文字
p 这里需要
em 强调
| 文字
//- <p>这里需要<em>强调</em>文字。
//- pug
空白字符 解析器会自动忽略标签间/文本间等空白，也因此提供了空白字符
p 在#[em 强调]后面添加一空白字符
p 在
em 强调
| //- 这里多一空 | 行即可
| 后面添加一空白字符
变量/插值
//- 插值
title #{title}
//- 变量
title= title
p 这里需要#[em 强调再#[strong 强调]] 的文字
循环
//- 迭代数组
- var list = [1, 2, 3, 4, 5]
if list.length
ul
//- for 可以替换为 each
//- 个人为了接近 python 语法，使用关键字 for
//- in 后面的值可以是任意表达式
for item, index in list
//- 等号后面需要使用表达式
//- `` => es6 语法
//- ${var} => es6 中字符串插值
li(class=`item-${index}`)= item
//- while
- var index = 1
ul
while index <= 5
li(class=`item-${index}`)= index++
内嵌 JavaScript/CSS 代码 这里使用 . 语法，它支持大块文本放到标签内
script.
console.log('Hello pug!')
style.
body { margin: 16px }
.
这里有大块文本
mixin 代码共用，可以理解成函数
mixin renderlist(classes, list)
div&attributes(attributes)
if block
h1
block
ul
for item in list
li: a(href=item.href)= item.title
- var list = [{title: `hello`, href: `https://google.com/`}]
+renderlist('hot', list)(class="abc")
//- 支持其他 block
| Hot
