我的博客
简介
什么是jade?
jade是一款源于Node.js的HTML模板引擎。
模板引擎
依赖于JavaScript实现jade到HTML的转换
供Node使用
安装和编译
#安装
npm install -g jade
#编译
jade demo.jade
#编译后将在同级目录下生成demo.html工具
jade官网
在线html转jade
空格和缩进的问题可能导致编译失败，建议选择合适的编辑器，比如：WebStrom。
语法
doctype
doctype html编译后：
注意： !!! 这种简写方式已经废除。
可选值还有：
xml
transitional
strict
frameset
1.1
basic
mobile
基本结构
//jade
doctype html
html
head
meta(charset='utf-8')
title JadeNotes
body
h1 Hello Jade!编译后：
JadeNotes
Hello Jade!
注释
//这行注释将被编译
//- 这行注释不会被编译
//
多行注释
多行注释
多行注释编译后：
文本
p Hello Jade!编译后：
Hello Jade!
选择器
//类选择器
p.red-txt
//ID选择器
p#blue-txt
//一个ID多个Class
p#yellow-text.high-txt.demo-txt编译后：
属性
input(type='text', placeholder='Input your Phone')编译后：
嵌套
ul#demo-ul
li.demo-li Hello
li.demo-li World编译后：
- Hello
- World
变量
- var welcome = 'Hello World'
p 'Xiguaaxigua, #{welcome}'编译后：
'Xiguaaxigua, Hello World'
标签中有大段的块内容
script.
console.log('Hello');
console.log('World');
//或者
script.
| console.log('Hello');
| console.log('World');编译后：
转义
- var welcome = 'Hello Wrold'
p welcome
p= welcome
p!= welcome编译后：
welcome
Hello <b>Wrold</b>
Hello Wrold
= 会转义内容，不想被转义可以加 != 。
循环
使用each循环：
- var arr = ['A', 'B', 'C', 'D', 'E']
ul
each a in arr
li= a
- var obj = {'name': '老王', 'age': '33', 'money'}
table
each value, key in obj
tr
td #{key}
td #{value}
编译后：
- A
- B
- C
- D
- E
name
老王
age
33
money
1000
case
case 和JavaScript里的 switch 作用一样。
- var money = 1000
case money
when 10000
h1 土豪
when 1000
h1 地主
when 100
h1 平民
when 1
h1 穷逼编译后：
地主
或者：
- var money = 10000000
case money
when 10000: h1 土豪
when 1000: h1 地主
when 100: h1 平民
when 1: h1 穷逼
default: h1 你有多少钱？编译后：
你有多少钱？
过滤器
支持markdown。必须是安装了 markdown-js 或者 node-discount 。
#安装markdown-js
npm install -g markdown-js
#或者安装node-discount
npm install -g node-discount例如：
:markdown
### Hello Markdown!编译后：
Hello Markdown!
mixin
无参数的mixin：
mixin welcome
ul
li 为系统而生，为框架而死，为debug奋斗一辈子
li 吃符号的亏，上大小写的当，最后死在需求上！
li Hello World!
+welcome()编译后：
- 为系统而生，为框架而死，为debug奋斗一辈子
- 吃符号的亏，上大小写的当，最后死在需求上！
- Hello World!
有参数的mixin：
mixin welcome(param)
ul
li 为系统而生，为框架而死，为debug奋斗一辈子
li 吃符号的亏，上大小写的当，最后死在需求上！
li Hello #{param}!
+welcome('Mixin')编译后：
- 为系统而生，为框架而死，为debug奋斗一辈子
- 吃符号的亏，上大小写的当，最后死在需求上！
- Hello Mixin!
mixin中文支持block：
mixin welcome(param)
ul
if block
block
else
li Nothing!
li Hello Wrold!
+welcome()
li 为系统而生，为框架而死，为debug奋斗一辈子
li 吃符号的亏，上大小写的当，最后死在需求上！编译后：
- Hello Wrold!
- 为系统而生，为框架而死，为debug奋斗一辈子
- 吃符号的亏，上大小写的当，最后死在需求上！
mixin支持attributes
mixin link(href, name)
a(class != attributes.class, title != attributes.title, href=href)= name
+link('xiguaaxigua.cn', 'xiguaaxigua')(class='main-link', title='Hello Xigua！')编译后：
xiguaaxigua包含
有点类似freemaker，通过include来载入一些jade模板。
End
推荐文章：
W3CPlus-jade学习
Jade——源于Node.js的HTML模板引擎
Jade Syntax Documentation
10个最好的 JavaScript 模板引擎