-
-P 进行Pretty格式化输出 -w 进行watch，jade文档变化后自动重新编译 --Obj 指定jade的模板中的变量查看全部
-
安装less markdown coffee查看全部
-
jade api查看全部
-
http://www.imooc.com/learn/259查看全部
-
jade --client --no-debug runtime.jade ==》runtime.js查看全部
-
root$ jade -P -w -O jade.json index.jade #-P，不压缩；-w,实时监测编译；-O，将数据jade.json传入模板。查看全部
-
超强的查看全部
-
超强的查看全部
-
jade总结查看全部
-
将html页面反编译成jade 首先安装 html2jade ,命令行执行 nmp install html2jade -g 第一种用法 命令行执行 html2jade http://wwww.imook.com > imook.jade 第二种用法 命令行执行 html2jade tittle.html > title.jade 第三种用法 var html2jade = require('html2jade') html2jade.convertDocument(document,{},function(err,jade){ })查看全部
-
jade除了支持服务器端，也支持客户端 预编译 jade --client --no-debug runtime.jade 将runtime.jade 编译成 runtime.js 调用的时候需要先引入runtime的执行环境,再引入生成的runtime.js文件 script(src="node_modules/jade/runtime.js") script(src="runtime.js")查看全部
-
通过插件和jade的组合使用,对模版内容进行过滤、处理和输出,这种机制在jade中称为filters，即过滤器。 首页要全局安装对应的插件，命令行执行 npm install less coffee-script markdownn -g 插件安装完成后,就可以使用相应的过滤器,jade 里面的过滤器用 ‘:’ 冒号做前缀 有一点需要注意的是,filters里面是无法传递动态的数据的;只能是静态的文本 如markdown: :markdown Hi,this is **imooc** [link](http://imooc.com) 解析的结果是 <p>Hi,this is <strong>imooc</strong> <a href="http://imooc.com">link</a></p> 再如less :less body{ p{ color:#ccc; } } 解析后: <style> body p{ color:#ccc; } </style> 再如coffee script :coffee console.log 'This is coffee!' 解析后: <script> (function(){ console.log('This is coffee!'); }).call(this); </script>查看全部
-
jade的核心api jade.compile(source,options) jade.compileFile(path,options) jade.compileClient(source,options) jade.render(source,options) jade.renderFile(filename,options) 1.新建 package.json; 2.安装第三方插件,执行 npm install jade coffee-script less markdown --save 3.根目录下新建server.js;内容如下; var http = require('http') var jade = require('jade') http.createServer(function(req,res){ res.writeHead(200,{ 'Content-Type': 'text/plain' }) //1. jade.compile /* var fn = jade.compile('div #{course}',{}) var html = fn({course:'jade'}) res.end(html) */ //2. jade.render /* var html = jade.render('div #{course}',{course:'jade render'}) res.end(html) */ //3. jade.renderFile(此时需要将上面的text/plain改成text/html) /* var html = jade.renderFile('index.jade',{course:'jade renderFile', pretty: true}) res.end(html) */ }).listen(1337,'127.0.0.1') console.log('Server running at 1337') 4.命令行运行 node server,浏览器窗口打开 127.0.0.1:1337 查看结果. 5.注意,server.js中的1 2 3 条注释,一条一条取消注释,每次只保留一个是取消注释的状态,然后运行 node server,去查看结果查看全部
-
模版包含(include)解决的是 文件和文件之间、 文件和区块之间的内嵌关系。 include可以静态地包含jade模版,也可以引入 html.jade(文档文件),还可以引入 style.jade(样式文件), include在引入 .jade 文件时，可以忽略其后缀 .jade； inclue 除了可以引入 .jade 文件外,还可以引入 html 文件，此时不能省略 .html 的后缀； 我们还可以对引入的 include 追加内容,如： include style.jade style. h2{ color:#000; }查看全部
-
使用 block 和 extends 实现模版继承 1. block 解析前： block desc p imooc jade study extends block desc block desc 解析后： <p>imooc jade study extends</p> <p>imooc jade study extends</p> <p>imooc jade study extends</p> 2.extends 新建layout.jade文件,代码如下： doctype html html head I am the common part body block desc p I am the commom part, for example,nav or footer block content demo.jade文件内容如下： extends layout.jade block content p 我是主页的主体内容 demo.jade解析后变成demo.html,代码如下: <!DOCTYPE html> <html> <head> <I>am the common part</I> </head> <body> <p>I am the commom part, for example,nav or footer</p> <p>我是主页的主体内容</p> </body> </html> 将demo.jade再次修改(layout不修改) extends layout.jade block content block desc h1 我是demo页的导航,可以替换公共的导航 p 我是主页的主体内容 则解析后,demo.html内容如下(本页和引用页存在同样代码块,本页级别高) <!DOCTYPE html> <html> <head> <I>am a common part</I> </head> <body> <h1>我是demo页的导航,可以替换公共的导航</h1> <h1>我是demo页的导航,可以替换公共的导航</h1> <p>我是主页的主体内容</p> </body> </html>查看全部
举报
0/150
提交
取消