在上一篇筆記中我們學到如何用express建立簡單的伺服器並在網頁上呈現你想要的文字，但正如文章最後所提到的，通常我們要網站顯示的內容不會是短短的一句話，而是整個html結構，你總不能用res.send()一行一行慢慢打吧!(其實你可以，但…我相信沒有人想要這樣折磨自己的)，於是便有了模板template的概念。
什麼是模板引擎?
網路上其實已經有很多關於這名詞的介紹了，簡單說就是協助你渲染(render)你的頁面的工具。
在MVC設計模式中，當controller最後從model取得使用者要的資料並交給view時，可以再經過一層模板引擎將你的code變成想要的html頁面。uhhhhhhhhhh 聽不懂?
沒關係，看一下實例就會比較清楚了。
用於node.js的模板引擎有很多，像是pug、jade以及本篇文章要介紹的handlebars
利用express-handlebars作為你的模板引擎
接著我們就要延續上篇文章的實作，只是要加入模板引擎讓頁面的呈現更為簡單!
Step 1:安裝express–handlebars
前往你的專案目錄，利用終端機指令安裝express-handlebars
npm i express-handlebars
Step 2:回到app.js檔案使用我們的模板引擎
demo/app.js
------------------------------------------------------
const express = require('express');
//加入這行
const exphbs = require('express-handlebars');
const app = express();
// 告訴node現在的模板引擎為handlebars，且預設的呈現頁面名稱叫做main
app.engine('handlebars', exphbs({ defaultLayout: 'main' }));
app.set('view engine', 'handlebars');
Step 3:在專案目錄下建立 views資料夾
請在你的專案目錄底下建立名為views的資料夾，其中包含著layouts資料夾以及一個index.handlebars檔案，最後在layouts資料夾中建立一個名為main.handlebars的檔案。
特別注意，以上的資料夾名稱為預設名稱，當你套用handlebars時，程式會自動往這些資料夾去找想要的檔案，所以名稱不得作更改。完成後你的專案結構應該會變成這樣。
Step 4:修改main.handlebars 以及 index.handlebars的內容
將你的main.handlebars內容修改為以下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Demo</title>
</head>
<body>
{{{body}}}
</body>
</html>
修改你的index.handlebars內容
<h1>Hi I'm Danny</h1> <p>This's your first time using express-handlebars!</p>
到這邊你會覺得有點莫名其妙，沒關係 等等我會一起解釋!
Step 5:修改app.get的路由
app.get('/', (req, res) => {
// 將原本的res.send 改為 res.render
res.render('index')
})
到這邊就大功告成了，利用node指令啟動你的伺服器，並前往localhost:3000你應該會看到以下的畫面。
聰明的你大概猜到發生什麼事情了，我們將index.handlebars的內容作為body傳進 main.handlebars內，{{{ }}}是handlebars的特殊語法，裡面的值會是你要傳進的東西，它會自動把內容解析為html結構。
最後在app.get的路由中，res.render(‘index’)表示的便是請把index的內容傳進body內，然後呈現main.handlebars的內容給我看吧!
很方便對吧?handlebars還有許多方便的功能，包含你可以在頁面中使用一些程式的邏輯讓你更好的呈現你想要的頁面，這些都會在後續的文章說明! 用這樣的教學風格真~的很花時間阿!
app.js最後的內容
-----------------------------------------------------
const express = require('express')
const app = express()
//加入這行
const exphbs = require('express-handlebars')
//告訴node你現在要使用express-handlebars作為模板引擎
app.engine('handlebars', exphbs({ defaultLayout: 'main' }))
app.set('view engine', 'handlebars')
app.get('/', (req, res) => {
// 將原本的res.send 改為 res.render
res.render()
})
app.listen(3000, () => {
console.log('you are now listening at port 3000');
}) app.js最後的內容
-----------------------------------------------------
Danny的學習紀錄 