Express框架下Pug渲染模板可否不通过render传参访问服务端变量？

问题答复 #

默认情况下Pug模板的作用域是隔离的，不能直接访问应用代码里定义的普通变量，必须通过locals体系传递。不过有两种不需要在每个路由的res.render里手动传参的整洁实现方案，完全满足你只修改一次父模板、新增路由无需额外处理的需求：

方案1：挂载到app.locals（推荐适配你的场景） #

适合和请求上下文无关、定期更新的全局变量，所有模板默认可以直接读取该变量，无需任何路由额外处理。

实现代码 #

应用入口（如app.js）中直接挂载：

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

// 挂载全局变量，所有模板可直接访问
app.locals.globalTip = "当前版本v2.4.1，最近更新时间：2024-05-20";

// 定时更新变量值的逻辑示例
setInterval(() => {
  app.locals.globalTip = fetchLatestTip(); // 调用你自己的更新逻辑即可
}, 1000 * 60 * 60); // 每小时更新一次

Pug模板中使用 #

直接在公共父模板里调用即可，所有继承该模板的页面自动生效：

// 公共父模板代码
.header
  .global-notice= globalTip

方案2：全局中间件挂载到res.locals #

如果变量需要和请求上下文绑定（比如根据用户登录状态、所在地区展示不同内容），可以用全局中间件实现，所有请求会自动注入该变量：

实现代码 #

在所有路由定义之前添加中间件：

app.use((req, res, next) => {
  // 可以读取请求相关信息生成变量
  res.locals.userTip = `你好，${req.user?.nickname || '访客'}，今日签到可领10积分`;
  next();
});

Pug模板中使用 #

和方案1一致，直接在父模板里调用userTip即可。

补充说明 #

两种方案的变量优先级为：res.render手动传入的变量 > res.locals变量 > app.locals变量，重名时高优先级变量会覆盖低优先级变量。

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