複数のページを持つウェブサイトを作成しています。すべてのページのトップ セクション、ナビゲーション バー、フッターはまったく同じです。別のページに移動したときに変化するのは本文だけです。私が知りたいのは、別のページに移動するときにページの本文のみをロードする方法ですが、トップ、ナビゲーション バー、フッターを表示したままにして、本文以外は何も変更されないようにする方法です。
3 に答える
これに対する昔ながらの答えは、 frame を使用することです。フレームはまさにあなたが望むことをします。サイトの上部、下部、およびメイン ペインに個別の HTML ファイルを指定するページがあります。ナビゲートすると、さまざまなページが「メイン」フレームに読み込まれます。しかし、これはさまざまな理由から、実際には行われていません。見栄えが悪く、スクロール動作が奇妙で、他のサイトへのリンクや他のサイトからのリンクが面倒です。
それを行うためのより良い方法は、 AJAXを介してメインコンテンツをロードすることです。ヘッダーとフッターのみを含むページを表示し、Javascript を使用して適切なページをサーバーから動的に引き出し、そのコンテンツをページのプレースホルダー div に挿入します。他のページに移動するには、リンクされたコンテンツをロードしてプレースホルダー内のすべてを置き換える JS コードを実行する必要があります。これにも欠点があります。履歴に特別な処理を追加する必要があり (つまり、戻るボタンを期待どおりに機能させる)、ディープ リンクを追加する必要があります (ブックマークに適切なコンテンツを読み込ませるなど)。
どちらもしないことをお勧めします。すべてのページにヘッダーとフッターのコンテンツを含める方がはるかに優れています。たくさんの場所で HTML コードを繰り返さずにそれを行う方法がいくつかあります: ページを動的に生成している場合は、すべてのページに再利用可能なテンプレートを指定できるlayoutsを見てください。正確な方法は、使用しているフレームワークによって異なりますが、例として、Rails での方法を次に示します。. ページが静的 (つまり、サーバーにアップロードする HTML ファイル) の場合は、同様のことを行う必要がありますが、オンザフライでページを生成する代わりに、静的 HTML ジェネレーターを使用してページをコンパイルします。 . これにより、ヘッダーとフッターを 1 か所で指定し、コンテンツを別々のファイルで指定できます。それらを編集した後、コマンドを実行すると、それぞれにヘッダーとフッターのコピーを含む出力ファイルが作成されます。次に、それらをアップロードします。たとえば、Jekyllを参照してください。