私は非常によく似たいくつかのページがある小さなウェブサイトを書いています。ほとんどの場合、1つのdivの内容のみが異なります。ナビゲーション、ヘッダーなどは同じままです。最初、私はこれを単一のhtmlファイルと次のようなjavascriptコード(ボタンクリックイベントによってトリガーされる)で実現しました。
$.get("content/text1.html", function(data) {
$("#content").html(data);
});
これは非常にスムーズに機能しますが、問題は、アドレスバーのURLがこれらの種類のリクエストで変更されないことでした。したがって、ユーザーが特定のページにリンクすることはできません。#-urlsで可能であることは知っていますが、次のようなURLが必要です。
example.com/talks/foo/bar
そして、いくつかの回避策はありません。
この動作を実現するために、コードを多くのhtmlファイルに変更し、それぞれがこれを実行します。
$.get("content/header.html", function(data) {
$("#header").html(data);
});
$.get("content/footer.html", function(data) {
$("#footer").html(data);
});
だから私は私の素敵なURLを取得しますが、今は問題です。全体があまりスムーズではありません。ヘッダーとフッターは本文の数ミリ秒後に表示されるため、すべての新しいページを正しく認識できません。
私の質問は、githubのような人気のあるWebサイトで両方を同時に達成するにはどうすればよいですか?トップバーの[探索]または[ブログ]をクリックすると、すべての「静的」なものが永続的にそこにとどまっているように見えます。そして、彼らのURLを考慮すると、私は彼らがajaxでこれを達成していないと思います。
私が見逃しているものはありますか?
よろしく