標簽
按照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)
編譯結果：
注釋
// 行注釋
//- 編譯后不會顯示出來
//
塊注釋
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 TitleMy 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 SiteMy Site
Welcome to my super lame site.
Copyright (c) foobar
)
