在 Express.js 中，使用 HBS（Handlebars）作为模板引擎来渲染网页可以让前端开发人员编写更加优雅、易于维护的模板代码，同时还可以更好地与后端代码进行交互，实现动态内容的呈现。
安装和配置
首先，我们需要在项目中安装 HBS 模板引擎。可以使用 npm 命令执行以下操作：
npm install hbs --save
安装完毕后，我们需要在 Express.js 中配置 HBS，以便使用它来渲染网页。配置步骤如下：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - --------------- ----- --- - ---------- -- -- --- ---- ------------- -------- ------- ---------------- --------- - ---------- ------------------------------ - -------------------
代码中，我们通过调用 app.set() 方法来指定使用 HBS 作为模板引擎，并将视图文件存放在 /views 目录中。为了更好地组织模板代码，我们还可以创建子目录 /partials 来存放 HBS 的局部模板。这些局部模板可以在其他 HBS 文件中被引用，从而实现代码重用。
HBS 模板语法
HBS 模板语法基于 Mustache 模板引擎，使用双大括号来标记变量和表达式。
以下是一些常用的 HBS 模板语法：
变量
使用双大括号来输出变量的值。
<p>{{name}}</p>条件语句
使用 #if 和 #else 来实现条件语句。
{{#if active}}
<p>Active</p>
{{else}}
<p>Inactive</p>
{{/if}}循环语句
使用 #each 和 #forEach 来实现循环语句。
<ul>
{{#each items}}
<li>{{this}}</li>
{{/each}}
</ul>局部模板
使用 #partial 来引用局部模板。
-- -------------------- ---- -------
---------- ----------
--------
----------------------
----- ------
----------- ------------------
-------
---------
------------
---------- ----------
--------
--------- ---- -- -----------
---------
------------
--- --------
--- --------在 Express.js 中使用 HBS
在 Express.js 中使用 HBS 渲染网页的过程非常简单，只需要调用 res.render() 方法，并传递模板名称和数据对象即可。
以下是一个使用 HBS 渲染网页的例子：
app.get('/', function(req, res) {
const data = {
title: 'My Website',
items: ['Home', 'About', 'Contact']
};
res.render('index', data);
});以上代码中，我们使用 res.render() 方法来渲染名为 index 的 HBS 文件，并将数据对象传递给模板。在模板中，我们可以使用变量（如 {{title}}）和条件语句（如 #if）来输出数据并控制页面布局。
总结
在 Express.js 中使用 HBS 模板引擎可以让前端开发人员编写更加优雅、易于维护的模板代码，同时还可以更好地与后端代码进行交互，实现动态内容的呈现。通过以上内容的学习，我们可以更加深入地理解 HBS 的用法，并在实际项目中应用它来构建高效、灵活的网站和应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646985fb968c7c53b09699a9