6

同じナビゲーションメニューを複数のページに含めたいのですが、PHPをサポートしておらず、他の方法でサーバーに影響を与えることもできません。

メニューの更新が面倒になるため、HTMLをすべてのページにコピーして貼り付けることは避けたいと思います。

私が考えることができる2つのオプションは次のとおりです。

1）すべてのコンテンツが1つのページに存在するようにし、URLに追加されたキーワードに基づいて表示するコンテンツを決定します。

example.com/index?home
example.com/index?news

2）メニューを書き出す関数を含むjavascriptファイルを含め、各ページで関数を呼び出します

function setupMenu() {
    $("#nav").html("<ul class='nav'><li>home</li><li>news</li></ul>");
}

オプション1の場合、更新プロセスは1ページの1つのナビゲーションメニューの編集で構成されます。

オプション2では、更新はjavascriptファイルの関数を変更することを意味します

オプション1に関する私の懸念は、ページが表示する必要のない多くのコンテンツをロードする必要があるということです。オプション2に対する私の懸念は些細なことのように思えるかもしれませんが、コードが乱雑になる可能性があるということです。

ある方法でそれを行うことが他の方法よりも優れている理由はありますか？または、私が見逃している3番目の優れたオプションはありますか？

4

6 に答える 6

6

いくつかのオプションがあり、それぞれに長所と短所があります。

  • サーバーサイドインクルード、またはSSI。PHPをお持ちでない場合は、SSIもお持ちでない可能性が高く、このオプションでは、.htaccessファイルをいじくり回す必要があります。SSIの記述については、DominicP.の回答を確認してください。JavaScriptやフレームに対するSSIの利点は、ユーザーがJSを有効にする必要がないことです（多くのユーザーはそうではありません）。また、ナビゲーションの問題も発生しません。

  • フレーム。標準のフレームを使用してナビゲーションを独自の個別のファイルに配置することもできます。正しいスタイルを使用すると、シームレスになります。また、 iframeを使用して、サイドバーなど、サイトの任意の部分にナビゲーションを配置することもできます。フレーム、特に標準フレームの欠点は、ブックマーク、リンク、および進む/戻るボタンの動作がおかしくなる傾向があることです。利点として、フレームはブラウザへの準拠やサーバーのサポートを必要としません。

  • JavaScript。特にjQueryを使用している場合は、JSソリューションの優れた説明について、他の回答を参照できます。ただし、サイトが動的でないためにユーザーがJavaScriptを有効にしたくない場合は、多くの視聴者がメニューをまったく表示しないことを意味します。これは間違いなく悪いことです。

    • -
于 2012-08-16T19:10:02.340 に答える
4

はい.loadjQueryajax関数を使用します

$('#result').load('ajax/menu.html');

そうすれば、コードがクリーンに保たれ、PHPと同じように個別のHTMLファイルのインクルードを編集できます。

于 2012-08-16T18:57:02.910 に答える
3

このタスクにはAJAXを検討する必要があります。jQueryなどのサードパーティライブラリを含め、プレースホルダー内に個別のHTMLファイルをロードして、IDでターゲットにします。

たとえば、メインのHTMLページで：

<div id="mymenu"></div>

また、メインのHTMLでも、HEADセクションでは次のようになります。

$('#mymenu').load('navigation.html');

ただし、最善の策は、PHPまたはその他のサーバーサイドインクルードをサポートするホスティングに切り替えることです。これはあなたの人生をずっと楽にしてくれるでしょう。

于 2012-08-16T19:00:06.537 に答える
1

サーバーサイドインクルードをチェックしてください。私はそれらについて多くの経験を持っていませんが、私が覚えていることから、それらはあなたの問題だけの解決策になるように設計されています。

于 2012-08-16T18:57:12.350 に答える
1

HTMLインポートを使用できますhttp://w3c.github.io/webcomponents/spec/imports/

これはhttp://www.html5rocks.com/en/tutorials/webcomponents/imports/からの例です

warnings.html含む

 <div class="warning">
    <style scoped>
      h3 {
        color: red;
      }
    </style>
    <h3>Warning!</h3>
    <p>This page is under construction</p>
  </div>

  <div class="outdated">
    <h3>Heads up!</h3>
    <p>This content may be out of date</p>
  </div>

その後index.html、含むことができます

<head>
  <link rel="import" href="warnings.html">
</head>
<body>
  ...
  <script>
    var link = document.querySelector('link[rel="import"]');
    var content = link.import;

    // Grab DOM from warning.html's document.
    var el = content.querySelector('.warning');

    document.body.appendChild(el.cloneNode(true));
  </script>
</body>
于 2015-11-13T17:12:37.890 に答える
0

サーバーサイドインクルード：http：//www.freewebmasterhelp.com/tutorials/ssi/

于 2012-08-16T18:56:53.567 に答える