如何在 Express 中使用 Handlebars 模板引擎？-JavaScript中文网-JavaScript教程资源分享门户

推荐答案

在 Express 中使用 Handlebars 模板引擎，首先需要安装 express-handlebars 包，然后进行配置。以下是具体步骤：

安装依赖：
```
npm install express-handlebars
```

配置 Express 应用：

// www.javascriptcn.com code example
const express = require('express');
const exphbs = require('express-handlebars');

const app = express();

// 设置 Handlebars 为模板引擎
app.engine('hbs', exphbs({
  extname: '.hbs', // 设置文件扩展名为 .hbs
  defaultLayout: 'main', // 设置默认布局文件
  layoutsDir: __dirname + '/views/layouts/', // 设置布局文件目录
  partialsDir: __dirname + '/views/partials/' // 设置部分视图文件目录
}));

app.set('view engine', 'hbs'); // 设置视图引擎为 Handlebars
app.set('views', __dirname + '/views'); // 设置视图文件目录

// 路由示例
app.get('/', (req, res) => {
  res.render('home', {
    title: 'Home Page',
    message: 'Welcome to the Home Page!'
  });
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

创建视图文件：在 views 目录下创建 layouts/main.hbs 文件作为默认布局：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
  <title>{{title}}</title>
</head>
<body>
  {{{body}}}
</body>
</html>

在 views 目录下创建 home.hbs 文件作为主页视图：

<h1>{{message}}</h1>

本题详细解读

1. 安装 `express-handlebars`

express-handlebars 是一个 Express 的 Handlebars 模板引擎封装库，它使得在 Express 中使用 Handlebars 变得更加简单。通过 npm install express-handlebars 命令安装该库。

2. 配置 Express 应用

在 Express 应用中，使用 app.engine() 方法设置 Handlebars 为模板引擎，并指定文件扩展名、默认布局文件、布局文件目录和部分视图文件目录。然后通过 app.set('view engine', 'hbs') 设置视图引擎为 Handlebars，并通过 app.set('views', __dirname + '/views') 设置视图文件目录。

3. 创建视图文件

在 views 目录下创建布局文件和视图文件。布局文件通常包含 HTML 的基本结构，而视图文件则包含具体的内容。在布局文件中，使用 {{{body}}} 占位符来插入视图文件的内容。

4. 渲染视图

在路由处理函数中，使用 res.render() 方法渲染视图，并传递数据给视图。例如，res.render('home', { title: 'Home Page', message: 'Welcome to the Home Page!' }) 会渲染 home.hbs 视图，并将 title 和 message 数据传递给视图。

通过以上步骤，你可以在 Express 中成功使用 Handlebars 模板引擎来渲染动态内容。

如何在 Express 中使用 Handlebars 模板引擎？