Я использую Node.js, Express 4 и процессор шаблонов Handlebars. Некоторые виды страниц, которые я просматриваю с Handlebars, имеют несколько kBytes статического встроенного SVG-кода. Есть ли простой способ поместить SVG-код в отдельный файл, который будет включен в шаблон макета Handlebars? В идеале этот файл должен иметь расширение .svg, но .hbs было бы приемлемым.Передача включенного файла в макет ручек
вчера я решал такую же проблему. И я закончил загрузку svg-файла в строку, а затем передал его в шаблон handlebars.
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>
Вы можете создать в своем проекте папку статических активов (например, /public) и include it with Express: app.use(express.static('public')); Поместите ваш .svg-файл туда.
Тогда в ваших рукоятках файл просто добавить SVG, как вы бы в обычном HTML-проект, как <img src="your.svg">
Бен, использующий тег img для связывания файла SVG, ограничивает способность CSS стилизовать образ SVG. Использование встроенного SVG в HTML загружает SVG в DOM, что делает его доступным для переустановки с помощью CSS. Я ищу метод для установки встроенного SVG в файл Handlebars, чтобы избежать раздутой разметки. – natesrc
Вы можете попробовать handlebars-partial-file включить содержимое файла как Рули частично.
Romick Мне нравится ваше решение лучше, чем использование партитур Handlebars для включения файла. Ваше решение разрешает расширение .svg для включенного файла. – natesrc