-
-P 進行Pretty格式化輸出 -w 進行watch，jade文檔變化后自動重新編譯 --Obj 指定jade的模板中的變量查看全部
-
安裝less markdown coffee查看全部
-
jade api查看全部
-
http://www.xianlaiwan.cn/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 >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
提交
取消