一.安装
npm install jade
二.基本使用
1.简单使用
p hello jade!
渲染后:
<p>hello jade!</p>
jade安装成功后,进入node命令使用。
2.jade.compile:编译字符窜
> var jade = require('jade')undefined> jade.compile('p hello jade!')()'<p>hello jade!</p>'
3.jade.compileFile:编译jade文件
> var jade = require('jade')undefined> jade.compileFile('hello.jade')()'<p>hello jade!</p>'>
4.jade.render:渲染html
> jade.render('p hello jade!')'<p>hello jade!</p>'
5.jade.renderFile:渲染jade文件
> jade.renderFile('hello.jade')'<p>hello jade!</p>'>
当jade全局安装后也可以直接使用jade命令。
6.jade filename
C:\Users\Administrator>jade hello.jade rendered hello.htmlC:\Users\Administrator>
7.jade -P filename 使html文件变得可读
修改hello.jade文件为:
doctype htmlhtml head title hello jade! body p hello jade
运行:
jade hello.jade
jade.html文件变成这样:
<!DOCTYPE html><html><head><title>hello jade!</title></head><body><p>hello jade</p></body></html>
这样的可读性太差了，不过没事我们有P(pretty)参数
运行:
jade -P hello.jade
hello.html文件变成这样:
<!DOCTYPE html><html> <head> <title>hello jade!</title> </head> <body> <p>hello jade</p> </body></html>
这样看起来顺眼多了。
8.jade -w filename 监控文件
执行：
C:\Users\Administrator>jade -w hello.jade watching hello.jade rendered hello.html
一旦我们修改jade文件，html文件会实时修改。此乃神技也，有点像supervisor。
三.常规用法
1.选择器的使用
p.bt.cn#dn
编译后
<p id="dn" class="bt cn"></p>
2.如果省略标签元素，默认是div
.bt.cn#dn
编译后
<div id="dn" class="bt cn"></div>
3.属性的使用
一般属性
div(color='red',font-size='1.5rem')
编译后
<div color="red" font-size="1.5rem"></div>
多个属性如果写一行觉得拥挤的话，可以分开写
div(color='red' font-size='1.5rem')
style属性
a(style={color:'red'})编译后:
<a style="color:red;"></a>
4.字符转义
使用=赋值会进行转义
div(href="https://www.baidu.com/s?wd=jade&ws=jades")
编译后:
<div href="https://www.baidu.com/s?wd=jade&ws=jades"></div>
& 发生了转义 &
使用!=不会转义
div(href!="https://www.baidu.com/s?wd=jade&ws=jades")
编译后:
<div href="https://www.baidu.com/s?wd=jade&ws=jades"></div>
5.变量的使用
单个变量
- var code = 1;p.bt #{code} 编译后：
<p class="bt">1</p>
对象
- var code = {z:1,q:2};p.bt #{code.q} 编译后:
<p class="bt">2 </p>
字符串拼接
- var code = {z:1,q:2};p(class='bt'+code.z) #{code.q}编译后:
<p class="bt1">2</p>
6.流程控制语句
Case
- var i=0;case i when 0 div 变量为#{i} when 1 div 变量为1 default div 没有匹配项编译后:
<div>变量为0</div>
For
- for(var i=0;i<2;i++) div #{i} //注意缩进编译后:
<div>0</div><div>1</div>
If...else
- var ifv = true;if(ifv) div 为真else div 为假
编译后：
<div>为真</div>
7.注释
html可见注释
//html可见注释div.bt
编译后:
<!--html可见注释--> <div class="bt"></div>
html不可见注释
//-html不可见注释div.bt
编译后：
<div class="bt"></div>
多行注释(注意缩进)
// div.bt
编译后：
<!--div.bt-->
条件注释
<!--[if IE 8]><html lang="en" ><![endif]--><!--[if IE 8]><!--><html lang="en"><!--<![endif]-->
编译后：
<html lang="en" class="ie8"><![endif]--><!--[if IE 8]><!--><html lang="en"><!--<![endif]-->
8.include
doctype htmlhtml head style include style.css body script include script.js
编译后:（一定要有这两个文件，不然jade会报错）
<!DOCTYPE html><html> <head> <style>p{ color:red; } </style> </head> <body> <script>console.log(1)</script> </body></html>
9.extends与block
layout.jade
doctype htmlhtml head title hello jade! body
block content block foot
business.jade
extends ./layout.jadeblock content h1 content主体部分 block foot h1 foot脚注部分
编译后：
busuness.html
<!DOCTYPE html><html> <head> <title>hello jade!</title> </head> <body> <h1>content主体部分</h1> <h1>foot脚注部分</h1> </body></html>
10.jade中写行内js或css
doctype htmlhtml head style. p{color:red} body script. console.log(OK)编译后:
<!DOCTYPE html><html> <head> <style>p{ color:red; } </style> </head> <body> <script>console.log(OK)</script> </body></html>
11.强大的Mixins
mixin templ_li(value) li #{value}ul +templ_li('香蕉') +templ_li('橘子')编译后:
<ul> <li>香蕉</li> <li>橘子</li></ul>
这个特性让我们能自定义一些模板函数。特别是当我们的html结构有相似的时候。
其实跟less中的公共类，react中的公共函数也都是共通的。
less中：
.temp_color(@color:red){ color:@color; }//使用p{ .temp_color(blank);}react中:
var temp_prop = { getDefaultProps:function(){ return {name:'共有属性'}; } }//使用var ComponentDib = React.createClass({ mixins:p[temp_prop ], render:function(){ return <h1>{this.props.name}</h1> }})
原标题：Jade模板引擎让你飞
关键词：
我知道了 