标签
按照html的缩进格式
doctype html
html
head
title
body
编译结果：
文本
p 这是文本
| 这是文本
p.
这是文本
编译结果：
这是文本
这是文本
这是文本
属性
设置class名跟id名（默认是div）
p.foo
p#foo
p#foo.foo
.foo
#foo
编译结果：
其他属性：
a(href="google.com") google
- var foo = true
p(class=foo ? "authed" : "anon")
input(
type="checkbox"
name="agreement"
checked
)
div(data-bar="foo")&attributes({"data-foo": "bar"})
- var attr = {}
- attr.class = "baz"
div(data-bar="foo")&attributes(attr)
编译结果：
google
注释
// 行注释
//- 编译后不会显示出来
//
块注释
case语句
- var num = 3
case num
when 0
p 这是0
when 1
- break
when 3
p 这是#{num}
编译结果：
这是3
循环
ul
- var n = 0
while n < 4
li= n++
ul
- for (var x = 0; x < 3; x++)
li item
ol
- var list = [1,2,3,4,5,6]
each item in list
li= item
编译结果：
- 0
- 1
- 2
- 3
- item
- item
- item
- 1
- 2
- 3
- 4
- 5
- 6
条件语句
- var user = {foo: "this is foo"}
- var bar = baz
#user
if user.foo
h2.green foo
p.foo= user.foo
else if bar
h2.blue foo
p.foo.
User has no foo
else
h2.red foo
p.foo user has no foo
unless user.isFoo
p 等同于：if !user.Foo
编译结果：
foo
this is foo
等同于：if !user.Foo
mixin 创建重用的代码
mixin list
ul
li foo
li bar
li baz
+list
+list
编译以后：
- foo
- bar
- baz
- foo
- bar
- baz
mixin支持传参
mixin article(title)
.article
.article-wrapper
h3= title
if block
block
else
p NO content provided
+article("Hello worle")
+article("hello pug")
p This is my
p Amazing article
编译结果：
Hello worle
NO content provided
hello pug
This is my
Amazing article
还有：
mixin link(href, name)
a(class!=attributes.class href=href)= name
+link("/foo", "foo")(class="btn")
编译结果：
foo
未知参数：
mixin list(id, ...items)
ul(id=id)
each item in items
li= item
+list("my-list",1,2,3,4)
编译结果：
- 1
- 2
- 3
- 4
Extends 扩展
允许模板来扩展一个布局或父模板，它可以覆盖某些预定义内容块。
//- index.pug
extends layout.pug
block title
title Article Title
block content
h1 My Article
//- layout.pug
doctype html
html
head
block title
title Default title
body
block content
编译结果：
Article Title
My Article
Includes
允许将一个pug文件的内容插入到另一个文件。
在要插入的位置：include 文件地址
//- index.pug
doctype html
html
include includes/head.pug
body
h1 My Site
p Welcome to my super lame site.
include includes/foot.pug
//- includes/head.pug
head
title My Site
script(src='/javascripts/jquery.js')
script(src='/javascripts/app.js')
//- includes/foot.pug
footer#footer
p Copyright (c) foobar
编译结果：
My Site
My Site
Welcome to my super lame site.
参考：https://pugjs.org/api/getting-started.html