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 返回函数，该函数可以生成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){
});

以上测试结果目前不是我想要的结果，有待验证！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!