模版继承 ; block,extends ;如果是原生html文件的话，后缀html
//layout.jade
doctype html
html
head
meat(charset='utf-8')
title learn jade
body
block content
//inde.jade
extends layout //这里注意路径
block content
－－－－－
<!DOCTYPE html>
<html>
<head>
<meat charset="utf-8"></meat>
<title>learn jade</title>
</head>
<body>
</body>
</html>
模版包含 ; include
//index.jade
extends layout
block content
include style
//style.jade
style.
h2{
color: #555;
}
//结果
<body>
<style>
h2{
color: #555;
}
</style>
</body>
jade api
- jade.compile(source, options)
var http = require('http');
var jade = require('jade');
http.createServer(function(req, res) {
res.writeHead(200, {'Content-Type':'text/plain'})
var fn = jade.compile('div #{course}', {});
var html = fn({course: 'jade'});
res.end(html);
}).listen(3000);
console.log('server Start');
//结果
<div>jade</div>
- jade.compileFile(path, options)
- jaed.compileClient(source, options)
- jade.render(source, options)
var html = jade.render('div #{course}', {course: 'jade render'});
//结果
<div>jade render</div>
- jade.renderFile(filename, options)
var http = require('http');
var jade = require('jade');
http.createServer(function(req, res) {
res.writeHead(200, {'Content-Type':'text/html'})
var html = jade.renderFile('index.jade', {course: 'jade renderFile', pretty: true});
res.end(html);
}).listen(3000);
console.log('server Start');
过滤器
**安装 npm install --save markdon less coffee-script **
**直接在jade中使用，无需在node文件中引用 **
:markdowm
#title
style
:less
body{
p{
color:#ccc;
}
}
script
:coffee
console.log 'hi'
利用html2jade反编译
- 安装
npm install --save html2jade - 网址编译成jade
html2jade http://www.example.com 地址 > example.jade - html文件编译成jade
html2jade /example/html > example.jade - node.js中使用
var html2jade = require('html2jade');
html2jade.converDocument(document, {}, function(err, jade) {
))
jade
缺点
- 可移植性差; (跨团队合作问题，可以用html2jade弥补)
- 调试困难
- 性能不是很出色（项目要求高的话不适合选择）
适用
- 团队初期追求效率的情况下