静的ウェブサイトのすべてのページにコンテンツコンテナを追加するためにmustache.jsを使用する

Question

すべてのページのコンテンツが同じコンテンツコンテナ（navbar、footerなど）で囲まれた静的なWebサイトを構築したいとします。これを行うには、mustache.jsのようなテンプレートエンジンを使用してコンテンツコンテナを定義し、テンプレートのコンテンツ領域にページコンテンツを挿入してテンプレートをレンダリングします。

これは私が考えているものです。

// Template 
<h1>Website</h1> 
<p>Navbar here</p> 
<div class="content-area">{{{content_html}}}</div> 
<p>Footer here</p> 

異なる部分をどこに置くか、私はで立ち往生午前の問題があります。私の心に来る唯一の解決策は以下のとおりです。

• レンダリングおよび挿入機能の中を呼び出しsite_content.htmlファイル
• にページの内容を入れて
• render_template.jsファイルにテンプレートおよびレンダリング/挿入コードを入れてください実際site.html

から正しいコンテンツのHTMLを渡し、実際のsite.htmlにコンテンツのHTMLを入れて、テンプレートをレンダリングするためにそれを使用する方法はありますか？

Answer 1

私はこれが口ひげの目的だとは思わない。 MustacheJsは、完全なhtmlページではなく、jsオブジェクトからの変数値によって完成される要素テンプレートを作成するために使用する必要があります（たとえば、テンプレートはユーザーの詳細ページのhtml構造です、そして、口髭によって挿入される変数は、 first-name、last-name ...のようなユーザのために、この場合、同じテンプレートを再利用して、異なるユーザを表示することができます）。

動的言語（php、pythonなど）を使用できない場合は、私は少し違う方法で対応します。

私はあなたのページ（例：ヘッダー、navbar、フッター）のredondant部分ごとに別々のhtmlページを作成します。次に、私はあなたのコンテンツページを作成して、あなたがこのプロセスを使用することができるようにします（GruntJSでこのプラグインを使用することができます：https://github.com/vanetix/grunt-includes）

もう一つの方法はコンポーネントテンプレートを扱うjsフレームワーク含まれていますが、ページにいくつかのhtmlパーツを含める必要がある場合は、これは非常に複雑です。