jade學習02
模版繼承 ; 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 html
直接在jade中使用，無需在node文件中引用 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彌補)
- 調試困難
- 性能不是很出色（項目要求高的話不適合選擇）
適用
- 團隊初期追求效率的狀況下
相關文章
- 1. jade學習01
- 2. Jade學習篇
- 3. jade學習
- 4. Node 學習 -- jade
- 5. jade學習總結
- 6. jade 學習筆記
- 7. Jade入門學習
- 8. jade學習筆記
- 9. Jade學習筆記
- 10. Jade入門學習筆記
- 更多相關文章...
- • 您已經學習了 XML Schema，下一步學習什麼呢？ - XML Schema 教程
- • 我們已經學習了 SQL，下一步學習什麼呢？ - SQL 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • 適用於PHP初學者的學習線路和建議
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. jade學習01
- 2. Jade學習篇
- 3. jade學習
- 4. Node 學習 -- jade
- 5. jade學習總結
- 6. jade 學習筆記
- 7. Jade入門學習
- 8. jade學習筆記
- 9. Jade學習筆記
- 10. Jade入門學習筆記