我如何在nunjucks模板中使用SVG

Question

我想创建一个 nunjucks 模板来从目录动态加载 SVG，通过传递图标名称，模板应该使用 javascript 渲染 SVG 的内容

尝试过 {{% include .SVG %}}

Answer 1

您没有提供您在何处（服务器端或浏览器中）使用nunjucks的任何信息，所以我认为它是一个浏览器。

您的目标是通过提供的网址将一些文件内容放置到页面上。可以通过自定义函数来解决：

{{ addIcon ('yourfile.svg') }}

。但有一个问题：默认情况下

nunjucks

用于同步模式，而加载文件（

fetch

）是异步操作。有3种方法可以解决。

1. 在async模式下使用nunjucks。示例是这里。
2. 在调用 nunjucks-render 之前预加载所有 svg 并将图标数组传递给渲染器。
3. 将一些特定的静态块放置到页面并通过突变观察者修改它。

var nunjucks  = require('nunjucks');
var env = nunjucks.configure();
env.addFilter('addIcon', function(file) {
    return  `<div class = "runtime-icon" filename = '${file}'></div>`;
});
// With it you can call {{ addIcon('my.svg') }} in a template 
// to add on a page `<div class = "runtime-icon" filename = 'my.svg'></div>`

...
function loadIcon (mutations) {
    // scan page for a new element with runtime-icon-class
    // get its filename-attribute
    // fetch file
    // replace div-element by the file content
}

const observer = new MutationObserver(loadIcon)
observer.observe(document, {childList: true, subtree: true})