Pug 语法备忘

要使用支持 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

不支持动态引入(dynamic include) pug 文件