介绍
hbs 是 Handlebars 模板引擎的扩展，可以让前端开发者更轻松地构建动态网页。它提供了一种简单而强大的方法来生成 HTML，并且易于上手。
本文将详细介绍如何使用 npm 包 hbs 来构建动态网页，包括安装、使用和示例代码。
安装
要使用 hbs，您需要先在项目中安装它。在命令行中进入项目根目录，并执行以下命令：
npm install hbs
这将会从 npm 仓库下载并安装最新版本的 hbs。
使用
安装完成后，您需要做以下两件事情来使用 hbs：
- 配置 Express 应用程序以使用 hbs。
- 创建模板文件并渲染它们。
配置 Express 应用程序
首先，在 Express 应用程序中添加以下代码来配置 hbs：
const express = require('express');
const app = express();
const hbs = require('hbs');
// 设置视图引擎为 hbs
app.set('view engine', 'hbs');创建模板文件
接下来，创建一个名为 "views" 的目录，并在其中创建一个名为 "layout.hbs" 的布局文件。这个布局文件将作为所有其他视图的基础。
-- -------------------- ---- -------
---- ---------------- ---
--------- -----
------
------
----- ----------------
------------------------
-------
------
----------
-------
-------注意，在布局文件中使用了 Handlebars 的模板语法。{{title}} 和 {{{body}}} 都是变量，将在渲染视图时被替换为实际的值。
现在，您可以创建其他视图文件并将它们渲染到布局文件中。例如，以下是一个名为 "home.hbs" 的视图文件：
<!-- views/home.hbs --> <h1>Welcome to my website!</h1> <p>This is the home page.</p>
要将此视图文件渲染到布局文件中，请在 Express 应用程序中添加以下路由：
app.get('/', (req, res) => {
res.render('home', { title: 'Home' });
});这将在请求主页时渲染 "home.hbs" 文件，并将其插入到 "layout.hbs" 文件中。{ title: 'Home' } 指定了要在布局文件中使用的标题。
示例代码
以下是完整的示例代码，包括 Express 应用程序、布局文件和视图文件。
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- ----- --- - --------------- -- ------- --- ------------- -------- ------- -- ------ ------------------------------ - ------------------- ---------------- --------- - ---------- ----------------- ---------- -------------------------------- - ------------ -- ------ ------------ ----- ---- -- - ------------------ - ------ ------ --- --- -- ----- ----- ---- - ---------------- -- ----- ---------------- -- -- - ------------------- --------- -- ---- ----------- ---
-- -------------------- ---- -------
---- ---------------- ---
--------- -----
------
------
----- ----------------
------------------------
-------
------
----------
-------
-------<!-- views/home.hbs --> <h1>Welcome to my website!</h1> <p>This is the home page.</p>
结论
在本文中，您学习了如何使用 npm 包 hbs 构建动态网页。我们介绍了安装、配置 Express 应用程序和创建模板文件的步骤，并提供了
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/50594