[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_11":-5},"routes/user.$name.collections",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":16},"topics",[34],"user",{"_20":21,"_13":14,"_22":23,"_24":14,"_25":26,"_27":28,"_29":30,"_31":16,"_32":33},"loginname","derekzhan","page",1,"limit",20,"total","id","11874","avatar_url","https://avatars.githubusercontent.com/u/2375460?v=3","githubUsername","create_at","2014-03-08 03:32:57.639","score",5,"topic_count",0,"reply_count","is_star",false,{"_20":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":33,"_31":49,"_50":51,"_25":52,"_53":54},"7036","author_id","9073","tab","share","content","* 在 Express 中调用 jade 模板引擎\r\n* jade 变量调用\r\n* if 判断\r\n* 循环\r\n* Case 选择\r\n* 在模板中调用其他语言\r\n* 可重用的 jade 块 (Mixins)\r\n* 模板包含 (Includes)\r\n* 模板引用 (Extends)\r\n\r\n在 Express 中调用 jade 模板引擎\r\n-------------------------\r\n\r\n \r\n var express = require('express');\r\n var http = require('http');\r\n var app = express();\r\n app.set('view engine', 'jade'); // 设置模板引擎\r\n app.set('views', __dirname); // 设置模板相对路径(相对当前目录)\r\n\r\n app.get('/', function(req, res) {\r\n res.render('test'); // 调用当前路径下的 test.jade 模板\r\n })\r\n\r\n var server = http.createServer(app);\r\n server.listen(3002);\r\n console.log('server started on http://127.0.0.1:3002/');\r\n \r\n\r\ntest.jade\r\n \r\n p hello jade\r\n \r\n\r\n其上的 jade 模板会被解析成 \r\n \r\n

hello jade

\r\n \r\n\r\n虽然平常我们修改 node.js 代码之后需要重启来查看变化，但是 jade 引擎不在此列，因为是动态加载的，所以我们修改完 jade 文件之后可以直接刷新网页来查看效果的。\r\n\r\n如果文本比较长可以使用\r\n \r\n p\r\n | foo bar baz\r\n | rawr rawr\r\n \r\n或者\r\n \r\n p.\r\n foo bar baz\r\n rawr rawr\r\n \r\n两种情况都可以处理为\r\n \r\n

foo bar baz rawr rawr

\r\n \r\n\r\njade 变量调用\r\n-------------------------\r\n\r\njade 的变量调用有 3 种方式\r\n\r\n* 1) `#{表达式}`\r\n* 2) =表达式\r\n* 3) !=表达式\r\n\r\n\r\n注意：符号 `-` 开头在 jade 中属于服务端执行的代码\r\n\r\n \r\n - console.log('hello'); // 这段代码在服务端执行\r\n - var s = 'hello world' // 在服务端空间中定义变量\r\n p #{s}\r\n p= s\r\n \r\n会被渲染成为\r\n \r\n

hello world

\r\n

hello world

\r\n \r\n\r\n以下代码效果相同\r\n \r\n - var s = 'world'\r\n p hello #{s}\r\n p= 'hello' + s\r\n \r\n方式1可以自由的嵌入各个地方\r\n方式2返回的是表达式的值\r\n= 与方式3 != 雷同，据说前者会编码字符串，如变成 \r\n <stdio.h>\r\n后者不会，不过博主没试出来不知道什么情况。\r\n\r\n除了直接在 jade 模板中定义变量，更常见的应用是在 express 中调用 res.render 方法的时候将变量一起传递进模板的空间中，例如这样：\r\n \r\n res.render(test, {\r\n s: 'hello world'\r\n });\r\n \r\n调用模板的时候，在 jade 模板中也可以如上方那样直接调用 s 这个变量\r\n\r\n\r\nif 判断\r\n-------------------------\r\n\r\n

方式1

\r\n\r\n \r\n - var user = { description: '我喜欢猫' }\r\n - if (user.description)\r\n h2 描述\r\n p.description= user.description\r\n - else\r\n h1 描述\r\n p.description 用户无描述\r\n \r\n结果：\r\n \r\n

\r\n

描述

\r\n

我喜欢猫

\r\n

\r\n \r\n\r\n

方式2

\r\n\r\n上述的方式有种省略写法\r\n \r\n - var user = { description: '我喜欢猫' }\r\n #user\r\n if user.description\r\n h2 描述\r\n p.description= user.description\r\n else\r\n h1 描述\r\n p.description 用户无描述\r\n \r\n\r\n\r\n

方式3

\r\n\r\n使用 Unless 类似于 if 后的表达式加上了 ! 取反 \r\n \r\n - var user = { name: 'Alan', isVip: false }\r\n unless user.isVip\r\n p 亲爱的 #{user.name} 您并不是 VIP\r\n \r\n结果\r\n \r\n

亲爱的 Alan 您并不是 VIP

\r\n \r\n注意这个 unless 是 jade 提供的关键字，不是运行的 js 代码\r\n\r\n循环\r\n-------------------------\r\n\r\n

for 循环

\r\n \r\n - var array = [1,2,3]\r\n ul\r\n - for (var i = 0; i < array.length; ++i) {\r\n li hello #{array[i]}\r\n - }\r\n \r\n结果\r\n \r\n

hello 1
hello 2
hello 3

\r\n \r\n\r\n

each

\r\n同样的 jade 对于循环液提供了省略 “-” 减号的写法\r\n \r\n ul\r\n each val, index in ['西瓜', '苹果', '梨子']\r\n li= index + ': ' + val\r\n \r\n结果\r\n \r\n

0: 西瓜
1: 苹果
2: 梨子

\r\n \r\n该方法同样适用于 json 数据\r\n \r\n ul\r\n each val, index in {1:'苹果',2:'梨子',3:'乔布斯'}\r\n li= index + ': ' + val\r\n \r\n结果：\r\n \r\n

1: 苹果
2: 梨子
3: 乔布斯

\r\n \r\n\r\nCase\r\n-------------------------\r\n\r\n类似 switch 里面的结果，不过这里的 case 不支持case 穿透，如果 case 穿透的话会报错。\r\n\r\n \r\n - var friends = 10\r\n case friends\r\n when 0\r\n p you have no friends\r\n when 1\r\n p you have a friend\r\n default\r\n p you have #{friends} friends\r\n \r\n结果：\r\n \r\n

you have 10 friends

\r\n \r\n\r\n简略写法：\r\n \r\n - var friends = 1\r\n case friends\r\n when 0: p you have no friends\r\n when 1: p you have a friend\r\n default: p you have #{friends} friends\r\n \r\n结果：\r\n \r\n

you have a friend

\r\n \r\n\r\n\r\n在模板中调用其他语言\r\n-------------------------\r\n\r\n \r\n :markdown\r\n # Markdown 标题\r\n 这里使用的是 MarkDown 格式\r\n script\r\n :coffee\r\n console.log '这里是 coffee script'\r\n \r\n结果：\r\n \r\n

Markdown 标题

\r\n

这里使用的是 MarkDown 格式

\r\n \r\n \r\n\r\n可重用的 jade 块 (Mixins)\r\n-------------------------\r\n\r\n \r\n //- 申明可重用的块\r\n mixin list\r\n ul\r\n li foo\r\n li bar\r\n li baz\r\n\r\n //- 调用\r\n +list()\r\n +list()\r\n \r\n结果：\r\n \r\n

\r\n

\r\n \r\n\r\n你也可以给这个重用块指定参数\r\n \r\n mixin pets(pets)\r\n ul.pets\r\n - each pet in pets\r\n li= pet\r\n\r\n +pets(['cat', 'dog', 'pig'])\r\n \r\n结果：\r\n \r\n

\r\n \r\n\r\nMixins 同时也支持在外部传入 jade 块\r\n \r\n mixin article(title)\r\n .article\r\n .article-wrapper\r\n h1= title\r\n //- block 为 jade 关键字代表外部传入的块\r\n if block\r\n block\r\n else\r\n p 该文章没有内容\r\n \r\n +article('Hello world')\r\n\r\n +article('Hello Jade')\r\n p 这里是外部传入的块\r\n p 再写两句\r\n \r\n结果：\r\n \r\n

\r\n

Hello world

\r\n

该文章没有内容

\r\n

Hello Jade

\r\n

这里是外部传入的块

\r\n

再写两句

\r\n

\r\n \r\n\r\nMixins 同时也可以从外部获取属性。\r\n \r\n mixin link(href, name)\r\n a(class!=attributes.class, href=href)= name\r\n \r\n +link('/foo', 'foo')(class=\"btn\")\r\n \r\n结果：\r\n \r\n foo\r\n \r\n\r\n模板包含 (Includes)\r\n-------------------------\r\n\r\n你可以使用 Includes 在模板中包含其他模板的内容。就像 PHP 里的 include 一样。\r\n\r\n`index.jade`\r\n \r\n doctype html\r\n html\r\n include includes/head\r\n body\r\n h1 我的网站\r\n p 欢迎来到我的网站。\r\n include includes/foot\r\n \r\n`includes/head.jade`\r\n \r\n head\r\n title 我的网站\r\n script(src='/javascripts/jquery.js')\r\n script(src='/javascripts/app.js')\r\n \r\n`includes/foot.jade`\r\n \r\n #footer\r\n p Copyright (c) foobar\r\n \r\n调用 index.jade 的结果：\r\n \r\n \r\n \r\n \r\n 我的网站\r\n \r\n \r\n \r\n \r\n

我的网站

\r\n

欢迎来到我的网站。

\r\n \r\n \r\n \r\n \r\n\r\n模板引用 (Extends)\r\n-------------------------\r\n\r\n通过 Extends 可以引用外部的 jade 块，感觉比 include 要好用\r\n\r\n`layout.jade`\r\n \r\n doctype html\r\n html\r\n head\r\n title 我的网站\r\n meta(http-equiv=\"Content-Type\",content=\"text/html; charset=utf-8\")\r\n link(type=\"text/css\",rel=\"stylesheet\",href=\"/css/style.css\")\r\n script(src=\"/js/lib/jquery-1.8.0.min.js\",type=\"text/javascript\")\r\n body\r\n block content\r\n \r\n\r\n`article.jade`\r\n \r\n //- extends 拓展调用 layout.jade\r\n extends ../layout\r\n block content\r\n h1 文章列表\r\n p 习近平忆贾大山李克强:将启动新核电项目\r\n p 朴槿惠:\"岁月号\"船长等人弃船行为等同于杀人\r\n p 普京疑换肤：眼袋黑眼圈全无领导人整容疑云\r\n p 世界最大兔子重45斤长逾1米 1年吃2万元食物\r\n \r\nres.render('article') 的结果：\r\n \r\n \r\n \r\n 我的网站\r\n \r\n \r\n \r\n \r\n \r\n

文章列表

\r\n

习近平忆贾大山李克强:将启动新核电项目

\r\n

朴槿惠:\"岁月号\"船长等人弃船行为等同于杀人

\r\n

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

\r\n

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

\r\n \r\n \r\n \r\n再来搬运一发，原文地址：[http://www.lellansin.com/Jade-模板引擎使用.html](http://www.lellansin.com/jade-%E6%A8%A1%E6%9D%BF%E5%BC%95%E6%93%8E%E4%BD%BF%E7%94%A8.html)","title","Jade 模板引擎使用","last_reply_at","2016-01-15 16:01:45.914","good",true,"top",21,"visit_count",118872,"2014-05-06 09:39:17.603","author",{"_13":55,"_22":56},"lellansin","https://avatars.githubusercontent.com/u/2081487?v=4"]