javascript - Web サイトのヘッダーとフッターを 1 つの場所に保存するにはどうすればよいですか?

Question

私は常にヘッダーとフッターを書き直しており、編集するたびにすべてのコードを手動でコピーして Web ページに貼り付ける必要があります。明らかにこれは間違ったアプローチですが、正しいアプローチかどうかはわかりません。私の現在のアイデアは、「ヘッダー」と「フッター」の div を作成し、jquery の $(document).ready を使用して div をコードでロードすることです。ただし、ヘッダー/フッター コードを実行する前にページ全体がレンダリングされるのを待つため、遅くなることが懸念されます。この問題を処理する一般的な方法は何ですか?

Answer 1

サーバー側のテクノロジーが必要なようです。（多くのオプションの）どれを選択するかは、あなたとあなたのホスティング次第です。ほとんどの場合、ホスティングはPHPとSSIをサポートします（サーバーサイドインクルード）。

最も単純なセットアップでは、基本的に共通のコードを個々のファイルに入れheader.incますfooter.inc。これらのファイルの名前や拡張子は関係ありません。

PHPの場合、ページは*.php代わりになり、次の*.htmlコードを記述する必要があります。

<?php include('header.inc'); ?>
<p>
    Here is your regular document.
</p>
<?php include('footer.inc'); ?>

SSIの場合、ファイルの名前を変更する必要はありません。コードは次のようになります。

<!--#include virtual="header.inc" -->
<p>
    Here is your regular document.
</p>
<!--#include virtual="footer.inc" -->

Answer 2

あなたは間違いなくJavascriptでこれをしたくありません。まず、ヘッダーとフッターはJavascriptが実行されるまで読み込まれませんが、さらに重要なことに、Javascriptが有効になっていない人はそれらをまったく表示しません（静的ページを表示するためにJavascriptを要求することは意味がありません）。

これを行う簡単な方法は2つあります。

1）phpなどのサーバー側言語を使用して、フッターを含めます。

<?php
  include('header.html');
?>
The rest of the page goes here
<?php
  include('footer.html');
?>

2）静的ページを生成するビルド/デプロイプロセスを使用します。これは1）に似ていますが、誰かがページにアクセスするたびではなく、ビルドごとに1回だけ実行されます。

Answer 3

一般に、PHP、JSP、XSLなど、サーバー側のテンプレートテクノロジが使用されています。これらのアプローチのいずれかを使用すると、リンク可能な再利用可能なコードを作成するのは非常に簡単です。

純粋なHTML+JSアプローチの場合、IFRAMEを使用してスタンドアロンのヘッダーおよびフッターHTMLファイルにリンクできます。これにより、すべてのヘッダーとフッターの情報を1か所に保持でき、更新する必要があるのは1回だけです。

Answer 4

一般的な方法は、 PHPのようなサーバーサイド言語を使用することです。または、フッターとヘッダーインクルードのみが必要な場合は、SSIを使用できます

Answer 5

HTMLまたはPHPインクルードを使用します。