新手求助：如何用Node.js与Handlebars实现多模板文件分块复用

嘿，作为刚入坑Node.js和Handlebars的新手，我完全懂你想把页面拆分成页眉、正文、页脚这类独立文件的需求——这刚好是Handlebars模块化特性的核心用法之一，操作起来其实很简单，我给你一步步捋清楚：

第一步：规划你的项目结构 #

首先得把各个区块文件整理到专门的目录里，Handlebars习惯把这些复用的小模板叫做partials（部分模板），推荐的结构大概是这样：

你的项目文件夹/
├── app.js          # Node.js主文件
├── views/
│   ├── index.hbs   # 主页面模板
│   └── partials/   # 存放所有区块模板的文件夹
│       ├── header.hbs
│       ├── content.hbs
│       └── footer.hbs

第二步：编写各个区块的Partial文件 #

每个区块就是独立的Handlebars文件，比如：

• views/partials/header.hbs：

<header>
  <h1>这是我的网站页眉</h1>
  <nav>
    <a href="/">首页</a> | <a href="/about">关于我们</a>
  </nav>
</header>

• views/partials/content.hbs：

<main>
  <p>这里是正文内容，可以根据需要动态渲染数据哦！</p>
  {{#if user}}
    <p>欢迎回来，{{user.name}}！</p>
  {{/if}}
</main>

• views/partials/footer.hbs：

<footer>
  <p>© 2024 我的小网站 | 版权所有</p>
</footer>

第三步：配置Node.js中的Handlebars环境 #

假设你用的是最常用的express-handlebars包（如果还没装，先跑npm install express express-handlebars），在app.js里这么配置：

const express = require('express');
const exphbs = require('express-handlebars');
const app = express();

// 配置Handlebars引擎，指定partials的目录
const hbs = exphbs.create({
  partialsDir: './views/partials', // 告诉引擎去哪里找partials
  defaultLayout: false // 如果不需要全局布局的话可以设为false，或者用自定义布局
});

// 注册Handlebars为模板引擎
app.engine('hbs', hbs.engine);
app.set('view engine', 'hbs');
app.set('views', './views');

// 路由，渲染主页面
app.get('/', (req, res) => {
  // 可以传递动态数据到模板里
  res.render('index', {
    user: { name: 'Khalid' }
  });
});

app.listen(3000, () => {
  console.log('服务器跑在http://localhost:3000啦！');
});

第四步：在主模板中引入各个Partials #

打开views/index.hbs，用{{> partial文件名}}的语法就能把对应的区块引入进来，比如：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>我的网站</title>
</head>
<body>
  <!-- 引入页眉区块 -->
  {{> header}}
  
  <!-- 引入正文区块 -->
  {{> content}}
  
  <!-- 引入页脚区块 -->
  {{> footer}}
</body>
</html>

最后跑起来试试！ #

在终端里执行node app.js，然后打开浏览器访问http://localhost:3000，你就能看到把三个独立文件拼起来的完整页面啦！

如果之后需要修改某个区块，直接改对应的partial文件就行，不用动主模板，维护起来超级方便～

内容的提问来源于stack exchange，提问作者khalid mokhliss