Express 4.8.x—JADE模版引擎
JADE模版引擎
jade 可以减少编写 html ,下面是个例子:
doctype html html(lang="en") head title= pageTitle script(type='text/javascript'). if (foo) { bar(1 + 5) } body h1 Jade - node template engine #container.col if youAreUsingJade p You are amazing else p Get on it! p. Jade is a terse and simple templating language with a strong focus on performance and powerful features.
下面是转换后的 html
<!DOCTYPE html> <html lang="en"> <head> <title>Jade</title> <script type="text/javascript"> if (foo) { bar(1 + 5) } </script> </head> <body> <h1>Jade - node template engine</h1> <div id="container" class="col"> <p>You are amazing</p> <p> Jade is a terse and simple templating language with a strong focus on performance and powerful features. </p> </div> </body> </html>
基本上jade是以缩进的方式编写,比如:
html head body
转换后的html是:
<html> <head></head> <body></body> </html>
编写网页 javascript 代码
head script(type='text/javascript'). if (foo) { bar(1 + 5) }
转换后的html
<head> <script type="text/javascript"> if (foo) { bar(1 + 5) } </script> </head>
单行内容
p You are amazing
转换后
<p> You are amazing </p>
多行内容
p. Jade is a terse and simple templating language with a strong focus on performance and powerful features.
注意 p.
后面的 .
。
循环
尽管已经支持 JavaScript 原生代码,Jade 还是支持了一些特殊的标签,它们可以让模板更加易于理解,其中之一就是 each
, 这种形式:
each VAL[, KEY] in OBJ
一个遍历数组的例子 :
- var items = ["one", "two", "three"] each item in items li= item
渲染为:
<li>one</li> <li>two</li> <li>three</li>
遍历一个数组同时带上索引:
items = ["one", "two", "three"] each item, i in items li #{item}: #{i}
渲染为:
<li>one: 0</li> <li>two: 1</li> <li>three: 2</li>
遍历一个数组的键值:
obj = { foo: 'bar' } each val, key in obj li #{key}: #{val}
将会渲染为:<li>foo: bar</li>
Jade 在内部会把这些语句转换成原生的 JavaScript 语句,就像使用 users.forEach(function(user){
, 词法作用域和嵌套会像在普通的 JavaScript 中一样:
each user in users each role in user.roles li= role
如果你喜欢,也可以使用 for
:
for user in users for role in user.roles li= role
条件语句
Jade 条件语句和使用了(-
) 前缀的 JavaScript 语句是一致的,然后它允许你不使用圆括号,这样会看上去对设计师更友好一点,
同时要在心里记住这个表达式渲染出的是 常规 JavaScript:
for user in users if user.role == 'admin' p #{user.name} is an admin else p= user.name
和下面的使用了常规 JavaScript 的代码是相等的:
for user in users - if (user.role == 'admin') p #{user.name} is an admin - else p= user.name
Jade 同时支持 unless
, 这和 if (!(expr))
是等价的:
for user in users unless user.isAnonymous p | Click to view a(href='/users/' + user.id)= user.name
模板继承
Jade 支持通过 block
和 extends
关键字来实现模板继承。 一个块就是一个 Jade 的 block ,它将在子模板中实现,同时是支持递归的。
Jade 块如果没有内容,Jade 会添加默认内容,下面的代码默认会输出 block scripts
, block content
, 和 block foot
.
html head h1 My Site - #{title} block scripts script(src='/jquery.js') body block content block foot #footer p some footer content
现在我们来继承这个布局,简单创建一个新文件,像下面那样直接使用 extends
,给定路径(可以选择带 .jade
扩展名或者不带). 你可以定义一个或者更多的块来覆盖父级块内容, 注意到这里的 foot
块 没有 定义,所以它还会输出父级的 "some footer content"。
extends extend-layout block scripts script(src='/jquery.js') script(src='/pets.js') block content h1= title each pet in pets include pet
同样可以在一个子块里添加块,就像下面实现的块 content
里又定义了两个可以被实现的块 sidebar
和 primary
,或者子模板直接实现 content
。
extends regular-layout block content .sidebar block sidebar p nothing .primary block primary p nothing
参看中文详细教程 https://github.com/visionmedia/jade/blob/master/Readme_zh-cn.md
相关文章
- 宜州区红卫学校2023年高一新生录取名单
- 宜州区一中2023年高一新生录取名单
- 红卫学校关于2024届补习生录取的公告
- 走近领袖青春,筑牢信仰之基
- 宜州一中举行“同心喜迎二十大 传承中华优秀传统文化”中国古代文化常识竞赛
- 2023年七年级招生简章
- 凝望经典赏别样人生 创新表达树文化自信——河池市宜州区第一中学高一年级举行课本剧展演活动
- 守护青春,护航成长 ——宜州区一中举行法制教育报告会
- 以赛促教展师风 凝心聚力踏征程 ——宜州区第一中学开展教师教学技能大赛
- 辩以明思,坐而论道 ——记宜州区一中2024届高二辩论赛
- 巧借他山石,精雕“三新”玉 ——我校教师赴湖南考察学习交流活动
- 2023年春季学期“世界地球日”知识讲座成功举办