Передача включаемого файла в макет Handlebars

Я использую Node.js, Express 4 и обработчик шаблонов Handlebars. Некоторые просмотры страниц, которые я визуализирую с помощью Handlebars, содержат несколько килобайт статического встроенного кода SVG. Есть ли простой чистый способ поместить код SVG в отдельный файл, который будет включен в шаблон макета Handlebars? В идеале этот включаемый файл должен иметь расширение .svg, но допускается и .hbs.


node.js javascript svg handlebars.js express-4
person natesrc    schedule 11.02.2017    source источник

Ответы (3)


arrow_upward
3
arrow_downward

вчера решал такую ​​же задачу. И я закончил загрузку файла 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>
person Romick    schedule 14.02.2017
comment
Romick Мне нравится ваше решение больше, чем использование частей Handlebars для включения файла. Ваше решение допускает расширение .svg во включаемом файле. - person natesrc; 16.02.2017
comment
Но если бы это был частичный руль, он был бы включен в кеширование руля. В этом решении запрос будет ожидать чтения файла svg с диска каждый раз, когда запрашивается /. Я бы по крайней мере прочитал весь свой файл SVG в память при запуске узла. - person G Man; 28.03.2019
comment
Но мое решение уже делает то, что вы только что сказали. У меня есть процесс gulp, который собирает все файлы svg, обрабатывает их и возвращает один файл svg. Затем, когда сервер запускается, я читаю этот файл в строку, и эта строка все время находится в памяти, пока сервер узла работает. - person Romick; 28.03.2019

arrow_upward
0
arrow_downward

Вы можете создать папку статических ресурсов (например, /public) в своем проекте и включить ее в Express: app.use(express.static('public')); Поместите туда свой файл .svg.

Затем в файле handlebars просто добавьте SVG, как в обычном HTML-проекте, например <img src="your.svg">.

person Shruggie    schedule 11.02.2017
comment
Бен, использующий тег img для связывания файла SVG, ограничивает возможности CSS по стилю изображения SVG. Использование встроенного SVG в HTML загружает SVG в DOM, делая его доступным для изменения стиля с помощью CSS. Я ищу способ поместить встроенный SVG во включаемый файл Handlebars, чтобы избежать раздутой разметки. - person natesrc; 11.02.2017

arrow_upward
0
arrow_downward

Вы можете попробовать handlebars-partial-file, чтобы включить содержимое файла в качестве Ручки частичные.

person Michio    schedule 15.01.2018