java模板引擎 jade_Jade 模板引擎使用

在 Express 中调用 jade 模板引擎

test.jade

其上的 jade 模板会被解析成

虽然平常我们修改 node.js 代码之后需要重启来查看变化，但是 jade 引擎不在此列，因为是动态加载的，所以我们修改完 jade 文件之后可以直接刷新网页来查看效果的。

如果文本比较长可以使用

或者

两种情况都可以处理为

jade 变量调用

jade 的变量调用有 3 种方式

#{表达式}

=表达式

!=表达式

注意：- 开头在 jade 种属于服务端执行的代码

会被渲染成为

以下代码效果相同

方式1可以自由的嵌入各个地方

方式2返回的是表达式的值

= 与 != 雷同，据说前者会编码字符串(如 变成 <stdio.h>)，后者不会，不过博主没试出来不知道什么情况。

除了直接在 jade 模板中定义变量，更常见的应用是在 express 中调用 res.render 方法的时候将变量一起传递进模板的空间中，例如这样：

调用模板的时候，在 jade 模板中也可以如上方那样直接调用 s 这个变量

if 判断

方式1

结果：

方式2

上述的方式有种省略写法

方式3

使用 Unless 类似于 if 后的表达式加上了 ! 取反

结果

注意这个 unless 是 jade 提供的关键字，不是运行的 js 代码

循环

for 循环

结果

each

同样的 jade 对于循环液提供了省略 “-” 减号的写法

结果

该方法同样适用于 json 数据

结果：

Case

类似 switch 里面的结果，不过这里的 case 不支持case 穿透，如果 case 穿透的话会报错。

结果：

简略写法：

结果：

在模板中调用其他语言

结果：

可重用的 jade 块 (Mixins)

结果：

你也可以给这个重用块制定参数

结果：

Mixins 同时也支持在外部传入 jade 块

结果：

Mixins 同时也可以从外部获取属性。

结果：

模板包含 (Includes)

你可以使用 Includes 在模板中包含其他模板的内容。就像 PHP 里的 include 一样。

index.jade

includes/head.jade

includes/foot.jade

调用 index.jade 的结果：

模板引用 (Extends)

就绝

layout.jade

article.jade

res.render('article') 的结果：

http://html2jade.vida.io/