模板引擎之-jade

##### 首先咱们安装jade模板引擎并编译
`npm install jade --global`
在项目文件夹下建立一个`index.jade`文件，而且写入
```
doctype
html
head
title imooc jade study
body
h1 imooc jade study

```
而后在命令行下执行`jade -P index.jade `参数大写P表示格式化的编译jade文件。
##### 1、基础篇
一、标签
直接写一个标签名就能够了，标签里面的内容只须要在标签后空一个格写文本。
二、属性
全部的属性均可以写在小括号()里面，而且类名和id名能够用简写的方法.classname和#id
三、注释
单行注释：// ，多行注释，非缓存注释也就是不会编译到html代码中: //- ，块注释也是用: //-，可是须要将这个符号放在须要注释的代码块上方。
四、声明变量和数据传递
`-var course = 'jade'`经过`#{course}`拿到变量，而且能够对变量进行运算`#{course.toUpperCase()}` 通常来讲都是从后台传递或者json文件传递数据。

##### 2、进阶篇（流程控制）
一、for
```
- var mooc ={course:'jade',level:'high'}
- for(var k in mooc)
p=mooc[k]
```
结果是
```
<p>jade</p>
<p>high</p>
```
二、each ，能够遍历对象也能够遍历数组,也能够嵌套循环
```
- var classes = ['jade','node','express']
each k in classes
p=k
```
结果是
```
<p>jade</p>
<p>node</p>
<p>express</p>
```
三、 while
```
- var n = 0
ul
while n <= 4
li= n++
```
结果是
```
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
```
四、if-else

##### 3、高级
一、mixin
首先定义一个名为study的mixin，而后再用+mixin名使用。
```
mixin study(name,course)
p #{name}
ul
each item in course
li=item
+study('luo',['jade','node'])
```
结果是
```
<p>luo</p>
<ul class="course">
<li>jade</li>
<li>node</li>
</ul>
```
二、虽然mixin可让咱们的代码减小重复，可是只能在单个文件中使用，因此jade又提供了**继承**的方法解决子文件和父文件之间的代码复用的问题。
使用block关键字，表示须要复用的代码块
```
block des
p no no no no
block des
```
结果是
```
<p>no no no no </p>
<p>no no no no </p>
```
使用extend关键字能够实现继承，一般能够将header和footer的部分放在一个文件中，其余文件继承它们。
三、模板的包含
使用的是**include**关键字，它能够引入静态html和css文件和jade文件。若是后缀名有html或者css就不会对引入的文件进行编译，而是直接引入。