使用Pug渲染区块内容失败求助

数据老陈

2026-6-25

问题解决：Pug模板继承后页面无内容渲染

针对你遇到的Pug布局继承后页面空白的问题，按以下步骤排查和解决：

1. 确认Express模板配置正确性

首先检查你的Express应用是否正确设置了Pug模板引擎和视图目录：

const express = require('express');
const path = require('path');
const app = express();

// 必须配置的两项
app.set('view engine', 'pug');
// 替换为你的Pug文件实际所在目录，比如项目根目录下的views文件夹
app.set('views', path.join(__dirname, 'views'));

如果views路径设置错误，Express找不到模板文件，会直接导致渲染失败。

2. 检查路由渲染代码

确保你在路由中正确渲染home.pug，避免路径或文件名错误：

app.get('/', (req, res) => {
  // 因home和layout在同一目录，直接写'home'即可
  res.render('home');
});

注意文件名大小写：Linux/macOS系统对文件名大小写敏感，Home.pug与home.pug会被视为不同文件，必须严格匹配。

3. 验证Pug语法缩进

Pug对缩进极其敏感，不能混合空格和Tab，且嵌套层级必须准确：

确认layout.pug中block appContent的缩进层级正确（在body标签下，与header、footer块同级）
确认home.pug中main标签正确缩进在block appContent下方，示例：

extends ./layout

block appContent
  main
    p Hello

4. 捕获编译错误日志

启动Express时观察控制台输出，或在渲染时添加错误回调定位问题：

app.get('/', (req, res, next) => {
  res.render('home', (err, html) => {
    if (err) {
      // 打印错误信息，排查模板编译问题
      console.error('Pug渲染错误:', err);
      return next(err);
    }
    res.send(html);
  });
});

常见错误包括路径错误、语法遗漏（比如标签未闭合、括号缺失）等。