Jade模板引擎使用详解
- 在 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.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返回的是表达式的值 = 与 方式3 != 雷同,据说前者会编码字符串,如 <stdio.h> 变成 <stdio.h> 后者不会,不过博主没试出来不知道什么情况。
除了直接在 jade 模板中定义变量,更常见的应用是在 express 中调用 res.render 方法的时候将变量一起传递进模板的空间中,例如这样:
res.render(test, {
s: 'hello world'
});
调用模板的时候,在 jade 模板中也可以如上方那样直接调用 s 这个变量
if 判断
<h2>方式1</h2>
- 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>
<h2>方式2</h2>
上述的方式有种省略写法
- var user = { description: '我喜欢猫' }
#user
if user.description
h2 描述
p.description= user.description
else
h1 描述
p.description 用户无描述
<h2>方式3</h2>
使用 Unless 类似于 if 后的表达式加上了 ! 取反
- var user = { name: 'Alan', isVip: false }
unless user.isVip
p 亲爱的 #{user.name} 您并不是 VIP
结果
<p>亲爱的 Alan 您并不是 VIP</p>
注意这个 unless 是 jade 提供的关键字,不是运行的 js 代码
循环
<h2>for 循环</h2>
- 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>
<h2>each</h2> 同样的 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)
通过 Extends 可以引用外部的 jade 块,感觉比 include 要好用
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>
Jade模板引擎使用详解的更多相关文章
- flask中jinjia2模板引擎使用详解1
在之前的文章中我们介绍过flask调用jinja2模板的基本使用,这次我们来说一下jinjia2模板的使用 Jinja2 在其是一个 Python 2.4 库之前,被设计 为是灵活.快速和安全的. 模 ...
- flask中jinjia2模板引擎使用详解5
接上文 宏 可以理解为函数,即把一些常用的模板片段做好封装,以便于重用,减少工作量和维护难度. 宏的定义很简单: {%macro xxx()%} ##这里写内容 {%endmacro%} 下面引用 ...
- 模板引擎ejs详解
singsingasong.js: const ejs=require('ejs'); ejs.renderFile('./views/singsingasong.ejs', {'name':'sin ...
- Jade 模板引擎使用
在 Express 中调用 jade 模板引擎 jade 变量调用 if 判断 循环 Case 选择 在模板中调用其他语言 可重用的 jade 块 (Mixins) 模板包含 (Includes) 模 ...
- 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 ...
- maven pom文件简单模板和配置详解
https://blog.csdn.net/earbao/article/details/49924943 maven pom文件简单模板和配置详解
- VC 与Matlab混合编程之引擎操作详解
Visual C++ 是当前主流的应用程序开发环境之一,开发环境强大,开发的程序执行速度快.但在科学计算方面函数库显得不够丰富.读取.显示数据图形不方便. Matlab 是一款将数值分析.矩阵计算.信 ...
- Express全系列教程之(十):jade模板引擎
一.前言 随着前端业务的不断发展,页面交互逻辑的不断提高,让数据和界面实现分离渐渐被提了出来.JavaScript的MVC思想也流行了起来,在这种背景下,基于node.js的模板引擎也随之出现. 什么 ...
随机推荐
- 玩转树莓派:OpenHAB的入门(一)
如果你对那些仅仅只是为了控制一盏灯而不得不下载一个特定的App的智能家居感到厌烦,这里有个好消息:OpenHAB可以为你实现最灵活的控制智能家居,OpenHAB是一个成熟的,开源的家庭自动化平台,既可 ...
- Linux C 文件操作函数(~上善止水~)
翻翻笔记,整理一下 C 语言中的文件操作函数 ~~~~~~,多注意细节,maybe 细节决定成败~ 1. fopen /* fopen(打开文件) * * 相关函数 open,fclose * * 表 ...
- ZOJ 3211dream city dp(效率优化)
Dream City Time Limit: 1 Second Memory Limit:32768 KB JAVAMAN is visiting Dream City and he see ...
- 线上服务内存OOM问题定位[转自58沈剑]
相信大家都有感触,线上服务内存OOM的问题,是最难定位的问题,不过归根结底,最常见的原因: 本身资源不够 申请的太多 资源耗尽 58到家架构部,运维部,58速运技术部联合进行了一次线上服务内存OOM问 ...
- 《DSP using MATLAB》 Problem 3.22
代码: %% ------------------------------------------------------------------------ %% Output Info about ...
- test20180922 交错的字符串
题意 分析 这个数据范围容易使人想到折半搜索. 我们将字符串分为前后两部分.如果前半部分中搜得的前缀串为{S1, S2},那么后半部分中搜得的后缀串必须为{rev(S2), rev(S1)},且为有序 ...
- python 判断字符串中字符类型的常用方法
s为字符串 s.isalnum() 所有字符都是数字或者字母 s.isalpha() 所有字符都是字母 s.isdigit() 所有字符都是数字 s.islower() 所有字符都是小写 s.isup ...
- drill 集成开源s3 存储minio
drill 支持s3数据的查询,同时新版的通过简单配置就可以实现minio 的集成 测试使用docker 运行drill 参考 https://www.cnblogs.com/rongfenglian ...
- php 的交互命令行
php 的交互命令行 使用过 python 都知道 python 可以使用交互命令. 如下图: 但是 执行 php 显示这个是什么鬼? 按回车和加分号都没用,这是什么原因? 其实是因为使用 php 交 ...
- linux挂载SD卡
(1)通过#fdisk -l命令确认板子上的linux系统是否识别SD卡 MP805M板子插入SD卡后显示 SD30 slot is without WPmmc1: new high speed SD ...