jade的高级应用

前端之家收集整理的这篇文章主要介绍了jade的高级应用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

模板的继承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 返回<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>,该<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>可以<a href="/tag/shengcheng/" target="_blank" class="keywords">生成</a>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到<a href="/tag/yemian/" target="_blank" class="keywords">页面</a>

}).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){

});

  • 以上测试结果目前不是我想要的结果,有待验证!

猜你在找的程序笔记相关文章