bootstrap第二天實驗

新增一個jade樣板
1.在./routes.js中新增app.get('/landing', require('./views/index').landing);
   /landing:是url的名稱,
   ./views/index是指./views/index.js
  .landing:是指/views/index.js 中export檔案的名稱
2.接下來看./views/index.js這個檔案在這個檔案新增
    exports.landing = function(req, res){
             res.render('landing');       //代表會去找landing.jade這個檔案做render的動作
   };
3.再來參考index.jade新增landing.jade
   打開index.jade:

extends layouts/default

block fb_meta
  meta(property='og:site_name', content='PartJS')
  meta(property='og:title', content='Next generation WoT and SPA.')
  meta(property='og:url', content='#{currentURL("")}')
  meta(property='og:image', content='')
  meta(property='article:published_time', content='')

block head
  title Next Generation WoT and SPA Framework

block neck

block feet
  script(src='/views/build/sandbox.js')
  //- script(src='/views/build/index.js')

block body
....

其中extends layouts/default代表index.jade繼承自./views/layouts/default.jade
打開default.jade
doctype html
html
  head
    block meta
    block fb_meta
    block head
    include css
    block neck
  body#top
    include navbar

    div.page
      block body

    include js
    block feet

    include footer

可以看出這是整個頁面的樣板其中的, block fb_meta,block head 就是樣板的成員變數
而index.jade繼承default.jade樣板並複寫其成員變數block fb_meta,block head...
當中include是用來導入其他jade file的語法。
4.jade是利用縮排來代表巢狀結構

參考
1.http://rhsieh76.pixnet.net/blog/post/48559282-%E6%B7%BA%E8%AB%87node.js%E6%A8%A1%E7%89%88%E5%BC%95%E6%93%8E%E2%80%93-jade
2.http://jade-lang.com/