是否可以创建一个 Jade mixin，从文件系统中读取文件，并将其回显到呈现的 HTML 中？
我试过这个...
mixin svg(file)
- var fs = require("fs");
- var xml = fs.readFileSync(file)
div= xml
...但它失败了，因为require 不存在。
【问题讨论】：
标签： javascript svg pug
我想有两种方法可以实现这一点。后一个只是显示直接的方式，以防您可以接受不使用 mixins。第一个解决方案总结了您的方法：
require 或 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')
Jade 可以包含其他类型的内容，所以一个简单的
div
include images/my-logo.svg
也可以完成这项工作。不幸的是，这不能动态工作，因此您不能在 mixins 中使用传递的变量包含文件。但是：只要你不打算用额外的逻辑来丰富你的 mixin，这个解决方案甚至不会产生（方式）更多的代码。
【讨论】：
!= 在 div 中，因为您在 div 中包含文件作为部分。
上面的答案确实有效，但如果你想做一个 SVG 内联。你可以这样做。
//- Cover.
.ywp_title
h1
| Some text
span
| More Span Text
svg.bg_svg(version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 430 100" style="enable-background:new 0 0 430 100;" xml:space="preserve")
g(style="fill: #BADA55;")
path(style="fill: pink;" class="public-spaces-bg-fill" d="M356.2,60.1C356.2,60.1,356.2,60.1,356.2,60.1c0.1,0,0.1,0,0.2,0C356.3,60.1,356.3,60.1,356.2,60.1 M424.4,73.2c0-2.8-2-6.1-3.2-9.8c-2-5.8-4-11.7-6.3-17.5c-0.1-0.2-0.1-0.3-0.2-0.5c0,0,0,0,0,0v0c-0.7-1.4-1.8-2.4-3.4-3.1 c-12-5.5-26.3-7.4-40.3-8.6c18,0.1,36,0.4,54,0.6c-0.6,0-4.5-13.4-4.9-14.3c-0.4-1-4.1-14.2-5.2-14.2C380.4,5.4,345.8,5,311.3,5.1 c-66.5,0.2-133.3,1.8-199.3,9.8c-20.8,2.5-41.7,5.4-62.2,9.6c-2.1,0.4-4.2,0.9-6.4,1.3l-17.7,4.4c-1.1,0.3-2.3,0.7-3.4,1.1 c-5.1,1.7-12.1,3.6-15.7,7.8c-1.2,1.4-1.7,2.8-1.2,4.6c0.3,1,0.7,2,1,3.1C13,71.7,18.1,75.5,20.1,76.6c7.7,4.1,16.4,6,25,7.5 c43.4,7.7,88,9.4,132.1,10.3c44.7,0.9,89.5,0.2,134.1-1.8c21.6-1,43.2-2.3,64.6-5c14.1-1.8,31.6-2.6,44.6-9.1 C423.3,76.9,424.4,75.2,424.4,73.2c0,0.1,0.1,0.2,0.1,0.2C424.5,73.4,424.4,73.3,424.4,73.2")
| and more text.
【讨论】：
object我运气比较好，比如
a.svg(href='/')
object(type="image/svg+xml" data="/img/#{data.menu.img}.svg")
| #{data.menu.title}
【讨论】：