关于HTML预处理器Pug的使用文档
Pug的使用
Pug是一款健壮、灵活、功能丰富的HTML模板引擎,专门为 Node.js 平台开发。Pug是由Jade 改名而来。
是一种通过缩进（表示标签间的嵌套关系）的方式来编写代码的过程，在编译的过程中，不需要考虑标签是否闭合的问题。可以加快写代码速度，也为代码复用提供了便捷。
1. 标签
在默认情况下，在每行文本的开头（或者紧跟白字符的部分）书写这个 HTML 标签的名称。使用缩进来表示标签间的嵌套关系，这样可以构建一个 HTML 代码的树状结构。
ul
li Item A
li Item B
li Item C
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
块展开
为了节省空间， Pug 为嵌套标签提供了一种内联式语法。
a: img
<a><img/></a>
自闭合标签
诸如 img, meta, 和 link 之类的标签都是自动闭合的（除非您使用 XML 类型的 doctype）。 您也可以通过在标签后加上 / 来明确声明此标签是自闭合的，但请您仅在明确清楚这是在做什么的情况下使用。
foo/
foo(bar='baz')/
<foo/>
<foo bar="baz" />
2. 属性
标签属性和 HTML 语法非常相似，但它们的值就是普通的 JavaScript 表达式。您可以用逗号作为属性分隔符，不过不加逗号也是允许的。
a(href='baidu.com') 百度
a(class='button' href='baidu.com') 百度
a(class='button', href='baidu.com') 百度
上述代码相当于
<a href="baidu.com">百度</a>
<a class="button" href="baidu.com">百度</a>
<a class="button" href="baidu.com">百度</a>
类可以使用 .classname 语法来定义
ID 可以使用 #idname 语法来定义
如果您的属性名称中含有某些奇怪的字符，并且可能会与 JavaScript 语法产生冲突的话，请您将它们使用 "" 或者 '' 括起来。您还可以使用逗号来分割不同的属性。这种属性的例子有 Angular 2 中经常用到的 [] 和 ()。
div(class='div-class' (click)='play()')
div(class='div-class', (click)='play()')
div(class='div-class' '(click)'='play()')
紧跟着标签写在括号里，用**,**隔开(不加逗号也是允许的)，class和id可以直接写在元素后面，例如#id.class表示的就是一个div标签
第一种情况下，(click) 会被当作函数调用而不是属性名称，这会导致一些稀奇古怪的错误。
第二三种，是一样的效果
变量属性
- var url = 'pug-test.html';
a(href='/' + url) 链接
布尔值属性
在 Pug 中，布尔值属性是经过映射的，这样布尔值（true 和 false）就能接受了。当没有指定值的时候，默认是 true。
input(type='checkbox' checked)
input(type='checkbox' checked=true)
input(type='checkbox' checked=false)
input(type='checkbox' checked=true.toString())
样式属性
style（样式）属性可以是一个字符串（就像其他普通的属性一样）还可以是一个对象，这在部分样式是由 JavaScript 生成的情况下非常方便。
a(style={color: 'red', background: 'green'})
<a style="color:red;background:green;"></a>
类属性
class（类）属性可以是一个字符串（就像其他普通的属性一样）还可以是一个包含多个类名的数组，这在类是由 JavaScript 生成的情况下非常方便。
- var classes = ['foo', 'bar', 'baz']
a(class=classes)
a.bang(class=classes class=['bing'])
它还可以是一个将类名映射为 true 或 false 的对象，这在使用条件性的类的时候非常有用。
- var currentUrl = '/about'
a(class={active: currentUrl === '/'} href='/') Home
a(class={active: currentUrl === '/about'} href='/about') About
&attributes
可以将一个对象转化为一个元素的属性列表
-var a= {'data-foo': 'bar'}
div#foo(data-bar="foo")&attributes(a)
这个对象不一定必须是一个字面值，它同样也可以是一个包含值的对象
- var attributes = {};
- attributes.class = 'baz';
div#foo(data-bar="foo")&attributes(attributes)
3. 纯文本
-
标签加空格
p 这是一个文本 -
以<开头的会被作为纯文本
<html> body p 缩进 body 标签没有意义， p 因为 HTML 本身对空格不敏感。 </html> -
在行前添加|管道符号
p | 管道符号总是在最开头， | 不算前面的缩进。 -
用
script和style内嵌 JavaScript 和 CSS 代码。为此，只需要在标签后面紧接一个点.，在标签有属性的时候，则是紧接在闭括号后面。
script.
var test=1;
if(test)
console.log(1);
else
console.log(2);
也可以在父块内，创建一个“点”块，跟在某个标签的后面。
div
p This text belongs to the paragraph tag.
p.
This text belongs to the div tag.
4. 空格
Pug 保留符合以下条件的元素内的空格：
一行文本之中所有中间的空格；
在块的缩进后的开头的空格；
a ……用一个链接结束的句子
p
一行末尾的空格；
纯文本块、或者连续的管道文本行之间的换行。
p
|第一个空格
|第二个
|文字
5. 代码
用 - 开始一段不直接进行输出的代码
- for (var x = 0; x < 3; x++)
li=x
块代码
-
var list = ["Uno", "Dos", "Tres",
"Cuatro", "Cinco", "Seis"]
each item in list
li= item
6. 分支条件
case 是 JavaScript 的 switch 指令的缩写
- var friends = 10
case friends
when 0
p 您没有朋友
when 1
p 您有一个朋友
default
p 您有 #{friends} 个朋友
像switch一样传递
- var friends = 0
case friends
when 0
when 1
p 您的朋友很少
default
p 您有 #{friends} 个朋友
不同之处在于，在 JavaScript 中，传递会在明确地使用 break 语句之前一直进行。而在 Pug 中则是，传递会在遇到非空的语法块前一直进行下去。
块展开
- var friends = 1
case friends
when 0: p 您没有朋友
when 1: p 您有一个朋友
default: p 您有 #{friends} 个朋友
7. 条件
- var test = 1
if test
p 成功
else if test == 0
p 失败
else
p 其他
Pug 同样也提供了它的反义版本 unless
- var test = 0
if !test
p 成功
- var test = 0
unless test
p 成功
这两条的效果是一样的
8. 嵌入
- var title = "the first title";
h1=title
p #{title}
这两种方法都可以达到字符串嵌入效果， 但在 #{ 和 } 里面的代码也会被求值，转义，并最终嵌入到模板的渲染输出中。
嵌入也可以嵌入pug的标签 用#[ ]
p #[p.class 嵌入]
9. 迭代
Pug 目前支持两种主要的迭代方式： each 和 while。
您也可以使用 for 作为 each 的别称。
这是 Pug 的头等迭代方式，让您在模板中迭代数组和对象更为简便：
ul
each val in [1, 2, 3, 4, 5]
li= val
您还可以在迭代时获得索引值：
ul
each val, index in ['〇', '一', '二']
li= index + ': ' + val
Pug 还让您能够迭代对象中的键值：
ul
each val, index in {1:'一',2:'二',3:'三'}
li= index + ': ' + val
用于迭代的对象或数组仅仅是个 JavaScript 表达式，因此它可以是变量、函数调用的结果，又或者其他的什么东西。
- var values = [1,2,3,4,5];
ul
each val in values.length ? values : ['没有内容']
li= val
- var values = [];
ul
each val in values
li= val
else
li 没有内容
您也可以使用 while 来创建一个循环：
- var n = 0
ul
while n < 4
li= n++
10. 混入 Mixin
混入是一种允许您在 Pug 中重复使用一整个代码块的方法。
//- 定义
mixin list
ul
li foo
li bar
li baz
//- 使用
+list
+list
它们会被编译成函数形式，您可以传递一些参数：
mixin pet(name)
li.pet= name
ul
+pet('猫')
+pet('狗')
+pet('猪')
混入块
把一整个代码块混入
mixin article(title)
.article
.article-wrapper
h1= title
if block
block
else
p 没有提供任何内容。
+article('Hello world')
+article('Hello world')
p 这是我
p 随便写的文章
+article(‘Hello world’)
+article(‘Hello world’)
p 这是我
p 随便写的文章