Jade 模板引擎使用

在 Express 中调用 jade 模板引擎

var express = require(\'express\');

var http = require(\'http\');

var app = express();

app.set(\'view engine\', \'jade\'); // 设置模板引擎

app.set(\'views\', __dirname);  // 设置模板相对路径(相对当前目录)
 
app.get(\'/\', function(req, res) {

    res.render(\'test\'); // 调用当前路径下的 test.jade 模板
})
 
var server = http.createServer(app);
server.listen(3002);

console.log(\'server started on http://127.0.0.1:3002/\');

test.jade

p hello jade

其上的 jade 模板会被解析成

<p>hello jade</p>

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

如果文本比较长可以使用

p

  | foo bar baz

  | rawr rawr

或者

p.

  foo bar baz

  rawr rawr

两种情况都可以处理为

<p>foo bar baz rawr rawr</p>

jade 变量调用

jade 的变量调用有 3 种方式

#{表达式}
=表达式
!=表达式

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

- console.log(\'hello\'); // 这段代码在服务端执行
- var s = \'hello world\' // 在服务端空间中定义变量
p #{s}
p= s

会被渲染成为

<p>hello world</p>

<p>hello world</p>

以下代码效果相同

- var s = \'world\'
p hello #{s}
p= \'hello\' + s

方式1可以自由的嵌入各个地方
方式2返回的是表达式的值
= 与 != 雷同，据说前者会编码字符串（如 <stdio.h> 变成 <stdio.h>），后者不会，不过博主没试出来不知道什么情况。

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

res.render(test, {

    s: \'hello world\'
});

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

if 判断

方式1

- var user = { description: \'我喜欢猫\' }
- if (user.description)

    h2 描述

    p.description= user.description
- else

    h1 描述

    p.description 用户无描述

结果：

<div id="user">

  <h2>描述</h2>

  <p class="description">我喜欢猫</p>

</div>

方式2

上述的方式有种省略写法

- var user = { description: \'我喜欢猫\' }
#user

  if user.description

    h2 描述

    p.description= user.description

  else

    h1 描述

    p.description 用户无描述

方式3

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

- var user = { name: \'Alan\', isVip: false }
unless user.isVip

  p 亲爱的 #{user.name} 您并不是 VIP

结果

<p>亲爱的 Alan 您并不是 VIP</p>

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

循环

for 循环

- var array = [1,2,3]
ul

  - for (var i = 0; i < array.length; ++i) {

    li hello #{array[i]}

  - }

结果

<ul>

    <li>hello 1</li>

    <li>hello 2</li>

    <li>hello 3</li>

</ul>

each

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

ul

  each val, index in [\'西瓜\', \'苹果\', \'梨子\']

    li= index + \': \' + val

结果

<ul>

  <li>0: 西瓜</li>

  <li>1: 苹果</li>

  <li>2: 梨子</li>

</ul>

该方法同样适用于 json 数据

ul

  each val, index in {1:\'苹果\',2:\'梨子\',3:\'乔布斯\'}

    li= index + \': \' + val

结果：

<ul>

  <li>1: 苹果</li>

  <li>2: 梨子</li>

  <li>3: 乔布斯</li>

</ul>

Case

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

- var friends = 10
case friends

  when 0

    p you have no friends

  when 1

    p you have a friend

  default

    p you have #{friends} friends

结果：

<p>you have 10 friends</p>

简略写法：

- var friends = 1
case friends

  when 0: p you have no friends

  when 1: p you have a friend

  default: p you have #{friends} friends

结果：

<p>you have a friend</p>

在模板中调用其他语言

:markdown

  # Markdown 标题

  这里使用的是 MarkDown 格式
script

  :coffee

    console.log \'这里是 coffee script\'

结果：

<h1>Markdown 标题</h1>

<p>这里使用的是 MarkDown 格式</p>

<script>console.log(\'这里是 coffee script\')</script>

可重用的 jade 块 (Mixins)

//- 申明可重用的块
mixin list

  ul

    li foo

    li bar

    li baz
 
//- 调用
+list()
+list()

结果：

<ul>

  <li>foo</li>

  <li>bar</li>

  <li>baz</li>

</ul>

<ul>

  <li>foo</li>

  <li>bar</li>

  <li>baz</li>

</ul>

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

mixin pets(pets)

  ul.pets

    - each pet in pets

      li= pet
 
+pets([\'cat\', \'dog\', \'pig\'])

结果：

<ul class="pets">

  <li>cat</li>

  <li>dog</li>

  <li>pig</li>

</ul>

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

mixin article(title)

  .article

    .article-wrapper

      h1= title

      //- block 为 jade 关键字代表外部传入的块

      if block

        block

      else

        p 该文章没有内容

+article(\'Hello world\')
 
+article(\'Hello Jade\')

  p 这里是外部传入的块

  p 再写两句

结果：

<div class="article">

  <div class="article-wrapper">

    <h1>Hello world</h1>

    <p>该文章没有内容</p>

  </div>

</div>

<div class="article">

  <div class="article-wrapper">

    <h1>Hello Jade</h1>

    <p>这里是外部传入的块</p>

    <p>再写两句</p>

  </div>

</div>

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

mixin link(href, name)

  a(class!=attributes.class, href=href)= name

+link(\'/foo\', \'foo\')(class="btn")

结果：

<a href="/foo" class="btn">foo</a>

模板包含 (Includes)

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

index.jade

doctype html
html

  include includes/head
body

  h1 我的网站

  p 欢迎来到我的网站。

  include includes/foot

includes/head.jade

head

  title 我的网站

  script(src=\'/javascripts/jquery.js\')

  script(src=\'/javascripts/app.js\')

includes/foot.jade

#footer

  p Copyright (c) foobar

调用 index.jade 的结果：

<!doctype html>

<html>

  <head>

    <title>我的网站</title>

    <script src=\'/javascripts/jquery.js\'></script>

    <script src=\'/javascripts/app.js\'></script>

  </head>

  <body>

    <h1>我的网站</h1>

    <p>欢迎来到我的网站。</p>

    <div id="footer">

      <p>Copyright (c) foobar</p>

    </div>

  </body>

</html>

模板引用 (Extends)

就绝

layout.jade

doctype html
html

  head

    title 我的网站

    meta(http-equiv="Content-Type",content="text/html; charset=utf-8")

    link(type="text/css",rel="stylesheet",href="/css/style.css")

    script(src="/js/lib/jquery-1.8.0.min.js",type="text/javascript")

  body

    block content

article.jade

//- extends 拓展调用 layout.jade
extends ../layout
block content

  h1 文章列表

  p 将启动新核电项目

  p 岁月号"船长等人弃船行为等同于杀人

  p 普京疑换肤：眼袋黑眼圈全无 领导人整容疑云

  p 世界最大兔子重45斤长逾1米 1年吃2万元食物

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

<html>

  <head>

    <title>我的网站</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>

    <link type="text/css" rel="stylesheet" href="/css/style.css"></head>

    <script src="/js/lib/jquery-1.8.0.min.js" type="text/javascript"></script>

  </head>

  <body>

    <h1>文章列表</h1>

    <p>忆贾大山 ***:将启动新核电项目</p>

    <p>朴槿惠:"岁月号"船长等人弃船行为等同于杀人</p>

    <p>普京疑换肤：眼袋黑眼圈全无 领导人整容疑云</p>

    <p>世界最大兔子重45斤长逾1米 1年吃2万元食物</p>

  </body>

</html>

http://html2jade.vida.io/