Handlebars 是一个流行的 JavaScript 模板引擎，它非常适合用于 Express.js 应用程序中实现页面布局。在本教程中，我们将详细讲解如何使用 Handlebars 来创建可复用模板和布局，从而加快 web 应用程序的开发。
第一步：安装 Handlebars
在使用 Handlebars 之前，我们需要安装它。可以使用 npm 在项目中安装 Handlebars。
npm install handlebars --save
第二步：设置 Express.js 应用程序
在 Express.js 应用程序中使用 Handlebars 非常简单。我们可以使用 express-handlebars 软件包来配置 Express.js 应用程序以使用 Handlebars 模板引擎。
首先，让我们安装 express-handlebars。
npm install express-handlebars --save
接下来，我们需要在 app.js 文件中设置 Express.js 应用程序。
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ------ - ------------------------------ ----- --- - ---------- -- -- ---------- ------ ------------------------ ---------- ------------- -------- -------------- -- -------- ---------------------------------- -- ----- ---------------- -------- -- - -------------------- --- --------- -- ---- -------- ---
在这里，我们首先引入并配置 express-handlebars 模板引擎。然后，我们设置静态文件目录和监听端口号。
第三步：创建 Handlebars 模板
现在，我们可以编写 Handlebars 模板来渲染我们的页面。在本教程中，我们将为主页、文章、菜单和页脚创建模板。
主页模板
以下是 home.handlebars 主页模板的示例代码。
-- -------------------- ---- -------
--------- -----
------
------
------------------------
-------
------
--- --------
----------- -- --- -------------
--- --------
-------
-------在这里，我们使用 Handlebars 语法来定义页面标题、页面头部和页脚。其中，{{> header}} 和 {{> footer}} 表示引用另一个 Handlebars 模板，分别为 header.handlebars 和 footer.handlebars。
文章模板
以下是 article.handlebars 文章模板的示例代码。
-- -------------------- ---- -------
--------- -----
------
------
------------------------
-------
------
--- --------
---------
------------------
---------------
----------
--- --------
-------
-------在这里，我们使用 Handlebars 语法来渲染文章标题和正文。
菜单模板
以下是 menu.handlebars 菜单模板的示例代码。
<ul> <li><a href="/">Home</a></li> <li><a href="/about">About</a></li> <li><a href="/contact">Contact</a></li> </ul>
在这里，我们使用 HTML 语法来创建链接列表，这些链接将导航到网站的其他页面。
页脚模板
以下是 footer.handlebars 页脚模板的示例代码。
<footer> © 2021 Our Website </footer>
在这里，我们使用 HTML 语法来创建网站的版权信息。
第四步：创建 Handlebars 布局
现在，我们已经创建了多个 Handlebars 模板。我们将使用 Handlebars 布局来定义这些模板的共同元素，如页眉和页脚。
在本教程中，我们将创建一个名为 main.handlebars 的布局。以下是示例代码。
-- -------------------- ---- -------
--------- -----
------
------
------------------------
-------
------
--- --------
--- ---- ---
--- --------
-------
-------在这里，我们使用 {{{ body }}} 语法来渲染模板内容。这允许模板内容插入在布局的主内容区域中。
第五步：渲染模板和布局
现在，我们已经创建了多个 Handlebars 模板和布局。我们将使用 Express.js 应用程序来渲染这些模板，并将它们与布局结合使用。
以下是在 Express.js 应用程序中渲染 home.handlebars 模板和 main.handlebars 布局的示例代码。
app.get('/', function (req, res) {
res.render('home', {
layout: 'main',
title: 'Home'
});
});在这里，我们使用 res.render 方法来渲染 Handlebars 模板并将其与布局结合使用。我们还通过第二个参数传递数据上下文，例如页面标题、菜单和内容。
结论
在本教程中，我们介绍了如何在 Express.js 应用程序中使用 Handlebars 来实现页面布局。我们创建了多个可复用的 Handlebars 模板，并用一个名为 main.handlebars 的布局来组合它们。如果使用得当，这些技术将使 web 应用程序的开发速度更快，并提高可维护性和可重复使用性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672203e32e7021665e09ebf6