我完全懂你踩的这个坑——res.render()本质是生成完整的HTML响应并发送给客户端，每个HTTP请求只能发送一次响应。你连续调用三次res.render()的话，第一次调用就已经把响应头和内容发出去了，后面两次会直接抛出Cannot set headers after they are sent to the client的错误，这是Node.js/Express的基础规则。

下面给你三种实用的解决方案，按推荐程度排序：

1. 用Pug的模板继承（最规范的方式） #

这是Pug设计的核心用法之一，适合构建有统一布局的页面。你可以先定义一个基础布局模板，然后让其他模板继承它并填充内容块。

比如先写一个layout.pug作为页面骨架：

doctype html
html
  head
    title 我的网站
  body
    // 留空的内容块，由子模板填充
    block main-content
    // 底部区块
    block page-footer

然后写body.pug继承布局并填充主体内容：

extends layout

block main-content
  div.content-wrap
    h1 欢迎访问
    p 这是页面的主体内容

再写footer.pug（也可以直接在layout里固定，或让子模板按需覆盖）：

extends layout

block page-footer
  footer.site-footer
    p © 2024 我的网站 保留所有权利

最后在路由里只需要渲染最终的子模板即可（它会自动加载layout和对应的footer）：

app.get('/', (req, res) => {
  res.render('body'); // 自动继承layout并包含footer内容
});

2. 在主模板中用include组合多个文件 #

如果你的模板没有复杂的继承关系，只是想简单拼接多个Pug片段，可以创建一个入口模板，把需要的文件include进去，然后只调用一次res.render()。

比如创建index.pug：

// 注意：如果layout是完整的HTML结构，不要重复include带根标签的模板，这里假设layout是片段
include ./layout.pug
include ./body.pug
include ./footer.pug

然后路由里：

app.get('/', (req, res) => {
  res.render('index'); // 一次性渲染所有组合的模板
});

⚠️ 提示：如果layout.pug已经包含了doctype、html等根标签，不要重复include其他带根标签的模板，否则会生成无效的HTML。

3. 动态传递模板路径实现按需加载 #

如果需要根据不同请求动态切换不同的body或footer模板，可以在路由里传递变量，然后在主模板中动态include对应的文件。

路由代码：

app.get('/page1', (req, res) => {
  res.render('dynamic-main', {
    bodyTemplate: 'body-page1',
    footerTemplate: 'footer-default'
  });
});

app.get('/page2', (req, res) => {
  res.render('dynamic-main', {
    bodyTemplate: 'body-page2',
    footerTemplate: 'footer-special'
  });
});

然后写dynamic-main.pug：

doctype html
html
  head
    title 动态页面
  body
    // 动态加载指定的body模板
    include ./#{bodyTemplate}.pug
    // 动态加载指定的footer模板
    include ./#{footerTemplate}.pug

这样就能根据不同的请求路径，加载不同的模板片段了。

总结一下：永远记住一个请求对应一个响应，res.render()只能调用一次，所有模板的组合逻辑应该放在Pug模板层面，而不是在路由里多次调用渲染方法。

内容的提问来源于stack exchange，提问作者Zoro Raka