说明
Pug原名不叫Pug，是大名鼎鼎的jade，后来由于商标的原因，改为Pug，哈巴狗。其实只是换个名字，语法都与jade一样。丑话说在前面，Pug有它本身的缺点——可移植性差，调试困难，性能并不出色，但使用它可以加快开发效率。本文将详细介绍pug模板引擎。
安装
1.sudo npm install jade -g
2.sudo yarn global add jade
常用命令
普通编译，会在同目录下生成编译后的 test.html 文件
jade test.jade
# --pretty | -P (大写) 美化输出的 html 使之带有缩进等
jade -P test.jade
# --out | -o <dir> 将编译后的 html 输出到指定文件夹
jade -P test.jade --out ./output
# --obj | -O <path|str> 向 jade 模板中传递变量，需要传递一个 json 或者一个 json 文件的路径
jade -P --obj '{testName: "this is tetsName"}' test.jade
jade -P -O ./config.json test.jade
# --watch | -w 监听文件变化，自动重新编译
jade -P -w test.jade
标签
- jade 中的标签不再含有 html 中的 尖括号，直接写标签名即可，无论单双标签，只写以这个标签名；
- 标签间嵌套关系使用缩进加换行实现；
-
标签后第一个空格后边的内容会被编译成标签内的文本内容
doctype html
html(lang="en")head title Document // 通过换行加缩进实现标签嵌套 body p 标签后的文本 // 通过 ‘:’ 实现行内的嵌套 p: a 文本 // 自定义的标签加上 ‘/’ 表示自闭和标签（html 默认自闭和标签可以不用） foo/
属性
一般属性要添加在紧挨标签的括号里() ，多个属性用 , 隔开，() 内实际上是一个 javascript 的环境，可以在这里进行基础的运算
body
// ‘=’ 链接属性和值，多个属性用 ‘,’ 隔开
p: a(href="www.baidu.com", target="_blank") 链接
// 属性中可以做基础的 javascript 计算
p
- var link = 'www.baidu.com'
a(href=link.toUpperCase()) 链接
// 属性多的时候可以换行，这个时候可以不用逗号分隔
p: input(
type="checkbox"
name="chexkbox"
checked=true
)
p(content="<br/>") 伪代码 ‘=’ 默认是转义的
p(content!="<br/>") 伪代码 '!=' 表示不转义
class 与 style 属性
body
// 使用 '.' 链接标签和类名或者多个类名
p.p-class.p-class-add 内容
// 也可以定义变量然后，将其通过普通方式传入，可以传入数组
- var classes = ['p-class', 'p-class-1', 'p-class-2'];
p(class=classes)
// 多个 class 属性，值会累加
p.class-name(class="class-1", class=classes)
// style 属性的值可以是一个字符串也可以是一个样式对象
p(style={color: 'red', background: 'blue'})
p(style="color: red;background: blue;")
文本
body
p 这是单行的文本
p 这是多行文本
| 使用‘|’区分多行文本
| 注意同样要使用缩进
div.
'.'用来标记一块文本
可以是多行的，在这里可以
<a>写 html 标签</a>
script.
// 在这里直接写 javascript 代码
console.log('first line');
console.log('second line');
console.log('last line');
变量
- -var 用于声明变量
- {variablesName} 用来使用变量，输出的变量数据会被转码
- {variablesName} 通用用来使用变量，但是输出的变量数据不会被转码
- tagName=variablesName 标签名等于变量名，与 #{variablesName}一样，将转码后的变量值赋值为标签内容，区别在于，如果变量未定义 #{} 会返回 undefined；= 会将其忽略
- tagName!=variablesName 与 tagName=variablesName 类似，除了不转义变量值
- 如果要输出 #{} 或者 !{} 可以再其前面加上反斜杠 #{xxx} | !{xxx}