3

基本的なレイアウト、デザイン、フォント、スタイル、CSS などを完成させた Web サイトがあります。

ウェブサイトのほぼ全体で、サイドバー、フッター、背景などのレイアウトは変わりません。カスタム埋め込みフォントも使用されています。

この基本的なレイアウトは Web サイト全体で同じままであるため、ユーザーがこのコンテンツ (サイドバー、フォント、JavaScript など) を再度ダウンロードしないようにするにはどうすればよいかを尋ねたいと思いました。 start ページほど時間はかかりません。

ほとんどの Web サイトにはページ全体で共通のヘッダー/フッター/サイドバーがあるため、何らかのメカニズムがあると確信しています。私のウェブサイトはプレーンな html/css であり、バックエンドは使用されていません。何か案は？

4

6 に答える 6

1

画像、フォント、CSS、およびその他のコンテンツは、最初のヒット時にクライアントのブラウザーによってキャッシュされる可能性が高いため、一度だけダウンロードされます。

html ページ自体は、静的な html コンテンツを使用しているため、AJAX リクエストを使用する方法しか考えられません。

于 2012-08-12T13:34:37.487 に答える
0

これは 2 つの方法で行うことができます。あなたはバックエンドを持っていないと言いますが、あなたのウェブサイトがホストされているサーバーはバックエンドになることができます.

バックエンドとの対話なし: バックエンドをまったく使用したくない場合は、これを単一ページの Web サイトにして、そこにあるコンテンツを切り替えるための JavaScript を使用できます。アイデアは、Web サイトの構造があり、デフォルトのデータを通常どおりに使用できるようにすることです。ただし、非表示の div には他のページの html もあります。次に、aboutリンクを言うように切り替えたい場合は、javascriptを使用して、そのコンテンツを含む非表示のdivからコンテンツを取得し、そのコンテンツをメインのdivに配置します。

 <!--First lets use jquery thought it can use some other framework-->
<script src="http://code.google.com/apis/ajaxlibs/documentation/index.html#jquery"></script>
<script>
    $('a[href=#myAboutPage]').on('click',function(){//Whenever link that points to #myAboutPage is clicked
         var getHTMLFROM = document.getElementById('myAboutPageHiddenContent').innerHTML;

         //And place it on main div
         document.getElementById('mainDivContent').innerHTML = getHTMLFROM
    });
</script>

ajax インタラクションを使用したい場合: getHTMLFROM コンテンツが実際にはサーバーから要求する html ファイルであることを除いて、プロセスは同じです。

この JavaScript 指向の方法はどちらも機能しますが、情報を SEO フレンドリーにしたい場合はお勧めしません。そうは言っても、CSS の外部部分を再利用して、毎回インターフェイスのスタイリングを再ダウンロードすることを最小限に抑えます。

于 2012-08-12T14:13:00.337 に答える
0

最初に基本的なレイアウトを設計できます。

  • CSS の最大値を避けinline、共通セレクターに (複数に割り当て可能) または(単一に割り当て可能) を追加します。embeddedclassid
  • マスター スタイルシートのようなものmaster.cssを作成し、これをすべてのページに添付します。

お役に立てれば。

于 2012-08-12T13:37:38.230 に答える
0

おそらく include を使用したいと思うでしょう。したがって、各ページには、ヘッダー インクルード、フッター インクルード、サイドバー インクルード、さらには css/js ファイルへのリンクを含むインクルードが含まれます。

これを行う最も簡単な方法は、ページを .php ページに変更し、php インクルードを使用してヘッダー ファイル、フッター ファイルなどを取り込むことです。

于 2012-08-12T13:32:00.600 に答える
0

Jekyllのような静的サイト ジェネレーターを作成できます。

于 2012-08-12T13:33:12.323 に答える
0

これには間違いなく多くの方法があります。私はダイナミック インクルージョンのファンです。これは、独自のページに非常に簡単に設定する方法を説明する優れたチュートリアルへのリンクです。ダイナミック インクルージョン チュートリアル 注: PHP や、ファイル拡張子を PHP に変更しなければならないことを恐れないでください。コーディングの経験はまったく変わりません。それだけで能力が上がります。

また、Javascript 機能を使用して特定の要素を非表示にしました。Web サイトのサイズによっては、CSS とナビゲーション要素をリロードするのが簡単な場合があります。ただし、リロード中にメニューとロゴを一瞬点滅させたくない場合は、少しの JS を使用して非常に簡単に要素を非表示/表示することができます。

これが私のウェブサイトの関数の例です：

function toggleVisible(e){
var i = e.id;
if(e.className == 'collapsed')
{
    e.className = 'expanded';
    e.innerHTML = 'Hide'
    var hiddenArray = document.getElementsByClassName('hidden' + i);
    hiddenArray[0].setAttribute('class', 'expanded' + i);
}
else if (e.className == 'expanded')
{
    e.className = 'collapsed';
    e.innerHTML = 'Show More';
    var expandedArray = document.getElementsByClassName('expanded' + i);
    expandedArray[0].setAttribute('class', 'hidden' + i);
}

}

上記のコードは、次のリンクをクリックすると実行されます。

<a href="anywebsite.com">ANYWEBSITE.com</a>  ||  <a onClick="toggleVisible(this)" id="4" class="collapsed">Show More</a> || <a href="document.pdf">View PDF</a>

また、別のユーザーがキャッシングについて言及しました。キャッシュは信頼できないようです。詳細については、次のリンクを参照してください。

于 2012-08-12T16:07:06.183 に答える