标签
按照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>
网友评论