iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 10
0
自我挑戰組

通過Node.js了解後端運作原理!系列 第 10

Day10. MVC網站框架(三)使用Jade樣版動態生成網頁

開發網站時,視覺設計上都會採用一致的風格,很大的機會有重複、類似的部份,不論是功能上的重複或是排板上的類似,我們會希望將這些部份抽出來做成樣板,然後動態地將不同內容置入其中。這邊將會分兩天使用兩種樣板引擎:Jade跟EJS。

設定

首先安裝jade

npm install jade

並且建立專案資料夾,裡面分別放上一支app.js以及包含views的資料夾,並在views裡面建立名為index.jade的樣板,在app.js裡面設定存放樣板的目錄路徑以及選用樣板引擎:

var express = require('express');
var app = express();

//設定存放樣板的目錄路
app.set('views', __dirname + '/views');
//選用樣板引擎
app.set('view engine', 'jade');

app.get('/', function(req, res){
   //使用index樣板,並可以帶入參數給樣板利用
  res.render('index',{title: 'index',msg2: 'Lez Template'});
});

//使用moudle.parent這個屬性來判定當前的script是否由外部script載入
if (!module.parent) {
  app.listen(3000);
  console.log('Express 在port 3000啟動!');
}

使用Jade樣板引擎

Jade最廣為人知的特色就是使用縮排方式去表示、敘述HTML tag,這樣的方式讓樣板原始碼看起來很簡潔,也是許多人愛用的原因。
也就是讓下面原始碼從:

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Title Here</title>
</head>
<body>
	<h1 class="small">Jade Template</h1>
	<p id="large">balalalala</p>
</body>
</html>

變成

doctype html
html(lang='en')
  head
    title Title Here
  body
    h1.small Jade Template
    p#large balalalala

有一點類似sublime產生HTML的快捷語法,都是為了在開發時少寫很多code,還有利用縮排代替了原本的巢狀結構,讓可讀性上面更上層一樓(當然要先懂語法啦!)

語法

標籤名稱 (標籤屬性1,標籤屬性2,...) 文字內容

//一般HTML
<img src="/images/xxx.jpg" alt="xxx圖片" />
//Jade寫法
img(src='/images/xxx.jpg',alt='xxx圖片")

標籤名稱 (id='aa',class='bb') 文字內容

//一般HTML寫法
<div id="aa" class="bb">TEXT</div>
//Jade寫法
div(id='aa',class='bb') TEXT
//Jade寫法二(如果標籤是div可以省略不寫)
div#aa.bb TEXT

代入參數

邏輯表示


上一篇
Day9. MVC網站框架(二)使用Express Web框架
下一篇
Day11. MVC網站框架(四)使用EJS樣版動態生成網頁
系列文
通過Node.js了解後端運作原理!30

尚未有邦友留言

立即登入留言