Express template engine - Handlebars 載入 使用

使用Exress框架，server回傳給browser的內容會放在res.send( )。
但是html內容放在res.send()會佔app.js大部分空間，且難閱讀、維護。
所以使用"樣板引擎 template engine" 工具，把HTML內容放在另外的檔案中。

TEMPLATE ENGINE

• 把帶有HTML內容的樣板檔案，轉換成真正的HTML檔案，再回應到browser。
• 在 Express 中有許多不同的樣板引擎可以使用。
  • Express框架的預設template engine，是PUG(原名Jade)和原本html結構完全不同。
  • Handlebars 結構和原生HTML一樣，又 添加好用功能。
  • npm Handlebars套件有很多種，要找 express-handlebars

https://expressjs.com/en/guide/using-template-engines.html
TERMINAL:
npm i express-handlebars@3.0.0

Express 的固定使用語法格式- handlebars 在 Express 使用前的設定。

app.js檔案中 設定template engine

1. 透過require載入express-handlebars，並存為變數exphbs
   const exphbs = require('express-handlebars')
2. app.engine 方法: 定義要使用的template engine
   app.engine('handlebars', exphbs{defaultLayout: 'main'})
   第1個參數: 此template engine的名稱。
   第2個參數: template engine相關設定。設定defaultLayout 預設佈局（default layout），需使用名為'main'的檔案。(固定外框樣式)
3. app.set 方法: 告訴Express框架，要設定的view engine是handlebars。
   app.set('view engine', 'handlebars')

佈局 layout: 同一個網站內，每個頁面都會套用的版型，獨立成一支檔案，省去重複內容。
局部樣板 partial template: 不同頁面會有不同內容的地方。

• => 快速套用相同的佈局，針對不同頁面調整。-

3.建立views和layouts資料夾，資料夾名稱要遵守Express框架慣例。
handlebars會根據資料夾名稱，去取得檔案，以轉換編譯成HTML檔。
專案資料夾
--> views資料夾
--> --> partial template局部樣板檔案 index.handlebars(首頁)
--> --> layouts資料夾
--> --> --> main.handlebars佈局檔案(固定外框)

main.handlebars檔案 就是指'main'。宣告預設佈局使用名為main.handlebars這支檔案(固定外框)。
app.engine('handlebars', exphbs{defaultLayout: 'main'})

index.handlebars(首頁-變換的內容)會出現在 main.handlebars(固定的外框)html結構中的 {{{body}}}。
-->idex檔是首頁的內容會出現在main檔的{{{body}}}中。

使用 handlebars 作為樣板引擎的方便之處在於，它可以用 HTML 語法直接撰寫這支檔案，但又添加許多原本 HTML 沒有的功能。像是這裡用 {{{ body }}} 的意思，就是會把局部樣板的內容都放在這裡顯示。

4.Express中路由設定，將index.handlebars的內容傳給browser
app.js:

app.get('/', (req, res) => {
    res.render('index')
})

res.render() 方法: 去模板引擎而非用send回傳內容。Express框架會回傳HTML來呈現前端樣板。
=> 進入首頁即根目錄時，請回應index檔案(局部樣板)給browser。
'index' 回傳的檔案，即views資料夾/index.handlebars檔案。

最上面有一行 "Movie List"，這是我們放在佈局裡的內容，所以每一個頁面都會出現這行。底下，則是局部樣板中的內容，不同的路由透過 res.render() 告訴它要根據哪個局部樣板來回傳 HTML，於是就達到不同路由產生不同內容，但上方都會出現 Movie List 的情況。

多了樣板引擎，現在的 Express 在接收到瀏覽器發送過來的請求時，並不是直接就回傳內容到瀏覽器，而是會先透過樣板引擎把 handlebars 的檔案轉換成瀏覽器看得懂的 HTML 檔案才回傳到瀏覽器中：