在Pug与Express.js中能否实现布局路径参数化？

当然可以实现你想要的动态布局路径效果！不过你当前的写法有个关键问题：Pug的extends是编译阶段指令，它在模板解析时就会处理，而不是运行时。这意味着#{layout}这种插值语法在extends里是不生效的——Pug还没拿到变量值的时候，就已经在解析extends语句了。

下面给你两种可行的解决方案，你可以根据自己的场景选择：

方案1：编译前动态替换模板内容 #

既然extends需要在编译时确定路径，那我们可以先把模板里的占位符替换成实际的布局路径，再交给Pug编译。具体步骤如下：

1. 读取你的login页面模板内容
2. 替换掉extends #{layout}为实际的布局路径字符串
3. 编译并渲染修改后的模板

代码示例：

const fs = require('fs');
const pug = require('pug');

// 读取login模板文件内容
const loginTemplateContent = fs.readFileSync(loginPagePath, 'utf8');
// 替换extends的占位符为真实路径
const dynamicTemplate = loginTemplateContent.replace(
  'extends #{layout}', 
  `extends ${layoutPath}`
);
// 编译渲染模板
const renderedHtml = pug.render(dynamicTemplate);
res.send(renderedHtml);

这种方法的好处是不需要修改现有模板的结构，适合快速解决简单场景。不过要注意路径的正确性，如果是相对路径，最好配合basedir选项指定基础目录，避免Pug找不到文件：

pug.render(dynamicTemplate, { basedir: __dirname });

方案2：反转模板继承关系（更符合Pug设计思想） #

如果你的项目模板结构比较复杂，更推荐用这种方式——把页面内容作为block，动态渲染布局文件并传入页面内容。

步骤1：调整页面模板（login.pug） #

把页面的核心内容放在block里，不需要再写extends：

block pageContent
  h1 This is a login page

步骤2：布局模板（比如layout.pug） #

保留通用的页面结构，留出block位置：

html
  head
    title My Application
  body
    header
      h2 Site Header
    main
      block pageContent
    footer
      p Copyright 2024

步骤3：在Express中动态渲染 #

先渲染页面模板拿到block内容，再把它传给布局模板渲染：

// 渲染页面模板，提取block内容
const pageBlock = pug.renderFile(loginPagePath);
// 渲染布局模板，传入页面内容
const renderedHtml = pug.renderFile(layoutPath, {
  pageContent: pageBlock
});
res.send(renderedHtml);

或者更优雅一点，用Pug的include结合动态路径（注意用!{}做不转义插值）：
创建一个中间模板dynamic-wrapper.pug：

extends !{layoutPath}
block pageContent
  include !{pagePath}

然后在Express中：

res.send(pug.renderFile('path/to/dynamic-wrapper.pug', {
  layoutPath: layoutPath,
  pagePath: loginPagePath,
  basedir: __dirname
}));

这种方法的优势是结构更清晰，符合Pug的模板继承设计，也方便后续扩展更多布局和页面。

注意事项 #

• 确保layoutPath和loginPagePath是正确的绝对路径，或者配合basedir选项指定相对路径的基础目录，避免Pug找不到文件。
• 如果使用动态路径插值，要注意路径的安全性，避免传入恶意路径导致文件读取漏洞。

内容的提问来源于stack exchange，提问作者Serhii Pemakhov