標簽
按照html的縮進格式
doctype html
html
head
title
body
編譯結果：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body><body>
</html>
文本
p 這是文本
| 這是文本
p.
這是文本
編譯結果：
<p>這是文本</p>
這是文本
<p>這是文本</p>
屬性
設置class名跟id名（默認是div）
p.foo
p#foo
p#foo.foo
.foo
#foo
編譯結果：
<p class="foo"></p>
<p id="foo"></p>
<p id="foo" class="foo"></p>
<div class="foo"></div>
<div id="foo"></div>
其他屬性：
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)
編譯結果：
<a href="google.com">google</a>
<p class="authed"></p>
<input type="checkbox" name="agreement" checked>
<div data-bar="foo" data-foo="bar"></div>
<div class="baz" data-bar="foo"></div>
注釋
// 行注釋
//- 編譯后不會顯示出來
//
塊注釋
<!--可以直接使用注釋代碼-->
case語句
- var num = 3
case num
when 0
p 這是0
when 1
- break
when 3
p 這是#{num}
編譯結果：
<p>這是3</p>
循環
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
編譯結果：
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ol>
條件語句
- 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
編譯結果：
<div id="user">
<h2 class="green">foo</h2>
<p class="foo">this is foo</p>
<p>等同于：if !user.Foo</p>
</div>
mixin 創建重用的代碼
mixin list
ul
li foo
li bar
li baz
+list
+list
編譯以后：
<ul>
<li>foo</li>
<li>bar </li>
<li>baz</li>
</ul>
<ul>
<li>foo</li>
<li>bar </li>
<li>baz</li>
</ul>
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
編譯結果：
<div class="article">
<div class="article-wrapper">
<h3>Hello worle</h3>
<p>NO content provided</p>
</div>
</div>
<div class="article">
<div class="article-wrapper">
<h3>hello pug</h3>
<p>This is my</p>
<p>Amazing article</p>
</div>
</div>
還有：
mixin link(href, name)
a(class!=attributes.class href=href)= name
+link("/foo", "foo")(class="btn")
編譯結果：
<a class="btn" href="/foo">foo</a>
未知參數：
mixin list(id, ...items)
ul(id=id)
each item in items
li= item
+list("my-list",1,2,3,4)
編譯結果：
<ul id="my-list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
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
編譯結果：
<!DOCTYPE html>
<html>
<head>
<title>Article Title</title>
</head>
<body>
<h1>My Article</h1>
</body>
</html>
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
編譯結果：
<!DOCTYPE html>
<html>
<head>
<title>My Site</title>
<script src="/javascripts/jquery.js"></script>
<script src="/javascripts/app.js"></script>
</head>
<body>
<h1>My Site</h1>
<p>Welcome to my super lame site.</p>
<footer id="footer">
<p>Copyright (c) foobar</p>
</footer>
</body>
</html>
