Header と Footer_html/css_WEB-ITnose を適切に共有する方法

Weibo の SegmentFault でヘッダーとフッターの共有に関する問題を偶然発見し、偶然この問題を解決しました。ここで私たちの経験を共有しましょう。

ビジネスシナリオ

当社のビジネス環境は、58.com や Soufun.com などのサイトと似ています。私たちが運営するサイトは主に次の 3 つのページで構成されています。

• 検索用ホームページ
• 検索結果ページ
• 製品情報を表示する詳細ページ。

一般的に Google と同様に、単純なホームページ、検索結果ページ、およびターゲット Web サイトのページがあります。古いシステムでは、これら 3 つの異なるページはすべて同じコード ベース内にありました。

新しいシステムでは、これらは別のプロジェクトになります。ホームページは Google と同じくらい速く開く必要があるため、コンテンツの一部が動的である Web サイトになりますが、ほとんどの場合は静的な Web サイトになります。この点については、以前の記事「編集・公開・開発の分離」を参照してください。新しいホームページ (固定ページ) は、コンテンツの編集および更新時にのみ生成されます。現時点では、ユーザーのアクセス速度を制限できるため、CDN に勝るものはありません。

同時に、いくつかの異なるブログと十数のトラフィック サイトもあり、それらはすべて同じヘッダーとフッターを使用する必要があります。他のページに対応して、React を使用してそれらを構築します。つまり、別のテンプレートが必要になります。

そして、新しいシステムを設計しているときに、Web サイトの UI を更新する計画がありました。つまり、古いシステムの置き換えを完了する前に、すべての Web サイトの UI を更新する必要があります。なんと！

そこで、この時点で、最初の共有ヘッダーとフッターのアーキテクチャを設計しました。

パッケージとテンプレートに基づく共有

次に、リリース時間の制約により、当初はスクリプトベースの共有を実装しませんでした。そのため、内部 UI フレームワークを使用しており、この UI フレームワークはすべてのサイトで使用され、同じ HTML と CSS を使用できます。

新しいサイトでは、Bower と GitHub に基づくリリース ソリューションを使用し、ビルド ツールとして Grunt を使用します。サーバーをローカルで起動するたびに、依存関係が更新されます。したがって、私たちのサイトでは、bower.json のバージョン番号を更新するだけで済みます。

旧サイトに関しては、レガシーシステムのため、そのような高度なツールはありません。理論的に言えば、それにあまり多くの時間とエネルギーを費やすべきではないため、手動コピー ソリューションを選択しました。

ブログやその他のサイトでは、手動コピーを使用するものと、iFrame 読み込みを使用するものがあります。そのため、新しいバージョンをリリースする際には、新しいヘッダーとフッターを AWS S3 にアップロードします。

iFrame サイトの場合、動的更新が実装されます。他のサイトの場合は手動更新が必要です。それでも、ビジネスが決まったWebサイトの場合、ヘッダーとフッターは年に1～2回しか更新されません。ただし、買収や買収が発生した場合は、さらに 1 つまたは 2 つの更新が行われることになります。

では、HTML ベースではなくテンプレートを使用しているサイトはどうでしょうか?

スクリプト生成の共有方法

最も明らかな問題は、React を使用しているサイトです。ほとんどのテンプレート エンジンは class="" をサポートできますが、React では className="" のみを使用できるためです。したがって、base.html などの基本的なテンプレート ファイルに HTML を記述するか、class を className に置き換えます。アーキテクチャは次の構造に変換されます:

したがって、現時点での理想的な方法は、特定の種類のテンプレートを通じて対応するテンプレートを生成することです。つまり、JSX テンプレート ファイルを用意し、そのファイル内の対応するコンテンツを置き換えるだけで済みます。