本文介绍Jade模板引擎的基本功能，包括安装方法、常用工具、语法特性等，并详细讲解了标签、文本、属性、注释等核心元素的使用。
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></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 -->
4.4.2 多行注释
body
//
p 测试代码by yaochun
会转换为：
<body> <!--p 测试代码by yaochun --> </body>
4.4.3 不输出的注释
在单行注释上加一个短横线 -
//- 这段注释不会输出
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
扫一扫
753
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
