[[347065]]

簡介
在本文中，我們將介紹如何用Node.js和Express來使用 Handlebars 模板引擎。還會介紹什么是模板引擎，以及如何使用把 Handlebars 建服務器端渲染(SSR) web應用程序。

我們還將討論如何使用 Express.js 框架配置 Handlebars ，以及如何使用內置helpers創建動態頁面。最后，我們將了解如何在需要時開發自定義helper 。

什么是模板引擎
早在上世紀90年代，當互聯網出現時，它主要用于科學目的，比如發表研究論文，以及作為大學和科學家之間的溝通渠道。那時的大多數網頁都是靜態的。靜態web頁面對每個用戶都是相同的，不會根據每個用戶而改變，如果要更改頁面上的任何內容，都必須手動完成。

在現代世界中，事物的互動性更強，并且為每個用戶量身定制。今天，幾乎每個人都能訪問互聯網。現在的大多數web應用程序都是動態的。例如，在一些購物網站上，不同用戶登錄的界面，展示是不一樣的，所謂的 千人千面。對于每個人來說，頁面將遵循相同的模板(即上面有用戶名的連續發布)，但是內容將是不同的 。

模板引擎的工作內容：定義展示內容模板，然后根據當前用戶和對數據庫的查詢，用接收到的內容填充模板。

我們可以在后端和前端使用模板引擎。如果我們在后端使用模板引擎來生成HTML，這種方式叫做服務器端渲染(SSR) 。

Handlebars
Handlebars 在后端和前端模板中都很流行。例如，流行的前端框架Ember就是使用Handlebars作為模板引擎。

Handlebars 是Mustache模板語言的擴展，Mustache 模板語言主要專注于簡單性和最小的模板。

在 Node.js 中使用 Handlebars
首先，創建一個空文件夾，然后打開終端，然后運行npm init -y以默認配置建一個空的 Node.js 項目。

開始之前，我們需要安裝所需的Node.js庫。通過運行以下命令來安裝express和express-handlebars模塊：

npm install --save express express-handlebars

**注意:**在服務器端使用 Handlebars 時，你可能會使用一個像express-handlebars這樣的幫助模塊，它將Handlebars與web框架集成在一起。在本文中，我們主要關注模板語法，這也是我們使用express-handlebars的原因，但是如果你自己處理模板編譯和渲染，還需要看 compilation API reference 對應的文檔說明 。

然后，重新創建默認的 Handlebars 目錄結構。views 文件夾包含所有Handlebars 手模板：

├── app.js 
└── views 
    ├── home.hbs 
    └── layouts 
        └── main.hbs 

views文件夾內的layouts文件夾將包含布局或模板包裝器。這些布局將包含模板之間共享的HTML結構，樣式表和腳本。

main.hbs文件是主布局，home.hbs文件是我們要構建的示例Handlebars模板。

在我們的示例中，我們使用一個腳本來保持簡單性。首先，在app.js文件中導入所需的庫:

const express = require('express'); 
const exphbs = require('express-handlebars'); 

然后，創建一個Express app

const app = express(); 

現在，我們可以配置express-handlebars作為我們的視圖引擎:

const express = require('express'); 
const exphbs = require('express-handlebars'); 
 
 
const app = express(); 
 
app.engine('hbs', exphbs({ 
  defaultLayout: 'main', 
  extname: '.hbs' 
})) 
 
app.set('view engine', 'hbs'); 

默認情況下，Handlebars 模板的擴展名是.handlebars。但是在這里的設置中，我們通過extname標志將其更改為.hbs，因為它更短。

接著，在main.hbs布局添加Bootstrap腳本和樣式：

在home.hb添加如下內容：

<h1>Hello World from Handlebars</h1> 

在 app.js 中添加對應的路由配置：

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

然后，添加如果監聽的端口號：

app.listen(3000, () => { 
    console.log('The web server has started on port 3000'); 
}); 

這樣就可以在控制臺中運行node app.js啟動應用程序。

但是我們也可以選擇使用諸如nodemon之類的工具。使用nodemon，我們在改代碼時不需要每次都要重新啟動服務器，nodemon會自動刷新服務器。

盤它：

npm i -g nodemon 

安裝后，運行：

nodemon app.js 

在瀏覽器中打開 http://localhost:3000/：

Handlebars 更多功能
為了展示一些Handlebars功能，我們將構建一個社交媒體類的網站。這里我們用一個簡單的數組來模擬數據庫。

將home.hbs內容更新成如下：

<nav class="navbar navbar-dark bg-dark"> 
    <a class="navbar-brand" href="#">Book Face</a> 
</nav> 
 
<div class="posts"> 
    <div class="row justify-content-center"> 
        <div class="col-lg-7" style="margin-top: 50px;"> 
            <div class="card"> 
 
                <img src="https://picsum.photos/500/500" 
                    class="card-img-top" alt="..."> 
                <div class="card-body"> 
                    <h5 class="card-title">此文章由 前端小智 發布</h5> 
 
                    <ul class="list-group"> 
                        <li class="list-group-item">期待你們的留言/li> 
                        <li class="list-group-item">期待你們的留言</li> 
                    </ul> 
                </div> 
            </div> 
        </div> 
    </div> 
</div> 

上面我們添加了一個 navbar 和一個帖子的展示內容 card，運行效果如下：

向模板傳遞參數
現在，讓我們從頁面本身中刪除這些硬編碼的值，這些值由路由傳遞進來， 在 app.js 中修改如下內容 ：

app.get('/', function (req, res) { 
    res.render('home', { 
        post: { 
            author: '小智', 
            image: 'https://picsum.photos/500/500', 
            comments: [] 
        } 
    }); 
}); 

post 對象包含author,image和comments等字段。我們可以在 Handlebars模板使用{{post}}來引用這些值：

<nav class="navbar navbar-dark bg-dark"> 
    <a class="navbar-brand" href="#">Book Face</a> 
</nav> 
 
<div class="posts"> 
    <div class="row justify-content-center"> 
        <div class="col-lg-7" style="margin-top: 50px;"> 
            <div class="card"> 
 
                <img src="https://picsum.photos/500/500" 
                    class="card-img-top" alt="..."> 
                <div class="card-body"> 
                    <h5 class="card-title">此文章由 {{post.author}} 發布</h5> 
 
                    <ul class="list-group"> 
                        <li class="list-group-item">期待你們的留言/li> 
                        <li class="list-group-item">期待你們的留言</li> 
                    </ul> 
                </div> 
            </div> 
        </div> 
    </div> 
</div> 

效果如下：

使用條件
由于這里需要一些邏輯判斷，即 comments 沒數據不顯示，我們看看如何在Handlebars 模板中使用條件：

<nav class="navbar navbar-dark bg-dark"> 
    <a class="navbar-brand" href="#">Book Face</a> 
</nav> 
 
<div class="posts"> 
    <div class="row justify-content-center"> 
        <div class="col-lg-7" style="margin-top: 50px;"> 
            <div class="card"> 
 
                <img src="https://picsum.photos/500/500" 
                    class="card-img-top" alt="..."> 
                <div class="card-body"> 
                    <h5 class="card-title">此文章由 {{post.author}} 發布</h5> 
                    {{#if post.comments}} 
                    <ul class="list-group"> 
                    </ul> 
                    {{else}} 
                    <ul class="list-group"> 
                        <li class="list-group-item">期待你們的留言</li> 
                    </ul> 
                    {{/if}} 
                </div> 
            </div> 
        </div> 
    </div> 
</div> 

這里我們的 comments 為空，所以顯示了 期待你們的留言。

#if是把 Handlebars 的內置幫助器。如果if語句返回true，則將渲染#if塊內部的塊。如果返回false，undefined，null，""，0或[]，則不會渲染該塊。

#if僅接受一個條件，并且不能使用 JS 比較語法（===）。如果需要使用多個條件或其他語法，則可以在代碼中創建一個變量，然后將其傳遞給模板。另外，你可以定義自己的 helper ，我們將在上一節中進行操作。

使用循環
由于帖子可以包含多個評論，因此我們需要一個循環渲染它們。首先，我們先添加一些數據：

app.get('/', function (req, res) { 
  res.render('home', { 
      post: { 
          author: '小智', 
          image: 'https://picsum.photos/500/500', 
          comments: [ 
            '前端小智終身學習者', 
            '前端小智持續分享者', 
            '雖然沒啥流量，但也希望你也能堅持分享下去，幫助更多的初學者 ' 
          ] 
      } 
  }); 
}); 

現在，在我們的模板中，使用#each循環遍歷它們：

<nav class="navbar navbar-dark bg-dark"> 
    <a class="navbar-brand" href="#">Book Face</a> 
</nav> 
 
<div class="posts"> 
    <div class="row justify-content-center"> 
        <div class="col-lg-7" style="margin-top: 50px;"> 
            <div class="card"> 
 
                <img src="https://picsum.photos/500/500" 
                    class="card-img-top" alt="..."> 
                <div class="card-body"> 
                    <h5 class="card-title">此文章由 {{post.author}} 發布</h5> 
                    {{#if post.comments}} 
                    <ul class="list-group"> 
                      {{#each post.comments}} 
                      <li class="list-group-item">{{this}}</li> 
                      {{/each}} 
                    </ul> 
                    {{else}} 
                    <ul class="list-group"> 
                        <li class="list-group-item">期待你們的留言</li> 
                    </ul> 
                    {{/if}} 
                </div> 
            </div> 
        </div> 
    </div> 
</div> 

在#each循環中，可以使用this來引用當前迭代中的元素。在我們的示例中，它引用了一個隨后被渲染的字符串。

如果posts是一個對象數組，你也可以訪問該對象的任何屬性。例如，如果有一個人員數組，你可以簡單地使用this.name來訪問name字段。

現在，為我們的 posts 添加多個數據:

app.get('/', function (req, res) { 
  res.render('home', { 
      posts: [ 
        { 
          author: '小智', 
          image: 'https://picsum.photos/500/500', 
          comments: [ 
            '前端小智終身學習者', 
            '前端小智持續分享者', 
            '雖然沒啥流量，但也希望你也能堅持分享下去，幫助更多的初學者 ' 
          ] 
        }, 
        { 
          author: '前端大智', 
          image: 'https://picsum.photos/500/500?2', 
          comments: [] 
        } 
      ] 
  }); 
}); 

然后，使用#each來遍歷 posts：

<div class="posts"> 
    <div class="row justify-content-center"> 
      {{#each posts}} 
        <div class="col-lg-7" style="margin-top: 50px;"> 
            <div class="card"> 
                <img src="{{this.image}}" class="card-img-top" alt="..."> 
                <div class="card-body"> 
                    <h5 class="card-title">此文章由 {{post.author}} 發布</h5> 
                    {{#if this.comments}} 
                    <ul class="list-group"> 
                      {{#each this.comments}} 
                      <li class="list-group-item">{{this}}</li> 
                      {{/each}} 
                    </ul> 
                    {{else}} 
                    <ul class="list-group"> 
                        <li class="list-group-item">期待你們的留言</li> 
                    </ul> 
                    {{/if}} 
                </div> 
            </div> 
        </div> 
      {{/each}} 
    </div> 
</div> 

總結
在本文中，我們介紹了Handlebars的基礎知識，Handlebars 是Node.js 和前端JavaScript 的模板引擎。使用 Handlebars，我們可以創建在服務器端或客戶端渲染的動態網頁。使用 Handlebars 的條件，循環，局部和自定義幫助器功能，我們的網頁將不僅僅是靜態HTML。