Jade模板引擎基本语法
来源:互联网 发布:软件质量保证的重要性 编辑:程序博客网 时间:2024/05/22 12:59
《原文地址》
在 Express 中调用 jade 模板引擎jade 变量调用if 判断循环Case 选择在模板中调用其他语言可重用的 jade 块 (Mixins)模板包含 (Includes)模板引用 (Extends)
在 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.jp hello jade jade 模板会被
hello jade
常我们修改 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返回的是表达式的值
= 与 方式3 != 雷同,据说前者会编码字符串,如
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 = 10case 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 = 1case 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’
结果:
Markdown 标题
这里使用的是 MarkDown 格式
可重用的 jade 块 (Mixins)
//- 申明可重用的块
mixin list
ul
li foo
li bar
li baz
//- 调用
+list()
+list()
结果:
- foo
- bar
- baz
- foo
- bar
- baz
你也可以给这个重用块指定参数
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 htmlhtml include includes/headbody h1 我的网站 p 欢迎来到我的网站。 include includes/footincludes/head.jadehead 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)
通过 Extends 可以引用外部的 jade 块,感觉比 include 要好用
layout.jade
doctype htmlhtml 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.jadeextends ../layoutblock 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>
- Jade模板引擎基本语法
- jade模板基本语法
- Jade模板引擎入门教程
- Jade模板引擎入门教程
- Jade模板引擎入门教程
- Node Jade模板引擎
- Jade模板引擎入门教程
- Jade - 模板引擎
- jade模板引擎入门教程
- Jade 模板引擎使用
- Jade 模板引擎使用
- 模板引擎Jade
- Jade模板引擎
- Jade模板引擎教程
- jade模板引擎基础
- node---jade模板引擎
- Jade模板引擎
- velocity模板引擎基本语法
- Pomelo 新手周计划(二)
- IOS UIKit性能优化实战
- git 命令行代码控制流程
- Android自定义控件之百分比圆环进度条
- JAVA笔试题(一)
- Jade模板引擎基本语法
- PhantomJS网页截图
- Android studio如何使用SVN进行版本控制?
- iOS类别和类扩展
- Linux 3.10完全无滴嗒特性详解
- C#中方法、类等的默认访问修饰符~
- River Hopscotch(二分最大值)
- 慕课网----大话PHP设计模式 五(原型模式,装饰器模式,迭代器模式,代理模式)
- Android Studio创建库项目及引用