javascript - 在 Jade 模板中包含 SVG xml

Question

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

我试过了...

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

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

Answer 1

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

A: 将变量require 或fs 传递给你的jade 模板

确保在 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 模板，并使用您的原始混合代码。请注意，在任何情况下，您都必须禁止使用 != 转义输出，以便传输 SVG 标记，以便它被解释和呈现，而不是显示为 (HTML) 文本。还要注意 fs 存在于您的应用程序/ Controller 代码中，路径必须相对于它表示，例如:

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

B: 或者只使用 include(没有 mixins)

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

div
  include images/my-logo.svg

也做这个工作。不幸的是，这不是动态工作的，所以你不能在 mixin 中使用传递的变量来包含文件。但是:只要您不打算用额外的逻辑来丰富您的混合，这个解决方案甚至不会产生(方式)更多的代码。