是否可以创建一个 Jade mixin,它从文件系统读取文件,并将其回显到呈现的 HTML 中?
我试过了...
mixin svg(file)
- var fs = require("fs");
- var xml = fs.readFileSync(file)
div= xml
...但它失败了,因为 require
不存在。
最佳答案
我想有两种方法可以实现这一点。后一个只是展示了直接的方法,以防你不接受使用 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 中使用传递的变量来包含文件。但是:只要您不打算用额外的逻辑来丰富您的混合,这个解决方案甚至不会产生(方式)更多的代码。
关于javascript - 在 Jade 模板中包含 SVG xml,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23907512/