私はNode.js、Express 4、およびHandlebarsテンプレートプロセッサを使用しています。 Handlebarsでレンダリングしているページビューの中には、数kBの静的インラインSVGコードがあります。 SVGコードをHandlebarsレイアウトテンプレートに含める別のファイルに置く簡単でクリーンな方法はありますか？理想的には、このインクルードファイルの拡張子は.svgですが、.hbsは許容されます。インクルードファイルをHandlebarsレイアウトに渡す
のように、SVGを追加するファイル。そして、svgファイルを文字列にロードし、ハンドルバーテンプレートに渡して終了しました。 main.hbsが含まれてい
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
});
});
<body class="ng-cloak">
<div class="inline-svg">
{{{svgTemplate}}}
</div>
....
</body>
プロジェクトで静的アセットフォルダ（例：/public）を作成し、include it with Express：app.use(express.static('public')); .svgファイルをそこに配置できます。あなたのハンドルバーで次に
を使用すると、通常のHTMLプロジェクトと同じように、単に、私は同じ問題を解決して、昨日<img src="your.svg">
imgタグを使用してSVGファイルをリンクすると、SVGイメージのスタイルを設定するCSSの機能が制限されます。 HTMLのインラインSVGを使用すると、SVGがDOMにロードされ、CSSを使用して再スタイリングできるようになります。私は膨大なマークアップを避けるためにインラインSVGをHandlebarsインクルードファイルに入れる方法を探しています。 – natesrc
あなたは、ハンドル部分と、ファイルの内容が含まれるようにhandlebars-partial-fileを試してみることができます。
Romick私は、Handlebars partialsを使ってファイルを含めるよりも、あなたのソリューションが好きです。あなたのソリューションは、インクルードファイルの.svg拡張を許可します。 – natesrc