在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是可以接受的.第一个解决方案包含了您的方法:

答:传递变量require或fs你的玉模板

确保在玉器模板解析期间所需的功能可用(作用域).假设您正在使用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(不含mixins)

翡翠能够包含其他类型的内容,所以很简单

div
  include images/my-logo.svg

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