express-handlebars 是一个基于 Handlebars 模板引擎的 Express.js 视图渲染器，它可以帮助您更轻松地创建动态网站。
本文将介绍如何安装和使用 express-handlebars，并提供一些示例代码来帮助您更好地理解其用法。
安装 express-handlebars
要使用 express-handlebars，您需要先安装它。可以使用以下命令在项目中安装：
npm install express-handlebars
配置 express-handlebars
安装完成后，您需要配置 express-handlebars。在您的 Express 应用程序中，您可以使用以下代码配置 express-handlebars：
const express = require('express');
const exphbs = require('express-handlebars');
const app = express();
app.engine('handlebars', exphbs());
app.set('view engine', 'handlebars');在这个示例中，我们首先导入了 express 和 express-handlebars 模块。然后，我们创建了一个 app 实例，并使用 exphbs() 方法创建了一个 engine 实例，并将其设置为 handlebars 引擎。最后，我们将视图引擎设置为 handlebars。
创建模板
现在，我们已经配置了 express-handlebars，我们需要创建一些模板来将数据渲染到 HTML 页面中。我们可以在 views 目录下创建一个名为 index.handlebars 的文件，然后在该文件中添加以下内容：
-- -------------------- ---- -------
--------- -----
------
------
--------- ----- ----------
-------
------
------ ------- -------
----
------- -------
------ ---- -------
---------
-----
-------
-------在这个示例中，我们使用了 Handlebars 模板引擎的语法来渲染 HTML。我们可以在模板中使用 {{ title }}、{{ heading }} 和 {{ items }} 等变量来表示将要渲染的数据。
渲染模板
现在，我们已经创建了一个可用于渲染数据的模板，接下来我们需要使用 express-handlebars 将数据渲染到该模板中。我们可以使用以下代码来完成此操作：
app.get('/', (req, res) => {
res.render('index', {
title: 'Express Handlebars Tutorial',
heading: 'Welcome to the tutorial!',
items: ['item 1', 'item 2', 'item 3']
});
});在这个示例中，我们使用 res.render() 方法将数据渲染到名为 index 的模板中。在第二个参数中，我们传递了一个对象，其中包含了将要渲染到模板中的数据。
常见问题解决
如何设置模板的默认布局？
您可以使用 handlebars-layouts 包来设置模板的默认布局。具体步骤如下：
安装
handlebars-layouts包：npm install handlebars-layouts
在您的项目中引入
handlebars-layouts：-- -------------------- ---- ------- ----- ---------- - ------------------------------ ----- ------- - ------------------------------ ----- --- - ---------- ------------------- -------- ------------------------------- -------------- ------ ---
创建一个名为
main.handlebars的模板，并将默认的模板内容放在其中。
如何从模板中包含其他文件？
要从模板中包含其他文件，您可以使用 {{> partialName }} 语法。例如，如果您想要在模板中包含 header.handlebars 文件，则可以使用以下代码：
{{> header}}总结
express-handlebars 是一个非常有用的工具，它可以
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/56538