2024-07-03|閱讀時間 ‧ 約 32 分鐘

後端框架與API 開發(三) – 樣板引擎和視圖模板

※ 視圖模板

視圖模板（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，你可以看到畫面長得像這樣：

分享至

成為作者繼續創作的動力吧！

奧莉薇

追蹤

從 Google News 追蹤更多 vocus 的最新精選內容

作者的相關文章

後端框架與API 開發(四) – 路由設定與管理

奧莉薇走在成為後端工程師之路上的其他內容

你可能也想看

發表回應

成為會員後即可發表留言

後端框架與API 開發(三) – 樣板引擎 和視圖模板