-
-P 進(jìn)行Pretty格式化輸出 -w 進(jìn)行watch，jade文檔變化后自動(dòng)重新編譯 --Obj 指定jade的模板中的變量查看全部
-
安裝less markdown coffee查看全部
-
jade api查看全部
-
http://idcbgp.cn/learn/259查看全部
-
jade --client --no-debug runtime.jade ==》runtime.js查看全部
-
root$ jade -P -w -O jade.json index.jade #-P，不壓縮；-w,實(shí)時(shí)監(jiān)測(cè)編譯；-O，將數(shù)據(jù)jade.json傳入模板。查看全部
-
超強(qiáng)的查看全部
-
超強(qiáng)的查看全部
-
jade總結(jié)查看全部
-
將html頁(yè)面反編譯成jade 首先安裝 html2jade ,命令行執(zhí)行 nmp install html2jade -g 第一種用法 命令行執(zhí)行 html2jade http://wwww.imook.com > imook.jade 第二種用法 命令行執(zhí)行 html2jade tittle.html > title.jade 第三種用法 var html2jade = require('html2jade') html2jade.convertDocument(document,{},function(err,jade){ })查看全部
-
jade除了支持服務(wù)器端，也支持客戶端 預(yù)編譯 jade --client --no-debug runtime.jade 將runtime.jade 編譯成 runtime.js 調(diào)用的時(shí)候需要先引入runtime的執(zhí)行環(huán)境,再引入生成的runtime.js文件 script(src="node_modules/jade/runtime.js") script(src="runtime.js")查看全部
-
通過(guò)插件和jade的組合使用,對(duì)模版內(nèi)容進(jìn)行過(guò)濾、處理和輸出,這種機(jī)制在jade中稱為filters，即過(guò)濾器。 首頁(yè)要全局安裝對(duì)應(yīng)的插件，命令行執(zhí)行 npm install less coffee-script markdownn -g 插件安裝完成后,就可以使用相應(yīng)的過(guò)濾器,jade 里面的過(guò)濾器用 ‘:’ 冒號(hào)做前綴 有一點(diǎn)需要注意的是,filters里面是無(wú)法傳遞動(dòng)態(tài)的數(shù)據(jù)的;只能是靜態(tài)的文本 如markdown: :markdown Hi,this is **imooc** [link](http://imooc.com) 解析的結(jié)果是 <p>Hi,this is <strong>imooc</strong> <a >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.安裝第三方插件,執(zhí)行 npm install jade coffee-script less markdown --save 3.根目錄下新建server.js;內(nèi)容如下; 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(此時(shí)需要將上面的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.命令行運(yùn)行 node server,瀏覽器窗口打開(kāi) 127.0.0.1:1337 查看結(jié)果. 5.注意,server.js中的1 2 3 條注釋,一條一條取消注釋,每次只保留一個(gè)是取消注釋的狀態(tài),然后運(yùn)行 node server,去查看結(jié)果查看全部
-
模版包含(include)解決的是 文件和文件之間、 文件和區(qū)塊之間的內(nèi)嵌關(guān)系。 include可以靜態(tài)地包含jade模版,也可以引入 html.jade(文檔文件),還可以引入 style.jade(樣式文件), include在引入 .jade 文件時(shí)，可以忽略其后綴 .jade； inclue 除了可以引入 .jade 文件外,還可以引入 html 文件，此時(shí)不能省略 .html 的后綴； 我們還可以對(duì)引入的 include 追加內(nèi)容,如： include style.jade style. h2{ color:#000; }查看全部
-
使用 block 和 extends 實(shí)現(xiàn)模版繼承 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文件內(nèi)容如下： extends layout.jade block content p 我是主頁(yè)的主體內(nèi)容 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>我是主頁(yè)的主體內(nèi)容</p> </body> </html> 將demo.jade再次修改(layout不修改) extends layout.jade block content block desc h1 我是demo頁(yè)的導(dǎo)航,可以替換公共的導(dǎo)航 p 我是主頁(yè)的主體內(nèi)容 則解析后,demo.html內(nèi)容如下(本頁(yè)和引用頁(yè)存在同樣代碼塊,本頁(yè)級(jí)別高) <!DOCTYPE html> <html> <head> <I>am a common part</I> </head> <body> <h1>我是demo頁(yè)的導(dǎo)航,可以替換公共的導(dǎo)航</h1> <h1>我是demo頁(yè)的導(dǎo)航,可以替換公共的導(dǎo)航</h1> <p>我是主頁(yè)的主體內(nèi)容</p> </body> </html>查看全部
舉報(bào)
0/150
提交
取消