Express.js hbs 模块 - 从 .hbs 文件注册部分内容

JS

使用 Express.JS 框架开发网站时，我们经常会涉及到模板引擎的使用。而 hbs 是一种常用的模板引擎，可以帮助我们更方便地开发动态网页。在 Express.JS 中使用 hbs 模块，我们可以从 .hbs 文件中注册部分内容，这样在渲染页面时就可以直接使用这些注册的内容，提高了开发效率。

为了使用 hbs 模块，我们首先需要在 Express.JS 项目中安装该模块。可以通过以下命令进行安装：

npm install hbs

安装完成后，在 Express.JS 项目的入口文件中引入 hbs 模块：

Javascript
const hbs = require('hbs');

接下来，我们可以通过以下代码设置 hbs 模块的相关配置：

Javascript
app.set('view engine', 'hbs');
app.set('views', path.join(__dirname, 'views'));

其中，view engine 设置为 'hbs' 表示使用 hbs 模块作为模板引擎，views 则指定了存放模板文件的目录。

现在，我们可以在 .hbs 文件中注册部分内容了。在 .hbs 文件中，我们可以使用 {{#block}} 和 {{/block}} 标签包裹需要注册的内容。例如，我们可以创建一个名为 'header' 的注册块，并在其中定义网页的头部内容：

html
<!-- views/header.hbs -->
{{#block 'header'}}
    <header>
        <h1>网站标题</h1>
        <nav>
            首页
            关于
            联系我们
        </nav>
    </header>
{{/block}}

在上述代码中，我们使用 {{#block 'header'}} 开始注册块，然后在其中定义了网页的头部内容，最后使用 {{/block}} 结束注册块。

接下来，我们需要在需要渲染的页面中使用这个注册块。在 .hbs 文件中，我们可以使用 {{> partialName}} 语法来引用其他模板文件。例如，我们可以在首页的 .hbs 文件中使用 'header' 注册块：

html
<!-- views/index.hbs -->
{{> header}}
<mAIn>
    <h2>欢迎访问首页</h2>
    
这是首页的内容。
</mAIn>

在上述代码中，我们使用 {{> header}} 引用了 'header' 注册块，这样在渲染首页时，'header' 注册块中的内容会被插入到相应的位置。

通过上述步骤，我们就可以在 Express.JS 中使用 hbs 模块从 .hbs 文件中注册部分内容了。这样，我们可以将页面的不同部分拆分开来，提高代码的可读性和维护性。

示例代码：

Javascript
const express = require('express');
const app = express();
const path = require('path');
const hbs = require('hbs');
app.set('view engine', 'hbs');
app.set('views', path.join(__dirname, 'views'));
// 注册一个名为 'header' 的块
hbs.registerPartial('header', '{{#block "header"}}<header><h1>网站标题</h1><nav>首页关于联系我们</nav></header>{{/block}}');
app.get('/', (req, res) => {
    res.render('index');
});
app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

在上述示例代码中，我们注册了一个名为 'header' 的块，并在其中定义了网页的头部内容。然后，在根路由中使用 res.render('index') 渲染了首页，其中包含了 'header' 块的引用。最后启动了 Express.JS 服务器，监听在 3000 端口。

通过上述代码，我们可以在 Express.JS 中使用 hbs 模块从 .hbs 文件中注册部分内容，并在渲染页面时使用这些注册的内容，提高开发效率和代码的可读性。