在 Jade 模板中包含 SVG xml

是否可以创建一个 Jade mixin，它从文件系统读取文件，并将其回显到渲染的 HTML 中？

我试过这个...

mixin svg(file)
    - var fs = require("fs");
    - var xml = fs.readFileSync(file)
    div= xml

...但它失败了，因为require不存在。

我想有两种方法可以实现这一目标。后一个只是显示了直接的方法，以防您可以接受不使用 mixins。第一个解决方案总结了您的方法：

A：传递变量require or fs到你的玉石模板

确保在jade模板解析期间所需的函数可用（作用域）。假设您使用的是 Express，这可能如下所示：

app.get('/', function(req,res) {
  res.render('portfolio.jade', {
    title: 'svg with jade test',
    fs: require('fs')
  })
});

现在你的 mixin 应该可以通过两个小修改来工作：

mixin svg(file)
  - var xml = fs.readFileSync(file)
  div!= xml

你甚至可以直接通过{ require: 'require' }作为 jade 模板的本地并使用您原来的 mixin 代码。请注意，在任何情况下，您都必须使用以下命令抑制转义输出!=为了传输 SVG 标记，以便对其进行解释和渲染，而不是显示为 (HTML) 文本。另请注意fs存在于您的应用程序/控制器代码中，并且必须相对于它表达路径，例如：

mixin('public/images/my-logo.svg')

B：或者只使用 include （不使用 mixin）

Jade 能够包含其他类型的内容，所以一个简单的

div
  include images/my-logo.svg

也做这项工作。不幸的是，这不能动态工作，因此您不能在 mixin 中包含使用传递变量的文件。但是：只要您不打算用额外的逻辑来丰富您的 mixin，这个解决方案甚至不会生成（方式）更多的代码。