通过Express路由传上下文至仅含Mixin的Pug文件无响应问题

我来帮你搞定这个问题～你现在的问题主要有两个核心点：一是Pug文件里只定义了mixin但没调用它，导致渲染时没有任何输出；二是得让mixin能正确拿到你传递的上下文数据。

第一步：优化Express路由（可选，但更清晰） #

你的路由代码本身是有效的，不过把数据包在一个命名对象里能避免变量名冲突，可读性也更强：

app.post('/comment', (req, res) => {
  const commentData = { text: 'working' };
  // 把数据挂载到locals的comment属性上
  res.render('comment-section', { comment: commentData });
});

第二步：修改Pug文件，调用Mixin并传递数据 #

Pug的mixin只是一个可复用的模板片段，定义完之后必须主动调用才会渲染。你有两种方式让mixin拿到数据：

方式1：调用Mixin时直接传参 #

这种方式更灵活，适合需要多次复用mixin的场景：

// 定义mixin时声明接收一个参数
mixin comment(commentText)
  div.comment-content
    div.row
      div.col-lg-1
        a(href="#")
          img(src="img/default_profile.jpg").comment-profile-img
      div.col-lg-10
        p.user-comment= commentText // 使用传入的参数

// 必须调用mixin，把Express传过来的comment.text传进去
+comment(comment.text)

方式2：Mixin直接访问全局上下文变量 #

如果这个mixin只用于当前页面，也可以直接访问Express传递到locals里的变量：

mixin comment()
  div.comment-content
    div.row
      div.col-lg-1
        a(href="#")
          img(src="img/default_profile.jpg").comment-profile-img
      div.col-lg-10
        p.user-comment= comment.text // 直接访问locals中的comment对象

// 调用mixin触发渲染
+comment()

如果想沿用你原来的路由写法（res.render('comment-section', test)，此时locals里直接有text变量），Pug可以改成这样：

mixin comment()
  div.comment-content
    div.row
      div.col-lg-1
        a(href="#")
          img(src="img/default_profile.jpg").comment-profile-img
      div.col-lg-10
        p.user-comment= text // 直接使用locals里的text变量

+comment()

关键原因总结 #

你之前的代码没反应，核心是只定义了mixin但没有调用它——Pug不会自动执行mixin，必须用+mixinName()的语法触发渲染。另外只要确保mixin能正确访问到你传递的上下文数据，两种方式选一种就能解决问题啦～

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