※ 安裝 express-handlebars：
npm install express-handlebars
※ 建立第一個頁面：
製作共用 Layout：
先建立整個網站共用的主要佈局 (layout)。把共用 layout 檔案路徑設定為：views/layouts/main.hbs，請你先照這個規劃新增資料夾與檔案：
- views 資料夾
- 在 views 底下新增 layouts 資料夾
- 在 layouts 底下新增 main.hbs 檔案
製作 main.hbs 內容：
範例：
<!DOCTYPE html>裡面在網頁內容，也就是
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todo List</title>
</head>
<body>
{{{ body }}}
</body>
</html>
<body> 標籤中，我們用了三花括 {{{ body }}}，這個三花括可以抽換成其他的 HTML 內容。也就是說，未來我們製作其他 view 樣板時，就只需要寫 <body> 的內容，然後再傳進 main 樣板裡三花括的地方，組裝成一支完整的網頁。
主程式啟用 Handlebars：
回到主程式 app.js 做設定，把樣板引擎指定為 Handlebars：
// 使用了新版的express-handlebars
const { engine } = require('express-handlebars');
app.engine('hbs', engine({ defaultLayout: 'main', extname: '.hbs' }))
app.set('view engine', 'hbs')
新增 index 樣板：
接著，為了測試 Handlebars 有沒有設定成功，讓我們製作一個臨時的局部樣板 (partials) 來試試看，請你新增 views/index.hbs，並加入暫時的內容：
<h2>Hello world! 這是 index</h2>
修改首頁路由：
修改 / 的路由，使用 res.render() 指令，要求渲染一個叫 index 的頁面。res.render 的意思，是指 Express 會「回傳 HTML 來呈現前端樣板」。
// 設定路由
// Todo 首頁
app.get('/', (req, res) => {
res.render('index')
})
測試結果：
現在打開瀏覽器並連到http://localhost:3000/，看看 index 樣板裡的對應內容有沒有成功出現：
建立 commit 節點：
[~/todo-list] $ git add .
[~/todo-list] $ git commit -m "feat: add handlebars"
