Jade 模板引擎使用
- 在 Express 中调用 jade 模板引擎
- jade 变量调用
- if 判断
- 循环
- Case 选择
- 在模板中调用其他语言
- 可重用的 jade 块 (Mixins)
- 模板包含 (Includes)
- 模板引用 (Extends)
转载自http://www.lellansin.com/jade-%E6%A8%A1%E6%9D%BF%E5%BC%95%E6%93%8E%E4%BD%BF%E7%94%A8.html
在 Express 中调用 jade 模板引擎
1
2
3
4
5
6
7
8
9
10
11
12
13
|
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); |
test.jade
1
|
p hello jade |
其上的 jade 模板会被解析成
1
|
<p>hello jade</p> |
虽然平常我们修改 node.js 代码之后需要重启来查看变化,但是 jade 引擎不在此列,因为是动态加载的,所以我们修改完 jade 文件之后可以直接刷新网页来查看效果的。
如果文本比较长可以使用
1
2
3
|
p | foo bar baz | rawr rawr |
或者
1
2
3
|
p. foo bar baz rawr rawr |
两种情况都可以处理为
1
|
<p>foo bar baz rawr rawr</p> |
jade 变量调用
jade 的变量调用有 3 种方式
- #{表达式}
- =表达式
- !=表达式
注意:- 开头在 jade 种属于服务端执行的代码
1
2
3
4
|
- console.log('hello'); // 这段代码在服务端执行 - var s = 'hello world' // 在服务端空间中定义变量 p #{s} p= s |
会被渲染成为
1
2
|
< p >hello world</ p > < p >hello world</ p > |
以下代码效果相同
1
2
3
|
- var s = 'world' p hello #{s} p= 'hello' + s |
方式1可以自由的嵌入各个地方
方式2返回的是表达式的值
= 与 != 雷同,据说前者会编码字符串(如 <stdio.h> 变成 <stdio.h>),后者不会,不过博主没试出来不知道什么情况。
除了直接在 jade 模板中定义变量,更常见的应用是在 express 中调用 res.render 方法的时候将变量一起传递进模板的空间中,例如这样:
1
2
3
|
res.render(test, { s: 'hello world' }); |
调用模板的时候,在 jade 模板中也可以如上方那样直接调用 s 这个变量
if 判断
方式1
1
2
3
4
5
6
7
|
- var user = { description: '我喜欢猫' } - if (user.description) h2 描述 p.description= user.description - else h1 描述 p.description 用户无描述 |
结果:
1
2
3
4
|
< div id = "user" > < h2 >描述</ h2 > < p class = "description" >我喜欢猫</ p > </ div > |
方式2
上述的方式有种省略写法
1
2
3
4
5
6
7
8
|
- var user = { description: '我喜欢猫' } #user if user.description h2 描述 p.description= user.description else h1 描述 p.description 用户无描述 |
方式3
使用 Unless 类似于 if 后的表达式加上了 ! 取反
1
2
3
|
- var user = { name: 'Alan', isVip: false } unless user.isVip p 亲爱的 #{user.name} 您并不是 VIP |
结果
1
|
< p >亲爱的 Alan 您并不是 VIP</ p > |
注意这个 unless 是 jade 提供的关键字,不是运行的 js 代码
循环
for 循环
1
2
3
4
5
|
- var array = [1,2,3] ul - for (var i = 0; i < array.length; ++i) { li hello #{array[i]} - } |
结果
1
2
3
4
5
|
< ul > < li >hello 1</ li > < li >hello 2</ li > < li >hello 3</ li > </ ul > |
each
同样的 jade 对于循环液提供了省略 “-” 减号的写法
1
2
3
|
ul each val, index in ['西瓜', '苹果', '梨子'] li= index + ': ' + val |
结果
1
2
3
4
5
|
< ul > < li >0: 西瓜</ li > < li >1: 苹果</ li > < li >2: 梨子</ li > </ ul > |
该方法同样适用于 json 数据
1
2
3
|
ul each val, index in {1:'苹果',2:'梨子',3:'乔布斯'} li= index + ': ' + val |
结果:
1
2
3
4
5
|
< ul > < li >1: 苹果</ li > < li >2: 梨子</ li > < li >3: 乔布斯</ li > </ ul > |
Case
类似 switch 里面的结果,不过这里的 case 不支持case 穿透,如果 case 穿透的话会报错。
1
2
3
4
5
6
7
8
|
- 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 |
结果:
1
|
< p >you have 10 friends</ p > |
简略写法:
1
2
3
4
5
|
- 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 |
结果:
1
|
< p >you have a friend</ p > |
在模板中调用其他语言
1
2
3
4
5
6
|
:markdown # Markdown 标题 这里使用的是 MarkDown 格式 script :coffee console.log '这里是 coffee script' |
结果:
1
2
3
|
< h1 >Markdown 标题</ h1 > < p >这里使用的是 MarkDown 格式</ p > < script >console.log('这里是 coffee script')</ script > |
可重用的 jade 块 (Mixins)
1
2
3
4
5
6
7
8
9
10
|
//- 申明可重用的块 mixin list ul li foo li bar li baz //- 调用 +list() +list() |
结果:
1
2
3
4
5
6
7
8
9
10
|
< ul > < li >foo</ li > < li >bar</ li > < li >baz</ li > </ ul > < ul > < li >foo</ li > < li >bar</ li > < li >baz</ li > </ ul > |
你也可以给这个重用块制定参数
1
2
3
4
5
6
|
mixin pets(pets) ul.pets - each pet in pets li= pet +pets(['cat', 'dog', 'pig']) |
结果:
1
2
3
4
5
|
< ul class = "pets" > < li >cat</ li > < li >dog</ li > < li >pig</ li > </ ul > |
Mixins 同时也支持在外部传入 jade 块
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
mixin article(title) .article .article-wrapper h1= title //- block 为 jade 关键字代表外部传入的块 if block block else p 该文章没有内容 +article('Hello world') +article('Hello Jade') p 这里是外部传入的块 p 再写两句 |
结果:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
< 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 同时也可以从外部获取属性。
1
2
3
4
|
mixin link(href, name) a(class!=attributes.class, href=href)= name +link('/foo', 'foo')(class="btn") |
结果:
1
|
< a href = "/foo" class = "btn" >foo</ a > |
模板包含 (Includes)
你可以使用 Includes 在模板中包含其他模板的内容。就像 PHP 里的 include 一样。
index.jade
1
2
3
4
5
6
7
|
doctype html html include includes/head body h1 我的网站 p 欢迎来到我的网站。 include includes/foot |
includes/head.jade
1
2
3
4
|
head title 我的网站 script(src='/javascripts/jquery.js') script(src='/javascripts/app.js') |
includes/foot.jade
1
2
|
#footer p Copyright (c) foobar |
调用 index.jade 的结果:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!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
1
2
3
4
5
6
7
8
9
|
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
1
2
3
4
5
6
7
8
|
//- extends 拓展调用 layout.jade extends ../layout block content h1 文章列表 p 忆贾大山 :将启动新核电项目 p 朴槿惠:"岁月号"船长等人弃船行为等同于杀人 p 普京疑换肤:眼袋黑眼圈全无 领导人整容疑云 p 世界最大兔子重45斤长逾1米 1年吃2万元食物 |
res.render('article') 的结果:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
< 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模板引擎学习笔记(WebsStorm9.0.3+ nodejs+express+jade)
jade环境搭建 jade标签写法 jade注释 jade添加类名.id.属性 jade添加脚本,css jade变量 jade多行文本显示 jade流程代码:for,each,while jade流 ...
- Express框架之Jade模板引擎使用
日期:2018-7-8 十月梦想 node.js 浏览:2952次 评论:0条 前段时间讲说了ejs模板引擎,提到了jade的效率等等问题!今天在这里简单提一下jade的使用方式!结合expr ...
- Jade模板引擎使用详解
在 Express 中调用 jade 模板引擎 jade 变量调用 if 判断 循环 Case 选择 在模板中调用其他语言 可重用的 jade 块 (Mixins) 模板包含 (Includes) 模 ...
- Express全系列教程之(十):jade模板引擎
一.前言 随着前端业务的不断发展,页面交互逻辑的不断提高,让数据和界面实现分离渐渐被提了出来.JavaScript的MVC思想也流行了起来,在这种背景下,基于node.js的模板引擎也随之出现. 什么 ...
- nodejs jade 模板 引擎的使用方法
1.新建项目 2.使用模板引擎 app.set('view engine','jade'); 3.使用render渲染一个视图 res.render(用于指定需要被渲染的视图(必选),本地变量(可选) ...
- jade模板引擎
最近用jade写了点东西,觉得挺有趣的,是一个有意思的模板引擎. 比如说,像这样的结构的html <span> <i class="icon-edit">& ...
- Express开发实例(2) —— Jade模板引擎
前一篇通过helloworld,简单介绍了Express中的开发,本篇继续深入的学习express的模板. 关于Jade的用法,网上有很多,本篇参考:Jade语法 安装相关模块 在实验代码前,应该先安 ...
- 初次入坑jade模板引擎(一)
最近由于工作需要全栈开发,nodejs做后端,在写一个后台管理系统的时候,我一直在考虑用怎样的方式去写,尝试过依然采用前后端分离的结构.使用json数据进行数据交互的模式,但是尝试过才知道,真的很花时 ...
- Jade模板引擎学习(一)安装及基本语法
Jade是一款高性能简洁易懂的模板引擎,Jade是Html的Javascript实现,在服务端(NodeJS)及客户端均有支持. 一.功能 客户端支持 超强的可读性 灵活易用的缩进 块扩展 代码默认 ...
随机推荐
- Android Hook技术
原文:http://blog.csdn.net/u011068702/article/details/53208825 附:Android Hook 全面入侵监听器 第一步.先爆项目demo照片,代码 ...
- 看完这篇让你对各种前端build工具不再懵逼!
本文原标题为:我终于弄懂了各种前端build工具 译者:@Christian 译文:https://www.sdk.cn/news/5412 原文:https://medium.freecodecam ...
- 将字符串中的URL 解析,获取内容
parse_str() : parse_str("name=Bill&age=60"); echo $name."<br>";//Bill ...
- 基于redis 实现分布式锁的方案
在电商项目中,经常有秒杀这样的活动促销,在并发访问下,很容易出现上述问题.如果在库存操作上,加锁就可以避免库存卖超的问题.分布式锁使分布式系统之间同步访问共享资源的一种方式 基于redis实现分布式锁 ...
- 获取iis网站信息
1.获取网站的url地址 var ht = GetWebPathAndWebName(""); var rootUrl = ht["webaddr"].ToSt ...
- xp 下查看进程指令
xp 下快速查看进程及关联 exe 的指令,刚发现,还没有测试 win7 和 win10 支持不支持. wmic process where creationclassname="win32 ...
- C#调用百度高精度IP定位API通过IP获取地址
API首页:http://lbsyun.baidu.com/index.php?title=webapi/high-acc-ip 1.申请百度账号,创建应用,获取密钥(AK) http://lbsyu ...
- 【Beta】Scrum06
Info 时间:2016.12.15 21:35 时长:25min 地点:大运村1号公寓5楼楼道 类型:日常Scrum会议 NXT:2016.12.17 21:30 Task Report Name ...
- 前端CDN公共库
通过使用公共的CDN脚本和样式库,可以在一定程度上加速访问.节省服务器流量.提升你的网站用户体验.本文将介绍国内比较常用的几种免费的CDN库,包括百度.新浪.360.又拍和七牛等. 百度CDN公共库 ...
- Android 热修复方案Tinker
转自:http://blog.csdn.net/l2show/article/details/53925543 Android 热修复方案Tinker(一) Application改造 Android ...