Jade是一个基于javascript，可以运行与node与浏览器环境的一个前端模板引擎，而在对它进行学习了解后，作一番简介兼对自我的复习。

项目github主页：

当然更好的介绍文章就是官方文档了。

 

tag标签

通过缩进关系，代替以往html的层级包含关系，如一个简单的静态页面可以表达为

(与emmet类比一下可以帮助理解)

内联书写层级

a: img

（通过分号区分元素内内容

自闭合标签

img、meta、link 等自闭合会自动识别
可通过在标签后添加 / 强制输出自闭合元素

style属性

style属性可以想上面的格式传入一个文本包含所有样式内容，或者传入一个类似js中的对象，达到同样的效果

 

变量

使用 “=” 号输出变量值到元素内

通过 #{variable} 插入相应的变量值

 

属性

html 元素属性通过在标签右边通过括号包含（此处逗号可拆分为多行书写属性的格式）

也支持表达式进行属性的判断：

如果是布尔型的属性，jade会自动根据当前doctype输出适合的格式，对比如下：

 

文本

• 通过在文字前面添加竖线符号“|”可让 jade 原样输出内容
• 在html标签标记后面通过空格隔开文本内容
• 在html标签标记后通过添加英文句号“.”添加块级文本

上面3个形式的方式效果为：

 

注释

可以通过双斜杠进行注释，jade有3种注释方式，可以分别对应输出html注释、不输出html注释、块级html注释，如图：

 

迭代

jade支持通过js语法形式运行一些表达式，最简单常用的就一个迭代可以表达为：

 

条件判断

jade 支持 if 、case条件判断，类比js的相应语法：

 

Filter

支持其他不同语法的代码插入。（需要安装有相应的包）

比如我们可以在一个段落下插入一段markdown文本：

 

Mixins

如果我们以前有接触过sass等预编译样式语言的话，也就理解了这个的用法，方法十分类似，通过定义部分可以公用的代码之后，适当的设置可传入参数，可以实现代码大程度上的复用。
定义和使用的语法也比较简单：

可以参考官方说明文档，重点可以着重理解最后2种调用方式。

 

Extends

layout.jade 文件:

index.jade 文件:

默认继承方式为覆盖原内容，还可选 prepend 在代码前插入， append 在代码后插入，

可以省略 block 写为：

 

Include

index.jade 文件

head.jade 文件

包含文件