Express多路由下Pug模板Block继承失效问题求助

安全阿岳

2026-5-14

解决Pug Block继承不生效的问题

嘿，我来帮你排查这个Block继承不生效的问题！首先看你的代码，语法上其实没大问题，大概率是你路由里渲染的是父模板about.pug，而不是子模板h2.pug——这是新手用Pug继承最容易踩的坑。

下面一步步帮你解决：

检查路由渲染目标
Pug的继承逻辑是：只有当你渲染子模板时，它才会自动加载父模板并替换对应的block内容。如果你的路由代码里直接渲染about.pug，那只会显示父模板的默认h1，完全不会用到h2.pug的代码。
举个Express路由的例子：

// 错误写法（直接渲染父模板）
app.get('/about', (req, res) => {
  res.render('about', { name: 'Ronnie' }); // 只会显示「h1 Hello Ronnie」
});

// 正确写法（渲染子模板）
app.get('/h2-page', (req, res) => {
  res.render('h2', { name: 'Ronnie' }); // 会显示「h2 hello PPL的内容」
});

验证路径与缩进（二次确认）
- 确保h2.pug和about.pug在同一个views目录下，extends about.pug的路径是正确的。如果子模板在子文件夹中，路径要对应调整（比如extends ../about.pug）。
- 检查缩进：Pug严格依赖缩进层级，block content下面的h2必须比block多缩进一级（你的代码示例里是对的，但如果实际文件中缩进错误也会导致继承失效）。
清除模板缓存（开发环境常见问题）
开发环境下，部分框架（比如Express）会默认缓存模板文件，修改子模板后可能不会立即生效。你可以：
- 直接重启服务器，确保新的模板内容被加载；
- 或者在框架配置中禁用模板缓存，比如Express中添加：
```
app.set('view cache', false);
```