模板的继承extends(子文件和父文件关系)
1、新建layout.jade文件
doctype html
//兼容IE8、IE9、IE10
head
meta(charset='utf-8')
//- 优先级最高
//- var course = 'imooc jade2'
title #{course.toUpperCase()} study
body
block desc
p desc from layout
block content //调用index文件的block content
2、index.jade文件
extends layout.jade //继承layout文件
block content
h2 模板的继承
//优先级最高
block desc
p desc from index
模板的包含include (文件和文件之间、文件与区块之间内嵌的关系)
1、新建header.jade
meta(charset='utf-8')
title #{course.toUpperCase()} study
2、修改layout.jade文件
//文件替换成下面代码
include header.jade
设置style样式也一样
//添加style.jade文件
style.
h2 {
color: green;
}
//在需要的文件中包含进来
include style.jade
也可以添加原生html
//新建title.html
content from html
//在需要的文件中包含进来
include title.html
complie 、render及renderFile方法
实例:
var http = require("http");
var jade = require("jade");
http.createServer(function(req,res){
res.writeHead(200,{
'Content-Type':'text/html','charset':'utf-8'
});
//1.jade.compile 返回函数,该函数可以生成html
var fn =jade.compile('div #{course}',{});
// var html = fn({course:'jade'});
//2.jade.render 第一个参数:模板字符串
// var html = jade.render('div #{course}',{course:'jade render'});
//3.jade.renderFile
var html = jade.renderFile('index.jade',{course:'jade render',pretty:true});
res.end(html); // 返回html到页面
}).listen(1137,'127.0.0.1');
console.log('server running at 1137');
1.jade.compile 返回函数,该函数可以生成html
2.render和renderFile
第一个参数都是jade模板参数;
第二个参数参数传递
过滤器filter
h3 markdown
:markdown
Hi,this is **mq** [link](http:baidu.com)
h3 coffee
script
:coffee
console.log 'This is coffee'
h3 less
style.
:less
body {
h3 {
color: #ccc;
}
}
runtime环境下使用jade
命令:
jade --client --no-debug runtime.jade
执行后会生成同名的js文件,要想使用该文件需要结合jade的runtime.js(runtime执行环境)文件,都导入到文件中使用
利用html2jade反编译
命令:
第一种用法:
html2jade http://www.baidu.com > baidu.jade
第二种用法:
html2jade title.html > title.jade
第三种用法(在代码中使用):
html2jade.convertDocument(document,{
},function(err,jade){
});
- 以上测试结果目前不是我想要的结果,有待验证!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。