您的位置：首页 > 其它

Jade模板引擎学习（一）安装及基本语法

2016-06-30 11:24 274 查看

Jade是一款高性能简洁易懂的模板引擎，Jade是Html的Javascript实现，在服务端（NodeJS）及客户端均有支持。

一、功能

客户端支持　　超强的可读性　　灵活易用的缩进　　块扩展　　代码默认经过编码处理以增强安全性　　编译及运行时的上下文错误报告　　命令行编译支持　　HTML5模式

可选的内存缓存　　联合动态和静态标记类　　利用过滤器解析树的处理　　支持 Express　　利用each透明的循环objects,arrays甚至不可枚举对象　　块注释　　不需要标记前缀

AST过滤器　　过滤器 ...

二、jade安装

npm install jade -g
jade -h

三、jade工具

四、jade语法

4.1 标签

以p标签为例

会转换为：

<p></p>

jade能自动识别自闭和标签:

input

会转换为：

<input/>

4.2 文本

4.2.1标签中添加文本

p 欢迎加入wandoujia-fe

会转换为：

<p>欢迎加入wandoujia-fe</p>

4.2.2 标签中嵌套标签

直接跟写html一样就行

p Welcome to wandoujia fe, we want <b>you</b>

会转换为：

<p>Welcome to wandoujia fe, we want <b>you</b></p>

4.2.3 标签中有大段的块内容

方式一：在标签后面添加 "
."

　　　比如一段js代码，注意是script后面有一个"

."

script.
console.log('Welcome to join wandoujia-fe')
console.log('We want you')

方式二：每段前面添加"
|"

script
| console.log('Welcome to join wandoujia-fe')
| console.log('We want you')

转换结果：

<script>
console.log('Welcome to join wandoujia-fe')
console.log('We want you')
</script>

4.3 属性

以

()

来分割属性

a(rel="nofollow", href="http://www.wandoujia.com/join#getJobInfo=1") 招聘

会转换为：

<a rel="nofollow" href="http://www.wandoujia.com/join#getJobInfo=1">招聘</a>

4.4 注释

4.4.1 单行注释

// changed by yc-team

会转换为：

<!-- changed by yc-team -->

[b]4.4.2 多行注释[/b]

body
//
p 测试代码by yaochun

会转换为：

<body>
<!--p 测试代码by yaochun
-->
</body>

[b] [b]4.4.3 [/b]不输出的注释[/b]

在单行注释上加一个短横线

//- 这段注释不会输出
p 文本测试by yaochun

会转换为：

<p>文本测试by yaochun</p>

注意：很多文档里面提到的条件注释已经不再支持

4.5 doctype

添加一个doctype只需要doctype，然后再跟一个可选的值，默认是html

doctype html

会转换为：

<!DOCTYPE html>

注意：

!!!

这种简写的方式已经被抛弃了~

可选值还有：

xml

transitional

srict

frameset

1.1

basic

mobile

4.6 设置id或class

标签后面跟上

#id

.classname

，如果没有标签则使用默认标签div

#content
p#info
a.btn

会转换为：

<div id="content"></div>
<p id="info"></p>
<a class="btn"></a>

4.7 1个id和多个class

连着写即可

a#download-btn.btn.blue-btn

会转换为：

<a id="download-btn" class="btn blue-btn"></a>

转自：http://www.w3cplus.com/html/jade.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航