jade 入门
推荐网站：
node的模板常用的有两个，一个是ejs，另外一个就是jade，相对来说，ejs更容易理解，像原生的html，很多模板都是类似的，但要写的会比较复杂一些。 而jade的好处是更简洁，比如不使用<>之类的标签，而是用缩进，需要运行的js代码之前只有 - 即可，而不需要像ejs的<% %>麻烦，如果要比较的话，可以看到jade和python是类似的，都是追求简洁的模范。
在Express中调用jade模板引擎
var express = require('express');
var app = express();
app.set('views', __dirname);
app.set('view engine', 'jade');
app.get('/', function (req, res) {
res.render('index');
});
app.listen(3000, function () {
console.log("Server is running at localhost:3000");
});
在当前目录下建立jade文件，
doctype html
html
head
title 朱振伟
body
h1 hello
这样在访问3000端口时就可以成功地渲染到页面上了。
标签
在jade中声明文档类型只需要是下面这种简洁的形式：
doctype html
在jade中创建一个列表，只需要是下面的形式：
ul li Item 1 li Item 2 li Item 3
即不需要使用<>来包含标签，不需要闭合标签，不需要配对。 但是，正确的缩进是非常必要的。
建议统一使用4个空格作为缩进标准。当然，只要缩进也是对的。
注释
在jade中注释分为单行注释和多行注释，并且每种注释又分为在编译后显示注释和不显示注释。下面分别说明
单行注释：（在生成的html中不显示）
doctype html html head title 朱振伟 body h1 hello // 这是一行注释，它会输出到html代码中 p 西安交通大学
页面中的显示如下：
单行注释：（不显示在html代码中）
doctype html html head title 朱振伟 body h1 hello //- 这是一行注释，它不会输出到html代码中 p 西安交通大学
html代码如下：
可以看到，是否输出的区别仅仅在于是否有 - 。
多行注释： （输出到html中）
doctype html html head title 朱振伟 body h1 hello // 这是多行注释，它不会输出到html代码中 多行注释要保持同样的缩进 再来一行 p 西安交通大学
多行注释：（不输出到html中）
doctype html html head title 朱振伟 body h1 hello //- 这是多行注释，它不会输出到html代码中 多行注释要保持同样的缩进 再来一行 p 西安交通大学
同样，区别仅在于是否有 - 。
属性
下面是属性最常用的方法，多个属性之间使用逗号隔开。
doctype html html head title 朱振伟 body h1 hello input(type="text",placeholder="search",)
由于class和id是非常常用的属性，所以jade使用sublime中Emmet的用法。
doctype html html head title 朱振伟 body div.header h2#title.font-bigger hello p#content.font-big hello,world
html如下：
文本
单行文本 - 直接在标签后面添加文字
管道文本 - 换行后添加|符号。
多行文本 - 在标签后添加 . 然后换行
doctype html html head title 朱振伟 body p 这是单行文本 p | 这是管道文本 | 这是管道文本 | 这是管道文本 p. 这是多行文本 这是多行文本 这是多行文本 p 这不符合要求 这不符合要求 这不符合要求
效果如下：
但是在后台我们可以看到最后的p是不符合要求的，会报错：
js代码（变量）
- 位于句首，只会在后台执行代码，而不会显示
#{} 会将变量等显示出来
= 会将变量显示，对特殊字符转义
!= 会将变量显示，对特殊字符也不会转义
doctype html html head title 朱振伟 body - var name = "<JohnZhu>"; p #{name} h2= name h3!= name
最终输出如下：
条件语句
doctype html html head title 朱振伟 body - var name = "JohnZhu"; - if (name == "JohnZhu") h2 你的名字 --- JohnZhu - else h2 你的名字？你的名字？
最终在页面渲染的是 你的名字 --- JohnZhu
分支语句
doctype html html head title 朱振伟 body - var name = "JohnZhu"; case name when "JohnZhu" p JohnZhu when "htt" p htt default p it is default
最后显示的是 JohnZhu
循环语句
doctype html html head title 朱振伟 body - var array = [1, 2, 3]; ul -for (var i = 0; i < array.length; i++) { li hello #{array[i]} -}
即使用 - 之后只会在服务器端运行，而不会渲染，最终的输出如下所示：
doctype html html head title 朱振伟 body - var arr = ["hello", "hi", "morning"], n = 0; ul while n < arr.length li= arr[n++]
最终的输出如下：
可以看出while的特殊之处在于它并没有在前面使用 - ，否则会出错。
遍历语句
doctype html html head title 朱振伟 body - var arr = [5, 10, 15]; - for value, index in arr p= value + " " + index
运行结果如下：
Mixins
doctype html html head title 朱振伟 body mixin list ul li foo li bar li foo_bar +list +list
最终的html如下：
当然，这是最简单的混合宏。 更加使用的是使用参数传递 。
doctype html html head title 朱振伟 body mixin list(name) li.pet= name ul +list('dog') +list('cat') +list('pig')
(注意：只要是使用MIXINS， 就必须使用 + 来调用)
效果如下:
此外，还可以使用 ... 来表示数量不定的参数。
doctype html html head title 朱振伟 body mixin list(name,...items) li.pet= name - each item in items li.pet= item ul +list('dog',"1","yellow") +list('cat',"2","blue") +list('pig',"3","orange")
即使用...代表未知的参数，使用items表示这些位置参数的集合， 然后利用jade中的each方法来遍历其中的每一个参数即可。
includes
实现高度复用的一种方式就是将代码片段保存在不同的文件中，当我们需要的时候时候include引入即可。
如： header.jade中的内容如下：
head
title 这一部分是通过include得到的
footer.jade中的内容如下：
div.footer 这是footer, 这是通过include得到的。
index.jade中的内容如下：
doctype html html include ./header.jade body mixin list(name,...items) li.pet= name - each item in items li.pet= item ul +list('dog',"1","yellow") +list('cat',"2","blue") +list('pig',"3","orange") include ./footer.jade
在index.jade中，通过include即可将其他文件的代码引入，达到组合使用的目的。
继承
jade使用extends来继承代码，与include纯粹的引用不同，extends可以修改代码。其中，现在layout.jade中设置block + 名称， 其中block是关键字。layout.jade如下所示：
doctype html
html
head
title MYJADE
body
block content
index.jade继承了layout.jade，内容如下：
extends ./layout.jade
block content
p 这是通过extends得到的。
h4 通过关键词block和名称就可以定义、改写原来的内容
除了上面的继承方式，我们还可以通过prepend和append来决定添加的位置。
如layout.jade的内容如下：
doctype html
html
head
title MYJADE
body
block content
p 这是body下的内容
index.jade的内容如下：
extends ./layout.jade
block prepend content
p 这是通过extends得到的。
h4 通过关键词block和名称就可以定义、改写原来的内容
最终得到的效果如下：
如果说我们需要将index.jade的内容放在最后，使用append即可。
结束