将包含文件传递到 Handlebars 布局中答案

【问题标题】：Passing an include file into a Handlebars layout将包含文件传递到 Handlebars 布局中
【发布时间】：2017-02-11 07:50:12
【问题描述】：

我正在使用 Node.js、Express 4 和 Handlebars 模板处理器。我用 Handlebars 渲染的一些页面视图有几 kBytes 的静态内联 SVG 代码。是否有一种简单干净的方法可以将 SVG 代码放入单独的文件中以包含在 Handlebars 布局模板中？理想情况下，此包含文件应具有 .svg 扩展名，但可以接受 .hbs。

【问题讨论】：

标签： javascript node.js svg handlebars.js express-4

【解决方案1】：

昨天我正在解决同样的问题。我完成了将 svg 文件加载到字符串中，然后将其传递给车把模板。

var svgTemplate = fs.readFileSync('./public/app/build/images/spriteAll.svg', 'utf8');

var express = require('express'),
    router = express.Router();

router.get('/',  function (req, res) {
    res.render('main', {
        svgTemplate: svgTemplate
    });
});

//main.hbs 包含： ...

<body class="ng-cloak">
    <div class="inline-svg">
        {{{svgTemplate}}}
    </div>
....
</body>

【讨论】：

Romick 我更喜欢您的解决方案，而不是使用 Handlebars partials 来包含文件。您的解决方案允许包含文件的 .svg 扩展名。
但如果它是一个车把部分，它将被包含在车把缓存中。每次请求 / 时，此解决方案都会让请求等待从驱动器读取 svg 文件。当节点启动时，我至少会将我所有的 SVG 文件读入内存。
但是我的解决方案已经按照你说的做。我有收集所有 svg 文件的 gulp 进程，处理它们并返回一个 svg 文件。然后当服务器启动时，我将这些文件读入一个字符串，并且该字符串在节点服务器启动时一直在内存中

【解决方案2】：

你可以在你的项目中创建一个静态资源文件夹（例如/public），然后include it with Express:app.use(express.static('public'));把你的.svg文件放在那里。

然后在您的车把文件中添加 SVG，就像在普通 HTML 项目中一样，例如 <img src="your.svg">

【讨论】：

Ben 使用 img 标签链接 SVG 文件会限制 CSS 设置 SVG 图像样式的能力。在 HTML 中使用内联 SVG 将 SVG 加载到 DOM 中，从而可以使用 CSS 重新设置样式。我正在寻找一种将内联 SVG 放入 Handlebars 包含文件的方法，以避免标记臃肿。

【解决方案3】：

您可以尝试 handlebars-partial-file 将文件内容包含为 Handlebars 部分。

【讨论】：