jade模板语法在express中的使用方法
- 在 Express 中调用 jade 模板引擎
- jade 变量调用
- if 判断
- 循环
- Case 选择
- 在模板中调用其他语言
- 可重用的 jade 块 (Mixins)
- 模板包含 (Includes)
- 模板引用 (Extends)
express 中使用ejs 基础教程:https://blog.csdn.net/maindek/article/details/82669720
在 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 bazrawr 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 判断
方式1
- var user = { description: '我喜欢猫' }
- if (user.description)h2 描述p.description= user.description
- elseh1 描述p.description 用户无描述
结果:
<div id="user"><h2>描述</h2><p class="description">我喜欢猫</p>
</div>
方式2
上述的方式有种省略写法
- var user = { description: '我喜欢猫' }
#userif user.descriptionh2 描述p.description= user.descriptionelseh1 描述p.description 用户无描述
方式3
使用 Unless 类似于 if 后的表达式加上了 ! 取反
- var user = { name: 'Alan', isVip: false }
unless user.isVipp 亲爱的 #{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 对于循环液提供了省略 “-” 减号的写法
uleach val, index in ['西瓜', '苹果', '梨子']li= index + ': ' + val
结果
<ul><li>0: 西瓜</li><li>1: 苹果</li><li>2: 梨子</li>
</ul>
该方法同样适用于 json 数据
uleach 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 friendswhen 0p you have no friendswhen 1p you have a frienddefaultp you have #{friends} friends
结果:
<p>you have 10 friends</p>
简略写法:
- var friends = 1
case friendswhen 0: p you have no friendswhen 1: p you have a frienddefault: p you have #{friends} friends
结果:
<p>you have a friend</p>
在模板中调用其他语言
:markdown# Markdown 标题这里使用的是 MarkDown 格式
script:coffeeconsole.log '这里是 coffee script'
结果:
<h1>Markdown 标题</h1>
<p>这里使用的是 MarkDown 格式</p>
<script>console.log('这里是 coffee script')</script>
可重用的 jade 块 (Mixins)
//- 申明可重用的块
mixin listulli fooli barli 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 petsli= 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-wrapperh1= title//- block 为 jade 关键字代表外部传入的块if blockblockelsep 该文章没有内容+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
htmlinclude includes/head
bodyh1 我的网站p 欢迎来到我的网站。include includes/foot
includes/head.jade
headtitle 我的网站script(src='/javascripts/jquery.js')script(src='/javascripts/app.js')
includes/foot.jade
#footerp 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
htmlheadtitle 我的网站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")bodyblock content
article.jade
//- extends 拓展调用 layout.jade
extends ../layout
block contenth1 文章列表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模板语法在express中的使用方法相关推荐
- beego模板语法循环html块,1.69 beego 模板语法指南 - Beego 中文文档
本文讲述 beego 中使用的模板语法,与 go 模板语法基本相同. 基本语法 go 统一使用了 {{ 和 }} 作为左右标签,没有其他的标签符号.如果您想要修改为其它符号,可以参考 模板标签. 使用 ...
- pug模板语法在vue中的使用--HTML的模板引擎
一. 介绍 pug,原名jade,是流行的HTML模板引擎,,最大的特色是使用缩进排列替代成对标签.它简化了HTML的成对标签的写法,使代码更加简洁.开发效率更高,但是同时它也带来了一些副作用:可移植 ...
- express中res.json方法
res.json([body]) 发送一个json的响应 这个方法和将一个对象或者一个数组作为参数传递给res.send()方法的效果相同 你可以使用这个方法来转换其他的值到json,例如null,u ...
- 【Vue】—Vue的模板语法
[Vue]-Vue的模板语法 在template中写HTML时,如果需要渲染变量或者表达式,可以使用{{ }}形式来渲染,这个{{ }}就是模板语法,可以把变量或者表达式的结果渲染出来. 模板语法渲染 ...
- Algs4-1.2.14实现Transaction中的equals()方法
1.2.14用我们对Date中的equals()方法的实现(请见1.2.5.8节中的Date类代码框)作为模板,实现Transaction中的equals()方法. 答: Code: import j ...
- 第4章-模板引擎Jade和Handlebars-4.2.Jade的语法和特性
Jade是Node.js的一个模板引擎,他借鉴了Haml,语法和Haml相似,支持空格缩进. 一.标签 一行开头的任何文件都会被默认解释成HTML标签,Jade的主要优势是为HTML元素同时渲染闭合和 ...
- Express全系列教程之(十):jade模板引擎
一.前言 随着前端业务的不断发展,页面交互逻辑的不断提高,让数据和界面实现分离渐渐被提了出来.JavaScript的MVC思想也流行了起来,在这种背景下,基于node.js的模板引擎也随之出现. 什么 ...
- EJS模板在express中的使用攻略及应用实例(建议收藏)
一.什么是ejs? ejs当中的"E" 代表 "effective",即[高效].EJS 是一套非常简单的模板语言,可以帮你利用普通的 JavaScript 代 ...
- 模板语法-插入文本//模板语法-插入标签//模板语法-双花括号//模板语法-向标签属性中插入数据
模板语法-插入文本 <!DOCTYPE html> <html lang="en"><head><meta charset="U ...
最新文章
- 区块链学习之密码学安全技术(五)
- Java线程详解(4)-线程状态的转换
- DL之LeNet-5:LeNet-5算法的简介(论文介绍)、架构详解、案例应用等配图集合之详细攻略
- Opportunity的status改为lost后,chance of success仍然为100的原因
- 发布一个博客园专用Windows Live Writer代码插件
- 二叉树题目----5 平衡二叉树 AND 根据二叉树创建字符串
- 使用Moles对静态方法做UnitTest
- HTML5汽车轮毂改装网站模板
- linux git 搭建 debian,基于Debian Linux搭建Git服务器
- html区域背景,保存/恢复HTML5 Canvas的背景区域
- 影响历史进程的三只苹果
- 64位 centos 服务器 编译安装 gcc-4.6.2 和 codeviz
- JavaWeb检测注册内容是否在数据库中有相同的内容
- 如何用公式编辑器编辑直角三角形符号
- 卅三先生的工程电磁场讲座.EEm05——边界条件001
- 线上服务应急攻关方法论
- ESP8266 + MAX7219 做一个简易的自动同步的倒计时时钟
- linux 创建线程 execvp,execvp使用实例
- 恺撒密码是古罗马恺撒大帝用来对军事情报进行加解密的算法,它采用了替换方法对信息中的每一个英文字符循环替换为字母表序列中该字符后面的第三个字符,即,字母表的对应关系如下:
- android中slider控件,range-slider-view
热门文章
- IDEA Gradle项目output文件夹里没有resources文件
- 五面拿下阿里飞猪offer,kafka生产者参数配置
- 浅谈grep和正则表达式的亲密接触
- wordpress常用标签调用
- lol无法启动此程序因为计算机丢失,win7系统玩英雄联盟lol提示计算机丢失auncher.dll的解决方法...
- mac airdrop接收的文件放在哪
- CF1474B - Different Divisors
- 用计算机来算出情人节,关于情人节的说说短句子 有关情人节的爱情句子
- 谷歌全球服务宕机的真实原因公布
- 搞笑视频-石家庄某帅哥视频