Handlebars模板渲染异常：首页显示布局内容，关于页无法正常加载

核心问题：express-handlebars的默认布局机制 #

express-handlebars会自动使用layouts目录下的main.handlebars作为全局默认布局，所有通过res.render()渲染的页面，都会被嵌套到这个布局中。你的问题根源就在这个机制上：

• home.handlebars为空却显示main内容：因为默认布局main.handlebars被自动应用，home页面本身没有内容，所以直接显示布局里的"welcome to home"。
• about页面内容不显示：大概率是main.handlebars里没有添加{{{body}}}占位符——这个占位符是用来承载页面（比如about、home）内容的位置，没有它，页面内容就无法被插入到布局中。
• 删除layouts文件夹报错：因为express-handlebars默认会去查找main.handlebars作为默认布局，删除后找不到这个文件，所以抛出错误。

具体解决步骤 #

1. 修复默认布局的占位符

修改views/layouts/main.handlebars，确保添加{{{body}}}占位符，把原来的"welcome to home"移到home页面中：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>我的网站</title>
</head>
<body>
    {{{body}}} <!-- 必须保留这个占位符，页面内容会渲染在这里 -->
</body>
</html>

2. 填充页面内容

在home.handlebars中添加你想显示的内容：

<h1>welcome to home</h1>
<!-- 其他home页面的内容 -->

在about.handlebars中添加内容：

<h1>关于我们</h1>
<p>这是about页面的内容</p>

3. 自定义布局规则（可选）

• 如果某个页面不想使用默认布局，可以在渲染时指定layout: false：

app.get('/about',(req,res)=>{
  res.render('about', { layout: false }) // 不使用任何布局
})

• 如果想修改全局默认布局，或者禁用默认布局，可以在配置engine时设置：

// 禁用全局默认布局，删除layouts文件夹也不会报错
app.engine('handlebars', engine({ defaultLayout: false }));

// 或者指定其他布局作为默认
app.engine('handlebars', engine({ defaultLayout: 'other-layout' }));

内容的提问来源于stack exchange，提问作者denis kiplangat