了解Node中的範本引擎（入門指南）

推薦教學：node js教學

#在本文中，我們將介紹如何用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>
    <a>Book Face</a>
</nav>

<p>
    </p><p>
        </p><p>
            </p><p>

                <img  alt="了解Node中的範本引擎（入門指南）" >
                </p><p>
                    </p><h5>此文章由 前端小智 发布</h5>

                    

                        
• 期待你们的留言/li>                         
• 期待你们的留言
                    

                                           

上面我们添加了一个 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>
    <a>Book Face</a>
</nav>

<p>
    </p><p>
        </p><p>
            </p><p>

                <img  alt="了解Node中的範本引擎（入門指南）" >
                </p><p>
                    </p><h5>此文章由 {{post.author}} 发布</h5>

                    

                        
• 期待你们的留言/li>                         
• 期待你们的留言
                    

                                           

效果如下：

使用条件

由于这里需要一些逻辑判断，即 comments 没数据不显示，我们看看如何在Handlebars 模板中使用条件：

<nav>
    <a>Book Face</a>
</nav>

<p>
    </p><p>
        </p><p>
            </p><p>

                <img  alt="了解Node中的範本引擎（入門指南）" >
                </p><p>
                    </p><h5>此文章由 {{post.author}} 发布</h5>
                    {{#if post.comments}}
                    

                    

                    {{else}}                     

                        
• 期待你们的留言
                    

                    {{/if}}                                            

这里我们的 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>
    <a>Book Face</a>
</nav>

<p>
    </p><p>
        </p><p>
            </p><p>

                <img  alt="了解Node中的範本引擎（入門指南）" >
                </p><p>
                    </p><h5>此文章由 {{post.author}} 发布</h5>
                    {{#if post.comments}}
                    

                      {{#each post.comments}}                       
• {{this}}
                      {{/each}}                     

                    {{else}}                     

                        
• 期待你们的留言
                    

                    {{/if}}                                            

在#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：

<p>
    </p><p>
      {{#each posts}}
        </p><p>
            </p><p>
                <img  alt="了解Node中的範本引擎（入門指南）" >
                </p><p>
                    </p><h5>此文章由 {{post.author}} 发布</h5>
                    {{#if this.comments}}
                    

                      {{#each this.comments}}                       
• {{this}}
                      {{/each}}                     

                    {{else}}                     

                        
• 期待你们的留言
                    

                    {{/if}}                                              {{/each}}     

总结

在本文中，我们介绍了Handlebars的基础知识，Handlebars 是Node.js 和前端JavaScript 的模板引擎。 使用 Handlebars，我们可以创建在服务器端或客户端渲染的动态网页。 使用 Handlebars 的条件，循环，局部和自定义帮助器功能，我们的网页将不仅仅是静态HTML。

原文地址：https://stackabuse.com/guide-to-handlebars-engine-for-node/

作者：Janith Kasun

译者：前端小智

更多编程相关知识，请访问：编程入门！！

以上是了解Node中的範本引擎（入門指南）的詳細內容。更多資訊請關注PHP中文網其他相關文章！