jade是超高性能的node JavaScript模板引擎，有着非常强大的API和大量杰出的特性。它主要针对node的服务端。由于商标的原因，改为Pug，哈巴狗。Pug有它本身的缺点——可移植性差，调试困难，性能并不出色，但使用它可以加快开发效率。
使用缩进来表示标签间的嵌套关系，这样可以构建一个 HTML 代码的 树状结构 语法
ul
li item A
li item B为了节省空间， Pug 嵌套标签提供了一种 内联式 语法
a: imgPug知道哪些元素是自闭合的，为了语法的完整性，也可以通过在标签后加上 / 来明确声明此标签是 自闭合 的
img
img/
input
input/HTML5的 DOCTYPE 书写如下
doctype html当然，也可以自定义一个 doctype 字面值。
doctype html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"Pug 提供了三种常用的方式来放置内容
| 纯文本当然也可以包括 <strong>HTML</strong> 内容。
p
| 但它必须单独起一行。p 纯文本 <strong>HTML</strong> 内容script.
if (usingPug)
console.log(‘请用Pug‘)
else
console.log(‘傻不拉几‘)// 1.
a(href=‘baidu.com‘) 百度
= ‘\n‘
a(class=‘button‘ href=‘baidu.com‘) 百度
= ‘\n‘
a(class=‘button‘, href=‘baidu.com‘) 百度
// 2.
input(
type=‘checkbox‘
name=‘agreement‘
checked
)
// 3.
input(data-json=`
{
"非常": "长的",
"数据": true
}
`)
注意： 未经转义的缓存代码十分危险。必须正确处理和过滤用户的输入来避免跨站脚本攻击
div(escaped="<code>")
div(unescaped!="<code>")input(type=‘checkbox‘ checked)
= ‘\n‘
input(type=‘checkbox‘ checked=true)
= ‘\n‘
input(type=‘checkbox‘ checked=false)
= ‘\n‘
input(type=‘checkbox‘ checked=true.toString())a(style={color: ‘red‘, background: ‘green‘})p
| 如果我不用嵌入功能来书写，一些标签比如
strong strong
| 和
em em
| 可能会产生意外的结果。
p.
如果用了嵌入，在 #[strong strong] 和 #[em em] 旁的空格就会让我舒服多了。效果，前者strong前后无空格，后者有空格。（啦strong啦啦，啦 strong 啦）
// 注释
//- 注释不输出，即不会出现在结果中
//
块注释
继续写块注释ps： 所有以 < 开头的行都会被当作纯文本，因此直接写一个 HTML 风格的条件注释也是没问题的
<!--[if IE 8]>
<html lang="en" class="lt-ie9">
<![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en">
<!--<![endif]-->变量来源有三种，分别是pug文件内部、命令行参数和外部JSON文件。
// 文件内部
-var val = "aaaa";
p= val
// 命令行
pug test.pug -P -w --obj ‘{val: "fldasj"}‘
// 外部json文件
pug test.pug -P -w -O test.json包含（include）功能允许把另外的文件内容插入进来,被包含的如果不是 Pug 文件，那么就只会当作文本内容来引入
//- index.pug
doctype html
html
include includes/head.pug
body
h1 我的网站
p 欢迎来到我这简陋得不能再简陋的网站。
include includes/foot.pug
//- includes/head.pug
head
title 我的网站
script(src=‘/javascripts/jquery.js‘)
script(src=‘/javascripts/app.js‘)
//- includes/foot.pug
footer#footer
p Copyright (c) foobarPug 支持使用 block 和 extends 关键字进行模板的继承。一个称之为“块”（block）的代码块，可以被子模板覆盖、替换。这个过程是递归的。
复制代码
//- layout.pug
html
head
meta(charset="UTF-8")
title 我的站点 - #{title}
block scripts
script(src=‘/jquery.js‘)
body
block content
block foot
#footer
p 一些页脚的内容
//- page-a.pug
extends layout.pug
block scripts
script(src=‘/jquery.js‘)
script(src=‘/pets.js‘)
block content
h1= title
- var pets = [‘猫‘, ‘狗‘]
each petName in pets
include pet.pug
//- pet.pug
p= petName // 或者 p #{petName}值得注意的是，因为这里的 foot 块 没有 被重定义，所以会依然输出“一些页脚的内容”
Pug 允许去替换（默认的行为）、prepend（向头部添加内容），或者 append（向尾部添加内容）一个块。
参考文献： jade
原文：https://www.cnblogs.com/Mobro/p/9376466.html