express+html引擎,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.

下面是转换后的 htmlhtml>

Jade

if (foo) {

bar(1 + 5)

}

Jade - node template engine

You are amazing

Jade is a terse and simple

templating language with a

strong focus on performance

and powerful features.

基本上jade是以缩进的方式编写，比如：html

head

body

转换后的html是：

编写网页 javascript 代码head

script(type='text/javascript').

if (foo) {

bar(1 + 5)

}

转换后的html

if (foo) {

bar(1 + 5)

}

单行内容p You are amazing

转换后

You are amazing

多行内容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

渲染为:

onetwothree

遍历一个数组同时带上索引：items = ["one", "two", "three"]

each item, i in items

li #{item}: #{i}

渲染为:

one: 0two: 1three: 2

遍历一个数组的键值：obj = { foo: 'bar' }

each val, key in obj

li #{key}: #{val}

将会渲染为：

foo: bar

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