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
相关文章
- JS小技巧集锦(不断更新...)
- nodeJs基础教程系列(8)——流
- nodeJs基础教程系列(9)——CO库
- nodeJs基础教程系列(4)——CommonJS规范
- nodeJs基础教程系列(7)——generator
- [转]让你的 Node.js 应用跑得更快的 10 个技巧
- Node.js API实例——Node.js 控制台
- Node.js 入门
- nodeJs基础教程系列(3)——建立githubs项目
- nodeJs基础教程系列(1)——安装Node.js
- nodeJs基础教程系列(6)——Promise 模式的Q库
- Atom 更为先进的文本代码编辑器 - 由 Github 打造的下一代编程开发利器