#pug 简介
pug 其实就是一种模板引擎。最终它将渲染成 html 的格式，只不过它比 html 简洁，所以有时候会用 pug 来学 html 代码。近期希望自己总结一下语法，可以时常回顾，而不需要翻看各类介绍。
#pug 用法预览
<!-- pug -->
doctype html
html
head
title = "Hello Pug"
body
p.greetings#people Hello Views!
1
2
3
4
5
6
7
2
3
4
5
6
7
<!-- html -->
<!DOCTYPE html>
<html>
<head>
<title>Hello Pug</title>
</head>
<body>
<p class="greetings" id="people">Hello Views</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
#基本用法
#id,class
div#content
div.content
// 只有div可以缩写成以下形式
#content
.content
1
2
3
4
5
2
3
4
5
#标签里含有其他属性（一行或多行都可以）
input(
type='checkbox'
name='agreement'
id='content'
class='content'
checked
)
1
2
3
4
5
6
7
2
3
4
5
6
7
#变量（有多个 class）
- var classes = ["header-box", "wraper"]
div(class=classes) somecode
// 或者直接写入
div(class="header-box wraper")
1
2
3
4
2
3
4
#文件的引用
script(src="/assets/jquery.min.js")
1
#注释
// 编译成<!-- -->（可以多行注释）
<!-- some words -->
//- 在pug中注释，但是不编译（可以多行注释）
1
2
3
2
3
#代码的重用
#Mixin
使用 mixin 定义一个语法块
mixin list
ul
li foo
li bar
li baz
1
2
3
4
5
2
3
4
5
使用+命令，调用这个 mixin 命令
+list
1
还可以指定参数
mixin pet(name)
li.pet= name
ul
+pet('猫')
+pet('狗')
+pet('猪')
1
2
3
4
5
6
2
3
4
5
6
#高级语法
#pug 的 if,else 语法
#user
if 1 + 1 === 2
p.con hello
else
p.con wrong
1
2
3
4
5
2
3
4
5
#非
unless 1+1 !== 2
p.con hello
1
2
2
#each——for 的别称
ul
each val, index in ['〇', '一', '二']
li= index + ': ' + val
1
2
3
2
3
#while 语法
- var n = 0;
ul
while n < 4
li= n++
1
2
3
4
2
3
4
#不同文件的引用
//- layout.pug
doctype html
html
head
title= title
meta(name="viewport" content="width=device-width, initial-scale=1")
block head
body
include header.pug
block body
include footer.pug
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//- layout-home.pug
extends ./layout.pug
block head
link(rel="stylesheet" href="/home/main.css")
block body
div hello-world
1
2
3
4
5
6
7
2
3
4
5
6
7