（28）jade的简单说明
正好我也是刚学，我会尽量结合实例和效果进行说明，如果有多种方式的话，我会尽量都写到。（另外，或许因为版本问题，有些结果和之前是有一定差异的，我写的都是经过我测试，目前最新版本Express所使用的jade）。
注：jade的文件创建，同
①对照的两端代码：
HTML版：
<!DOCTYPE html>
<html>
<head><title>Express</title>
<link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body></body>
</html>
jade版：
doctype html
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
body
②说明：
【1】第一行不解释，直接这么写就行了，知道两行等价就行（等后面就明白意思了）；
【2】<html></html>变为了html；
<head></head>变成了head
head相对于html有缩进，head是html的下级标签；
最简单直接的说明是：html是树形结构，写在jade里，下级标签比上级标签多缩进一格；
如果不懂的继续看下面：
我们知道，html是树形结构的，树的根是html，
然后是head和body两个一级子；
而像title之类，又依赖于head或者body这两个一级子，成为二级子；
然后还有三级子，四级子等，无论如何，下级子肯定会有一个上级的父。
在写HTML的时候，我们为了方便识别，必然是下级子相对于上一级父要多缩进一格。而在jade里，我们也是这么写的；
根节点html不缩进，一级子head和body相对于html缩进一格（2个或者4个空格），二级的title和link标签，是head的子，因此相对于head再缩进一格；
然后依次类推，比如某个div是五级子，因此他缩进5格，而input是这个div的子，因此他缩进6格；
这样就解释了如何缩进的问题了。
【3】我们的标签往往会有属性，比如class，或者id，或者name，或者link那样的rel、href等属性。
在写成jade格式时，这些属性需要紧跟标签，比如link或者是div等；
例如：
<link rel="stylesheet" href="/stylesheets/style.css">
写成jade格式就是：
link(rel='stylesheet', href='/stylesheets/style.css')
用括号将属性包含起来，用逗号分隔不同的属性。
假如我们要写class、id、name属性，那么就这么写：
div(class="aaa",name="bb",id="cc") ppp
其表示：
<divname="bb" id="cc" class="aaa">ppp</div>
当然，我们也可以这么写：
div#cc.aaa(name="bb") ppp
和上面是等价的
于是，我们就会简单的jade模板写法了。
③其他说明：
以下两个和标签写在一起（中间无空格）
# 表示id
. 表示class，
写在括号里的：
class=变量名 可以是一个数组（数组成员需要是字符串）
注释：
// 必须写在单独一行，不能写在块内，输出在html时会以注释形式输出
如：
h1!= title //aaa div First line.
<!--注释内容--> 正常输出，但由于是注释，因此浏览器不会显示
h1!= title <!--这是一个注释--> div First line.
条件注释，如代码
<!--[if IE]> div 注释内容 <![endif]-->
按照说明，条件注释只有在IE10，和以下版本的浏览器才会支持。
比如if IE 8就是指IE8。具体等实际使用的时候再行查看。
输出非转义字符
假如我们需要输出<script><script>这样的字符，方法有
【1】注意，不能省略引号，不然会出错，等号后可以空格也可以不空格；
div= "<script></script>"
【2】同样，空格可有可无（如果是!=的话，<script>将被解释为一个标签，即不显示）
- var html = "<script></script>" div= html
【3】但不能用<script></script>来替代html
- var html = "<script></script>"
div This is #{html}
【4】使用管道“|”符号
-var m ="<script></script>"
p.
| #{m}
应该除此之外还有其他的，不过我还没搞懂#{}，!{}，=，!=之间的区别
注：= 、!=之间的区别见进阶版最后
（32）jade进阶
①较长的jade文本：
假如有一段文本，有两行（或者实际换行了），那么在jade里我们显然是不能写在一行的；
但是又不能简单的另起一行缩进写，因为这样的话，第一个单词会被认为是标签名。如：
div
Welcome to #{title},
this is another row in div
显示结果为：
<div>
<welcome>toExpress,</welcome>
<this>is another row indiv</this>
</div>
显然不是我们想要的。因此这么做：
【方法一】
div Welcome to #{title},
| this is another row in div
每个新起的一行，都以“|”开头，缩进。
显示结果：
<div>Welcometo Express,
this is anotherrow in div</div>
正是我们想要的。
【方法二】
div.
Welcome to #{title},
this is another row in div
注意，标签名后以英文句号为结尾，但是后面不跟任何单词（因此不是类名）；
内容另起一行（不然同行的无法显示）。
②jade的变量调用
【方法一】#{表达式} ——如#{title}
【方法二】=表达式 ——返回表达式的值
【方法三】!=表达式 ——这个的具体效果，参照最后
③if else判断语句
【1】首先，标签的父子兄弟关系，根据if和else的缩进情况决定；
【2】if else的内部语句，是不能由“{}”包住的。
【3】标签相对于if和else要缩进一格；
【4】if和else，可以以“-”开头，外加一个额外的空格（或者直接以if、else为开头）
【5】if和else的缩进程度要相同（同样的空格数量）
【6】unless关键字表示if的判断语句结果取反。假设原判断语句是unless(a==1)，那么相当于if(a!=1)
如代码：（title为“Express”，不包含引号）
【1】例如：
extends layout
block content
h1!= title
div First line.
if ( title == "express" )
div.
Welcome to #{title},
this is another row in div
else
div another line.
div Last line
输出
Express
First line.
another line.
Last line
【2】例如：
extends layout
block content
h1!= title
div First line.
- if ( title == "express" )
div.
Welcome to #{title},
this is another row in div
- else
div another line.
div Last line
输出同上。
例如：
extends layout
block content
h1!= title
div First line.
unless ( title == "express" )
div.
Welcome to #{title},
this is another row in div
else
div another line.
div Last line
输出：
Express
First line.
Welcome to Express, this is another row in div
Last line
需要注意，unless前面不能有“-”，这点和if else不同。
④循环语句
【1】for in语句 ：
在JavaScript中，for in语句是遍历对象的key，然后根据key值来取得value。
在jade不同！他在for后，有两个参数，第一个参数是遍历获取对象的value，第二个参数才是key。简单来说，如代码：
- var obj = {a:"111",b:"222",c:"333",d:"444"};
for value, key in obj
div The key is #{key}, the value is #{value}
这段代码如果在js中，输出的是a、b、c、d这样。但是在jade里，输出的是：
The key is a, the value is 111
The key is b, the value is 222
The key is c, the value is 333
The key is d, the value is 444
说明这里的i是value，而非key。
另外，标签的兄弟关系，根据for的缩进情况而定
【2】for循环
需要在for之前加“-”；
for循环内部的需要缩进，其兄弟关系根据for而定；
可以改变外部变量的值；
如代码：
- var num = 0;
- for(; num < 5; num++)
div num = #{num}
div At last , the num = #{num}
输出内容为：
num = 0
num = 1
num = 2
num = 3
num = 4
At last , the num = 5
【3】each in
each in和for in几乎是相同的，（事实上我没发现有什么不同）
所以略过
【4】case ，when
类似switch case，但具体还是有所不同。如代码：
- var str = "test"
div The word is #{str},now is case begin.
case str
when "a": div first when is a
when "test": div second row is test
when "b"
div third when is b
default: The words is #{str}
div It's end.
结果为：
The word is test,now is case begin.
second row is test
It's end.
特点：
《1》只执行符合条件的一行（c++的switch中，是从匹配那行开始执行到结尾）
《2》两种写法，标签写在when后面的，用冒号加空格分隔；或者另起一行然后缩进写。
《3》匹配失败的情况下，执行default那行的代码
⑤过滤器
没看懂，待补充
⑥Mixin：
简单来说，就是jade里，某一个模块可以复用。比如有一行<div>A line</div>，
如果我想让他连续出现100次，我可以直接使用for循环；
但假如我需要出现30次，然后插入一行代码，再出现10次，再插入一行代码，最后出现60次呢？当然，你可以说可以写3个for循环。
那么假如这块div有100行长呢？复制这100行代码去三个地方么？虽然也可以，但显然不美观。
因此解决办法是，使用mixin，具体看代码：
- var num = 0;
mixin node
div The number in mixin node is #{num++}
+node()
+node()
+node()
div At last, the number in mixin node is #{num++}
解释：
《1》node是一个html块，可以理解为声明一个html块，在声明时是不会被展现在页面上的。
《2》+node() 是调用这个html块，可以理解为将这个html块插入到某一个位置。他会实质的对变量、页面产生影响。
《3》记得缩进！
《4》显然是可以用for循环的，比如这样
-for (var i = 0 ; i < 10;i++) +node()
⑦模板继承和包含
假如，我们有A模板，然后B、C模板都要复用A模板，我们有两种做法：
【1】在A模板里进行判断，然后决定调用B模板还是C模板；
【2】在B模板和C模板里调用A模板。
前者的缺陷在于，假如有不定数个模板要调用A模板，那么A模板会很复杂，所以弃用。
因此，我们通常采用方法【2】。
具体做法有：
【方法1】我们需要把B模板嵌套在A模板中：
使用extends
在layout.jade里有如下代码：
block content
注意：block是关键字，不能被修改，content可以被修改
在index.jade里这么写：
extends layout
block content
div It's index.jade
block content1
div It's another line
第一行表示导入layout.jade
第二行表示将第三行（直到遇到第四行这样的代码之前的所有代码），替换到layout中的block content处。
如果在layout中是content1，那么将会调用第四行，将第五行导入其中。
【方法2】我们需要把A模板放在B模板的某个位置
我们需要调用include来做到
假如我们有这么一段代码：（当然，为了方便，这里写的很简单）
div The block in test
我们将其放在test.jade之中
当需要在其他地方调用时，我们这么写：
div Will include test.jade after this include test
通过这样的显示，成功调用了test.jade中的模板
显示：
Will include test.jade after this
The block in test
注：当在不同路径时，例如在views文件夹（这是当前模板所在文件夹）中的test文件夹下的test1.jade文件，我们这么写就ok了：
include test/test1
⑧缩进的标签：
需求：
<div>
<p>a line with twoindentation</p>
</div>
【方法一】
div: p a line with two indentation
注意，第一个div后面有一个英文冒号，然后空格再是p标签
【方法二】
div
p a line with two indentation
用缩进来控制
⑨输出和非输出：
【1】假如我们需要输出一段，那么就使用普通的方式写代码；
【2】假如我们不需要输出一段代码，例如我们对变量的操作，那么就用“-”开头（不含引号）。写在这里的代码将会被正常执行，但是不会被输出到浏览器上。
⑩转义和非转义
以下每段代码都是这段代码开头：
- var <span style="font-family: Arial, Helvetica, sans-serif;">scr</span> = "<script></script>"
【1】
div= <span style="font-family:Arial, Helvetica, sans-serif;">scr</span>
输出
<script></script>
注意，以上是文字形式
【2】
div!= scr
输出
<script></script>
注意，以上是标签形式
【3】
div scr
输出：
scr
这里是文字scr
总结：
无任何：直接将变量名解释为文字；
有等号：将变量名解释为其值
!=的形式：将变量名解释为其值，然后对其值进行二次解释（解释为html语言）
原文链接（本文CSDN的链接）：http://blog.csdn.net/qq20004604/article/details/51773574
（话说这样的链接真的有用？我不知道喔）
