在前端开发中，网站的模板是必不可少的一部分。而在Node.js技术栈中，Hapi.js和Handlebars.js两个工具可以帮助前端开发人员轻松实现网站模板。
什么是 Hapi.js
Hapi.js是一个构建web应用程序的框架，它基于Node.js，可用于创建可扩展的应用程序。它提供了众多功能，比如路由管理、认证授权、输入验证、配置管理等。
什么是 Handlebars.js
Handlebars.js是一个小巧而高效的JavaScript模板引擎。它可以将特定的模板和数据对象结合，生成 HTML 字符串。它的语法简单易学，所以业界广泛使用。
Hapi.js 和 Handlebars.js 的集成
为了将 Hapi.js 和 Handlebars.js 集成在一起，我们需要使用 handlebars 模块和 vision 插件。
npm install @hapi/vision handlebars
接下来，我们需要创建一个 Hapi.js 服务器，并在服务器上注册 vision 插件。
-- -------------------- ---- -------
----- ---- - ----------------------
----- ---------- - ----------------------
----- ---- - ----- -- -- -
----- ------ - -------------
----- -----
----- -----------
---
----- -----------------------------------------
--------------
-------- -
---- ----------
--
----------- ---------- -- ---------------------------------
----- ----------
------- -----
----------- ------------------ -- ----------
------------- ------------------ -- --------------
---
----- ---------------
------------------- ------- ----- -----------------
--
-------在代码中，我们首先通过 require 引入了 Hapi.js 和 Handlebars.js。然后创建了一个 Hapi.js 服务器，并通过相应的方法实现了对 vision 插件的注册。
接着，我们调用 server.views() 方法实现了对视图引擎的注册，具体来说，它将 Handlebars.js 的 engine 注册到了 server.views 上，同时指定了视图引擎的相关配置，如视图目录的相对路径、全局模板路径、局部模板路径等。
最后，我们启动 Hapi.js 服务器，并输出运行信息。
基本用法
待服务器启动后，我们就可以通过路由来访问 Handlebars.js 的模板了。
先创建我们的路由文件 index.js。
-- -------------------- ---- -------
-------------- - -
-
------- ------
----- ----
-------- --------- -- -- -
------ --------------- -
------ --------
-------- -------- -- -- ---------
---
-
-
-在上面的代码中，我们定义了一条简单的路由，将第二个参数（JavaScript对象）渲染到使用 Handlebars.js 模板引擎渲染的视图中。这里我们使用了回调函数，但是也可以将其定义为一个异步函数，根据实际需求来选择。
更具体地说，我们渲染了一个名为 index 的视图，该视图位于 views 目录下，并将一个对象传递给视图引擎，该对象包含 title 和 content 两个属性。视图引擎将创建一个 HTML 页面，在该页面中渲染index视图，以及我们传递的数据。
接下来我们来看一下具体实现。
新建模板文件
首先在 views/views文件夹中新建一个index.hbs文件，以便渲染我们的模板。
-- -------------------- ---- -------
--------- -----
------
------
------------------------
-------
------
--------------------
-------
-------上面的代码是一个简单的 HTML 模板，里面包含了一个含有两个 Handlebars 表达式的区域。这些表达式将被我们传递给视图引擎的数据所替换，因此在将网页渲染到浏览器中时，它们会被正确填充。
启动服务器
启动服务器，并在浏览器中浏览 http://localhost:3000，你就可以看到效果了。
使用布局
在本地开发过程中，我们通常需要添加一些共同的代码块到我们的网站中。比如头部信息、引用样式表等，这些代码块是每个站点的共同部分。Haii.js 还提供了一种方法来实现这个目标，那就是模板布局。
模板布局可以让我们定义一个包含常见元素和公共代码块的模板文件，后续的页面将使用这个模板文件作为基础模板构建。使用布局能够让我们更好地组织代码，这样可以减少我们的重复工作量，同时提高代码的可维护性。
现在我们来为我们的网站添加一个简单的布局。
首先，在 views/layouts 文件夹下新建一个 main.hbs 文件，并定义它的内容。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-------------------------------
-------
------
--- ------ --
-------------
--- ------ --
-------
-------我们的模板包含一个 HTML5 文档声明和一个 HTML 文档的骨架。此外，这个模板还包含了一个 navbar 和一个 footer 的段落，这些段落将会是之后所定义的局部模板。
一件值得注意的事情是，我们使用 Handlebars 的三个大括号 {{{...}}} 来指示 Handlebars 不对输出进行转义。
接下来，我们定义一个包含 localhost 和 page 参数的站点路由。
-- -------------------- ---- -------
-------------- - -
-
------- ------
----- ----
-------- --------- -- -- -
----- --------- - -
------ ----------
--
------ --------------- -
----- ----------
-------- -------- -- -- ---------
-- - ------- ------ ---
-
--
-
------- ------
----- -------------
-------- --------- -- -- -
----- --------- - -
------ ----- ---------------------
--
------ --------------- -
----- ----------
-------- ----- -- ---- ----------------------
-- - ------- ------ ---
-
-
--这里我们定义了两个路由，一个是首页路由，另一个是页面路由。路由 /page/{id} 其中 id 作为参数传递到路由函数中。
我们在对应的路由函数中声明了一个本地变量 localData，其中定义了 title 对象属性。依次返回模板、模板上下文和我们自己的选项对象。注意，我们指定了模板的 layout 选项，来表示我们想使用 main 模板作为我们的路由模板。
接下来，我们还需要创建一些局部模板来填充模板文件里面的 {{> ... }} 表达式。
只需要在 views/partials 文件夹中创建一个 navbar.hbs 和 footer.hbs 文件就可以了。下面是示例：
navbar.hbs
<header>
<nav class="navbar">
<a class="navbar-brand" href="/">Homepage</a>
</nav>
</header>footer.hbs
<footer>
<div class="container">
<p>Powered by Hapi.js</p>
</div>
</footer>在这个例子中，我们创建了两个局部模板分别对应 navbar 和 footer，它们都是在 main.hbs 中使用的。我们可以在 navbar.hbs 和 footer.hbs 中添加任何我们需要的 HTML 并且这个值可以被回退到每一个我们使用了 main.hbs 的模板里面。
最后启动服务器，访问 http://localhost:8000 和 http://localhost:8000/page/1，可以发现广告条和底部栏已经被添加成功了。
总结
本文中我们介绍了如何使用 Hapi.js 和 Handlebars.js 来实现网站模板，同时展示了模板布局和局部模板这些高级功能的使用方法。这两个工具功能强大，而且易于使用，大大简化了前端开发人员的工作。
希望通过这篇文章，可以让大家更好地理解如何在 Hapi.js 和 Handlebars.js 之间使用视图插件，以及如何使用布局来组织代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645458e5968c7c53b084959c