※ 視圖模板
- 視圖模板（View Templates） 是在 MVC 架構中負責展示數據的 HTML 文件，包含模板語法，用於在渲染時插入實際數據。它們的主要目的是分離數據與展示邏輯，讓代碼更加模塊化和易於維護。
- 視圖模板設計和使用的核心理念，就是「重複的事情不要重複做、效益最大化、有效利用資源」。
※ 樣板引擎
樣板引擎（Template Engine） 是網頁開發中用來產生前端網頁的工具。它會將包含 HTML 和模板語法的「樣板文件」轉換成實際的 HTML 文件並返回給瀏覽器。由於需要進行這種轉換，樣板文件的結構與普通的 HTML 文件有所不同。
※ 共同作用
實現了數據的動態展示和視圖邏輯的分離。
※ 二者的關係
- 視圖模板 通常是由 樣板引擎 處理的。視圖模板包含的模板語法由樣板引擎解析和渲染。
- 視圖模板是具體的文件或代碼片段，而樣板引擎是處理這些模板的工具。
※ 視圖模板常用的樣板引擎工具 – Handlebars
優點：
- 簡單且直觀：語法類似 HTML，易於上手。
- 清晰的邏輯分離：展示邏輯和業務邏輯分離，代碼更模塊化。模板只負責顯示數據，而業務邏輯則由後端處理。
- 強大的模板語法：支持條件語句（如 if）、迭代語句（如 each）和自定義助手（Helpers）。
- 可重用性：支持可重用的模板和部分模板（partials），並且可以在不同的視圖中重用相同的模板片段。
- Express 的無縫集成：express-handlebars 是 Handlebars 的延伸套件，使得在 Express 應用中使用 Handlebars 非常方便。
※ 使用樣板引擎來回應前端頁面 的4 個步驟：
- 下載與安裝 express-handlebars。
npm i express-handlebars //下載到 express-handlebars 的最新版本。
npm i express-handlebars@4.0.2 //下載指定版本號
- 設定在 Express 中使用 Handlebars 的設定。
// require express-handlebars here
const exphbs = require('express-handlebars')
// setting template engine
app.engine('handlebars', exphbs({ defaultLayout: 'main' }))
app.set('view engine', 'handlebars')
關於程式碼的解釋：
- 第一個參數是這個樣板引擎的名稱。
- 第二個參數用於放入與樣板引擎相關的設定。這裡設定了預設的佈局（default layout）為名為 main 的文件，這樣可以省去在每個模板中指定佈局的步驟。
2.1 第二種啟用 Handlebars方法：
const exphbs = require('express-handlebars');
app.engine('hbs', exphbs({ defaultLayout: 'main', extname: '.hbs' }))
app.set('view engine', 'hbs')
關於程式碼的解釋：
- 當我們在 app.engine 中新增名為 hbs 的樣板引擎時，這只是註冊它。只有在 app.set 中設置了 view engine，這個引擎才正式啟用。
- 呼叫 exphbs 時設定 extname: '.hbs'，可以將模板文件的副檔名設為 .hbs，這樣可以使用更簡短的文件名。
3. 使用 Express Handlebars。
- 定義佈局（layout）和局部樣板（partial template）。
※ 什麼是佈局（layout）：
在同一個網站內，幾乎每一個頁面都會套用的版型，就稱作佈局。
※ 什麼是局部樣板（partial template）：
在不同頁面會有不同內容的地方，我們就稱作「局部樣板 (partial template)」。
區分佈局和局部樣板的好處：
- 將佈局獨立成一個文件並套用在多個頁面中，可以節省重複內容。
- 撰寫局部樣板可以將不同的內容模組化，並在需要的地方動態引入這些局部樣板。這樣做可以讓整個頁面的結構更加清晰和易於管理。同時，這也意味著可以快速套用相同的佈局，但可以針對每個頁面獨立調整和修改內容，從而實現更靈活和個性化的頁面設計。
※ 建立 views 和 layouts 資料夾
※ 建立 layout：把「佈局」的部分放在 layouts 資料夾中。
- 在 layouts 這個資料夾中，先建立一支名為 main.handlebars 的檔案：
因為先前在 app.js 設定樣板引擎時，就已經透過 app.engine('handlebars', exphbs({ defaultLayout: 'main' })) 宣告預設請用名為 main.handlebars 這支檔案當作佈局。
- 【main.hbs】：使用長檔名或短檔名是個人習慣的差異，可以採用縮寫 .hbs。
- 在 main.handlebars 這支檔案裡，我們就可以開始撰寫網頁佈局的部分，而這裡的內容會在每一個頁面中都出現：
<!-- ./views/layouts/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>Document</title>
</head>
<body>
<!-- partial templates will replace the part of "body" here -->
{{{ body }}} //把局部樣板的內容都放在這裡顯示。
</body>
</html>
- 三花括 {{{ body }}}說明：
這個三花括可以抽換成其他的 HTML 內容。這樣，我們在製作其他視圖樣板時，只需編寫 <body> 的內容，然後將其傳進 main 樣板中的三花括號處，組裝成一個完整的網頁。
- 雙花括 {{}} 說明：
使用 2 個 個花括弧 {{}} 引入變數時，則會將變數當作純文字。
- 相同的導覽列（navigation）有兩種寫法：
- 把導覽列放在 main.handlebars 中，可以讓導覽列與主要內容更緊密地結合在一起，像是這樣：
<!-- … -->
<body>
<!-- navigation -->
<nav class="navbar navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Movie List</a>
</div>
</nav>
<!-- partial templates will replace the part of "body" here -->
{{{ body }}}
</body>
<!-- … -->
- 另外建立header資料夾，把導覽列放在 navbar.handlebars 這支檔案裡，可以讓導覽列與其他全局元素（如標題和頁腳）分開，像是這樣：
<header>
<div class="nav-container">
<nav class="nav-left">
<ul>
<li>
{{> header/logo}} //將名為 header/logo 的局部樣板插入到目前的模板中。
</li>
<li>
<a href="/">
Home
</a>
</li>
<li>
<a href="/articles">
Articles
</a>
</li>
<li>
<a href="/about">
About
</a>
</li>
</ul>
</nav>
<nav class="nav-right">
<ul>
{{!-- <li>
<a href="/user">
User
</a>
</li> --}}
<li>
<a href="/auth/login">
Login
</a>
</li>
</ul>
</nav>
</div>
</header>
※ 建立首頁：
- 建立第一支局部樣板的檔案。它會放在 views 這個資料夾中，取名為 index.handlebars，也就是首頁。局部樣板內所撰寫的內容，之後就會出現在 layouts 裡 main.handlebars 檔案的 {{{ body }}} 中：
- 並在其中添加一些 HTML 內容作為測試：
<h2>Hello world! 這是 index</h2>
3. Express 中路由設定，app.js 會長像這樣：
// app.js
// ...
// routes setting
app.get('/', (req, res ) => {
res.render('index')
}) //res.render 的意思，是指 Express 會「回傳 HTML 來呈現前端樣板」。
4. 啟動專案有兩個方式。
$ nodemon app.js
npm run dev進入瀏覽器輸入 localhost:3000，你可以看到畫面長得像這樣：
