Jade中文教程

Jade 是一个高性能的模板引擎,它深受Haml影响,它是用javascript实现的,并且可以供node使用。

项目中用到了Jade模板,现将jade总结下,踩在前人的肩膀上,登高望远!

先来看个例子

jade.jade

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
doctype html
html(lang="en")
head
- var name = 'Jade'
title= name
meta(charset="utf-8")
link(rel="stylesheet", type="text/css" href="/stylesheets/style.css")
body
h1 Jade - node template engine
#container.col
if name === 'Jade'
p #{name} is very cool
else
p Get on Jade
footer
p.
Jade is a terse and simplae
templating language with a
strong focus on performance
and powerful features.

渲染后的jade.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
<title>Jade</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="/stylesheets/style.css">
</head>
<body>
<h1>Jade - node template engine</h1>
<div id="container" class="col">
<p>Jade is very cool</p>
</div>
<footer>
<p>
Jade is a terse and simplae
templating language with a
strong focus on performance
and powerful features.
</p>
</footer>
</body>
</html>

Tags

jade, 以空格或缩进和换行来组织代码,默认,每行开始的第一个单词代表一个标签,可以是自定义的标签
jade:

1
2
3
h1 h1 tag
custom custom tag
img(src="/images/logo.png", alt="")

渲染后HTML:

1
2
<h1>h1 tag</h1>
<custom>custom tag</custom><img src="/images/logo.png" alt="">

使用缩进能进行标签嵌套:
jade:

1
2
3
4
5
ul
li Item A
a(href="javascript:;") a link
li Item B
li Item C

渲染后html:

1
2
3
4
5
<ul>
<li>Item A<a href="javascript:;">a link</a></li>
<li>Item B</li>
<li>Item C</li>
</ul>

Attributes

属性必须用括号包起来,多个属性用逗号分隔,class 和 id,可以直接用 (.) 和 (#) 而不需要放到括号内;
jade:

1
2
div.container.flow#container Content
a(class="btn", href="javascript:;", title="submit") Button

html:

1
2
<div id="container" class="container flow">Content</div>
<a href="javascript:;" title="submit" class="btn">Button</a>

对于 class 和 id, 还可以省略 tag 而直接用,最终会自动生成一个 div:
jade:

1
2
.content content
#content.content.box content

渲染后html:

1
2
<div class="content">content</div>
<div id="content" class="content box">content</div>

Plain Text

根据不同的情况,jade 提供了三种方式获取纯文本
方式一,在文本的开头使用管道符 (|)
jade:

1
2
3
| Plain text can include <strong>html</strong>
p
| It must always be on its own line

html:

1
2
Plain text can include <strong>html</strong>
<p>It must always be on its own line</p>

方式二,文本与 tag 放到同一行
jade:

1
2
.content content
#content.content.box content

html:

1
2
<div class="content">content</div>
<div id="content" class="content box">content</div>

方式三,适合有大量文本的情况;在 tag 后使用一个点号 (.), tag 与 点号之间不能有空格
jade:

1
2
3
4
5
p.
Jade is a terse and simplae
templating language with a
strong focus on performance
and powerful features.

html:

1
2
3
4
5
6
<p>
Jade is a terse and simplae
templating language with a
strong focus on performance
and powerful features.
</p>

case

case, 类似于 javascript 中的 switch,可用于在多个代码块中显示 case 与when 匹配的代码块
语法如下:

1
2
3
4
5
6
7
8
9
case condition
when state1
code 1
when state2
code 2
when staten
code n
default
code default

本文章仅总结常用的Html jade语法,Js语法可移步到Jade中文教程

文章目录
  1. 1.
  2. 2.
    1. 2.1. 先来看个例子
    2. 2.2. Tags
    3. 2.3. Attributes
    4. 2.4. Plain Text
    5. 2.5. case
  3. 3.
|