Node.js: 使用模版引擎 Handlebars
10 Aug 2015使用 Handlebars 作為模版引擎。
備註：由於部落格會把花括號吃掉，因此在左右加一個點，例如「.{.{ }.}.」。
基本設定
app.js 設定如下
var handlebars = require('express3-handlebars').create({ defaultLayout: 'main' }); // 引用 Handlebars 模組
app.engine('handlebars', handlebars.engine); // 使用 Handlebars 作為模版引擎
app.set('view engine', 'handlebars'); // 設定辨識用的副檔名，假設沒有設定副檔名，之後 render view 都要使用「檔名.副檔名」
Layout
Layout 一般會放在 views > layouts 資料夾裡面。主要 Layout 的檔案為 main.handlebars。
- 兩個大括號「.{.{ }.}.」用來套版，代入資料。
- 三個大括號「.{.{.{ }.}.}.」用來關閉 HTML 轉義功能。
- 使用
.{.{.{ body }.}.}.將 view 載入。
語法可參考官方網站。
<!DOCTYPE html>
<html>
<head>
<title>.{.{ title }.}.</title>
<meta charset="utf-8" />
</head>
<body>
.{.{.{ body }.}.}.
</body>
</html>
View
使用 index.handlebars。我們在首頁（index.handlebars）載入這段 partial 程式碼，程式碼如下。
<!-- index.handlebars -->
.{.{> weather }.}.
Partial
Partial View 一般會放在 views > partials 資料夾裡面。建立 weather.handlebars，並將資料代入，資料範例如下。
<!-- weather.handlebars -->
<div class="weatherWidget">
.{.{# each partials.weather.locations }.}.
<div class="location">
<h3>.{.{ name }.}.</h3>
<a href=".{.{ forcastUrl }.}.">
<img src=".{.{ iconUrl }.}." alt=".{.{ weather }.}." />
.{.{ weather }.}., .{.{ temp }.}.
</a>
</div>
.{.{/ each }.}.
</div>
加上假資料。
function getWeatherData() {
return {
locations: [
{
name: 'Portland',
forecastUrl: 'http://sample.com.tw',
iconUrl: 'http://dummyimage.com/50x50/000/fff',
weather: 'Overcast',
temp: '54.1 F (12.3 C)',
},
{
name: 'Bend',
forecastUrl: 'http://sample.com.tw',
iconUrl: 'http://dummyimage.com/50x50/000/fff',
weather: 'Partly Cloudly',
temp: '54.1 F (12.3 C)',
},
],
};
}
Router
router.get('/', function(req, res, next) {
if (!res.locals.partials) {
res.locals.partials = {};
}
res.locals.partials.weather = getWeatherData(); // get mock data
res.render('index', { title: 'This is index page.' }); // get index page
});
Demo
重新啟動專案，瀏覽器網址列輸入localhost:3000就會看到以下畫面：
這篇文章的原始位置在這裡-Node - 使用模版引擎 Handlebars
由於部落格搬遷至此，因此在這裡放了一份，以便閱讀；部份文章片段也做了些許修改，以期提供更好的內容。
