在 Jade 包含中使用变量答案

【问题标题】：Use a variable in a Jade include在 Jade 包含中使用变量
【发布时间】：2023-03-08 22:00:01
【问题描述】：

我正在使用 Jade 和 Express，我想在我的 include 语句中使用一个变量。例如：

app.js

app.get('/admin', function (req, res) {
  var Admin = require('./routes/admin/app').Admin;

  res.render(Admin.view, {
    title: 'Admin',
    page: 'admin'
  });
});

layout.jade

- var templates = page + '/templates/'

include templates

当我这样做时，我收到错误EBADF, Bad file descriptor 'templates.jade'

我什至尝试过

include #{templates}

无济于事。

【问题讨论】：

我也在找这个。很惊讶这个功能还没有添加。对 repo 进行分叉，以了解实现此功能的难度。

标签： node.js express pug

【解决方案1】：

AFAIK JADE 不支持动态包含。我的建议是在模板之外“包含”，即

app.js

app.get('/admin', function (req, res) {
    var Admin = require('./routes/admin/app').Admin;
    var page = 'admin';

    var templates = page + '/templates/';

    // render template and store the result in html variable
    res.render(templates, function(err, html) {

        res.render(Admin.view, {
            title: 'Admin',
            page: page,
            html: html
        });

    });

});

layout.jade

|!{ html }

【讨论】：

似乎调用 render() 两次可能会对性能产生负面影响。
@StephenDavis 是的，但我怀疑这永远不会成为问题（数据库总是一个瓶颈）。
@freakish 确实，但多一秒总是一秒后；）
+1 话虽如此，这是我迄今为止找到的解决此问题的最佳方法。
这太糟糕了，我们不应该需要针对这种常见问题的复杂解决方法。

【解决方案2】：

这也有效：

//controller
var jade = require('jade');
res.render('show', {templateRender: jade.renderFile});


//template
!= templateRender('my/path/'+dynamic+'.jade', options)

这可能不会提高使用'view cache' 设置所期望的性能（它在 NODE_ENV === 'production' 中默认启用）。甚至破坏应用程序（例如，如果在部署新代码时硬盘上的文件不可用）。由于无法编译模板，因此尝试在客户端或同构应用程序中使用此技巧也不起作用。

【讨论】：

这太棒了
但不是用context调用函数，它应该是locals
jade-lang.com/api 一个选项对象，也用作本地对象。两者都是。
是的，没错。但是我尝试通过 context 并且它是 undefined 而locals 让我可以访问子模板中的当前上下文
嗯，这更像！

【解决方案3】：

发现此页面在谷歌上搜索相同的问题，但在不同的上下文中，所以我想我会将我的解决方案（阅读：解决方法）放在这里以供后代使用：

我想用从变量中提取的更多上下文来包围我的包含，例如（简化）：

- var templates = page + '/templates/'
- var headid = page + 'head'
- var imgsrc = '/images/' + page
div(id=headid)    
  h1 #{page}
  img(src=imgsrc)
div(id=page)
  include templates

由于那行不通（Jade 不支持动态包含，正如freakish 所指出的那样），我与 mixin 混合：

（编辑——比我之前的解决方法更优雅一点：）

mixin page1
  include page1/templates

mixin page2
  include page2/templates

...

- for (var i = 0; i < 3; i++)
  - var page = 'page' + i
  - var headid = page + 'head'
  - var imgsrc = '/images/' + page
  div(id=headid)    
    h1 #{page}
    img(src=imgsrc)
  div(id=page)
    +page

我之前的回答：

mixin templates(page)
  - var headid = page + 'head'
  - var imgsrc = '/images/' + page
  div(id=headid)    
    h1 #{page}
    img(src=imgsrc)

+templates('page1')
#page1
  include page1/templates/

+templates('page2')
#page2
  include page2/templates/

...

它并不优雅，如果你需要以这种方式包含多个东西，它也行不通，但至少 Jade 的一部分是动态的。

【讨论】：

【解决方案4】：

为什么不用玉继承？

在中间件级别呈现您想要的内容：

res.render('templates/' + template_name + '.jade')

写普通common.jade:

h1 This is a page
.container
  block sublevel
    h2 Default content

然后编写扩展common.jade的文件：

extends common.jade
block sublevel
  h2 Some things are here

【讨论】：

【解决方案5】：

现在是 2019 年，在 Pug（以前的 Jade）mixins 中使用变量变得很简单。

创建 mixin 时，您可以根据希望传递给 mixin 的值为其提供参数。您可以使用点表示法访问任何嵌套值。

mixinFile.pug：

mixin myMixin(parameter1, parameter2, parameter3)
    h2.MyHeading #{parameter1}
    p.MyParagraph #{parameter2.myVariable}
    .MyBox(id= parameter3.id)

index.pug：

include mixinFile
block content
    +MyMixin(variable1, variable2, variable3)

您可以在official Pug documentation on Mixins阅读更多内容。

【讨论】：