iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 22
0

今天,來到鐵人賽第二十二天。
距離2016的末日,還有9天。
在那之前,有聖誕節。
祝福,大家都過得開心!
如果公司行號,有交換禮物的遊戲,也能得到好禮!
我們來看看今天的進度吧。

我們學會了使用Jade樣版以後,可以開始建立一個新的網頁。
如果,要將每個網頁,呈現在同一個網站裡,即,共用一個框架!就要使用 Layout。

這邊將學習,如何使用Bootstrap去呈現,我們之前在
這兩篇 Jade樣版與資料庫應用-以MS-SQL為例Jade樣版與資料庫應用-以MongoDB為例 的資料庫內容,呈現在同一個網站裡。

開始吧!

尋找Bootstrap框架

首先,我們可以進入網站 getbootstrap,點取上方連結 Getting started ,可以找到喜歡的框架版型。
http://ithelp.ithome.com.tw/upload/images/20161222/20103526Sa9huo1tmF.png

小編選擇這個,有 頁首/頁尾及內容 sticky footer navbar 的框架,說明我們將如何應用在 jade layout。
http://ithelp.ithome.com.tw/upload/images/20161222/201035265e8tXwtkzy.png

將Html轉換成Jade

  • Step1. 我們進入了 sticky footer navbar 後,可以分析一下,網頁將會變動的部份。
    http://ithelp.ithome.com.tw/upload/images/20161222/20103526D8KyKhuvhB.png

  • Step2. 複製上面網站的原始碼,進入 Html2Jade 將html轉成 Jade,並且修改一些地方,像是上面的連結,下面的footer,更重要的是,定義區塊(block):
    http://ithelp.ithome.com.tw/upload/images/20161222/20103526inm9KX9dP2.png

  • Step3. 將轉換好的 jade,存成 layout.jade,放入我們的 MyViews資料夾。
    http://ithelp.ithome.com.tw/upload/images/20161222/20103526hp1R9dg3cS.png

修改將要套用layout的Jade

還記得之前,我們在Jade樣版與資料庫應用-以MongoDB為例,所做的 personTp.jade 如果,我們要引用layout,只需要在最前面加入 extends ./layout,並且,只需要設定區塊名稱,及要呈現的內容即可。(將原本的 doctype html, html,head…去掉)

personPageTP.jade

extends ./layout
 
block page-header
    h1 Person List using Jade engine
 
block content
    ul
      for item in personList
        li= item.id + ":"
         p=item.firstName +' '+item.lastName

同樣的,你也可以將Jade樣版與資料庫應用-以MS-SQL為例,所做的stuTp.jade 做 修改,方式大同小異。

啟動網站

為了要讓二造的資料,使用共同框架,呈現在一個網站。
再來,我們只需要簡單 修改一下express app的路由,如圖:
http://ithelp.ithome.com.tw/upload/images/20161222/20103526U6wOPtmmvY.png

之後,我們執行node ,並啟動瀏覽器,你可以看到,使用 Bootstrap layout 於jade 應用上的成果:
http://ithelp.ithome.com.tw/upload/images/20161222/201035260tPnpAcim7.png

可以在同一頁進行網頁切換:
http://ithelp.ithome.com.tw/upload/images/20161222/20103526fJtcKVU5LG.png

本篇的程式碼,可以從這裡取得
https://github.com/circleuniv/myapp/blob/master/alljadeServer.js
https://github.com/circleuniv/myapp/tree/master/MyViews


上一篇
Day21 - Jade樣版與資料庫應用-以MongoDB為例
下一篇
Day23 - Cookie & Session
系列文
Node.JS - 30 天入門學習筆記32

尚未有邦友留言

立即登入留言