模板引擎之-jade

Posted 2020-08-30 罗Q

##### 首先我们安装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、标签
直接写一个标签名就可以了，标签里面的内容只需要在标签后空一个格写文本。
2、属性
所有的属性都可以写在小括号()里面，并且类名和id名可以用简写的方法.classname和#id
3、注释
单行注释：// ，多行注释，非缓存注释也就是不会编译到html代码中: //- ，块注释也是用: //-，但是需要将这个符号放在需要注释的代码块上方。
4、声明变量和数据传递
`-var course = ‘jade‘`通过`#{course}`拿到变量，并且可以对变量进行运算`#{course.toUpperCase()}` 一般来说都是从后台传递或者json文件传递数据。

##### 二、进阶篇（流程控制）
1、for
```
- var mooc ={course:‘jade‘,level:‘high‘}
- for(var k in mooc)
p=mooc[k]
```
结果是
```
<p>jade</p>
<p>high</p>
```
2、each ，可以遍历对象也可以遍历数组,也可以嵌套循环
```
- var classes = [‘jade‘,‘node‘,‘express‘]
each k in classes
p=k
```
结果是
```
<p>jade</p>
<p>node</p>
<p>express</p>
```
3、 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>
```
4、if-else

##### 三、高级
1、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>
```
2、虽然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的部分放在一个文件中，其他文件继承它们。
3、模板的包含
使用的是**include**关键字，它可以引入静态html和css文件和jade文件。如果后缀名有html或者css就不会对引入的文件进行编译，而是直接引入。