1

私は、一般的な慣行に対する純粋なフロントエンドソリューションを考え出そうとしています。

以前は、再利用されたWebサイト要素（、、、など）のHTMLを<nav>ファイルに<header>保存し、php関数を使用してこれらを複数のページで呼び出していました。もちろん、これによりサイト全体で変更を加えることが容易になり、私の生活が楽になります。<footer>functions.php

ただし、これを行うためにPHP（または以前はASP）を使用したくありません。Javascript、jQuery、さらにはNodeでこれを行うためのクリーンな方法を知っている人はいますか？writeNav();明確にするために、ナビゲーションのHTMLをプルする（のような）HTMLの関数を呼び出したいと思います。<script>可能であれば、どこにもタグを含めたくありません。

4

4 に答える 4

3

「他の場所で再利用できるHTMLのチャンクのライブラリを構築する」ための非常に一般的な解決策の1つは、「テンプレート化」です。選択できるテンプレートライブラリは多数ありますが（Underscoreには独自の小さなテンプレート関数もあります）、Handlebars.jsは非常に堅牢でありながら非常にシンプルなので、最初に確認することをお勧めします。

ハンドルバーテンプレートを使用すると、HTMLを好きなように保存できます。

  • .jsファイルの文字列で
  • <script type='text/handlebars'>HTMLページのタグで、または
  • 単一のJSファイルにコンパイルされる個別のhtmlファイル

また、HTMLの小さな部分を入れ替えることができるので、たとえば、全体で使用されるヘッダーを作成できますが、次のようにタイトルを置き換えることができます。

<h3>{{title}}</h3>

Handlebarsサイト（http://handlebarsjs.com/）には優れた実行方法があります。私はそれを強くお勧めします。

于 2012-12-05T22:37:22.680 に答える
0

これはjQueryでは簡単です。

function writeP(str){
    document.write($('<p />').text(str).get(0));
}

次に、次のようなことを行うことができます。

<div class="foo">
    <script type="text/javascript">writeP('hello');</script>
</div>

...結果は次のようになります：

<div class="foo">
    <p>hello</p>
</div>

その例はばかげていますが、メカニズムはあなたが達成しようとしていることの精神にあると私は信じています。

乾杯

于 2012-12-05T22:27:02.887 に答える
0

あなたが話しているのはhtmlインクルードだと思います。

これは実際には生産に値するソリューションではありませんが、プロトタイピングフェーズを通過します。

jQueryを使用して、これを$（document）.ready（）コールバックに含めます。

$(".include").each(function() {
    var inc = $(this);
    $.ajax({
        url : inc.attr("title"),
        dataType : 'html',
        success : function(data) {
        inc.replaceWith(data);
        console.log("adding " + inc.attr("title"));
    });

次に、本文のhtmlファイルを含める場合は、次のようにします。

<div class="include" title="path/to/html/file.html"></div>

「include」属性を持つすべての要素（div、spansなど）は、title属性のファイルパスのコンテンツに置き換えられます。

注：このプロセスでは、タグ全体が置き換えられます。

于 2012-12-05T22:36:21.303 に答える
0

HTMLの記述方法を整理するだけの場合は、インクルードをサポートするBBEditのようなテキストエディタもあります。

于 2012-12-05T22:36:47.190 に答える