4

私は SaaS 製品を構築していますが、顧客の最大の要件の 1 つは、ホワイト ラベルを付けることを許可することです。

  • 顧客ドメイン
  • UI に顧客のロゴを含める
  • 顧客のブランディングに合わせて配色を変更する

実行する必要があるすべてのことの中で、把握するのが最も簡単な部分は、カスタム サブドメインの設定だと思います (私は AppEngine で実行していますが、どのサーバー設定でも非常に簡単です)。

私の主な質問は、フロント エンドのスタイリングに関するベスト プラクティスに関するものです。私のセットアップでは、CSS ルールを上書きするためと Javascript 変数を上書きするために、色を定義する必要があります。私が行っている仮定は、画像アセット/パスと色情報をデータベースに保存していることです。これらは私が検討している 2 つのパスですが、どちらにもかなり重大な欠陥があるようです。

  1. 展開タスク - 展開の前に、データベースから顧客のスタイリング情報を取得し、カスタム CSS / JS ファイルを作成する Grunt (またはその他の自動化) タスクを実行します。
  2. ランタイム - アプリケーションのブートストラップ中に、db から顧客情報を取得し、スタイリングを動的に上書きします (インライン スタイル、JS オーバーライドなど)。

私は推奨事項やその他の経験をたくさん探しましたが、空っぽになりました。ホワイトラベルのベストプラクティスは何ですか? これら 2 つのパスのいずれかを続行する必要がありますか、それともより良いオプションがありますか? どのような落とし穴に注意する必要がありますか? さまざまなオプションにパフォーマンスへの影響はありますか?

この質問は、意図的に言語とフレームワークにとらわれません。実装方法に関係なく、基本原則は同じでなければならないからです。

4

1 に答える 1

5

LESSを使用する前にこれを実装しました：

まず、すべての CSS ファイルを LESS を使用するように更新しました。顧客ごとに変更されるすべての必要な色は、LESS 変数を使用しました。メインの less サイト ファイルを「main.less」と呼びます。

ユーザーがシステムにログインすると、顧客のテーマに関する情報をデータベースから取得し、LESS 変数表記に変換します。次に、main.less の内容のコピーを取得し、クライアント固有の less 変数を先頭に追加し、これをクライアント固有の .less ファイル (client-a.less) に書き込みます。次に、システムはそれを css ファイル (client-a.css) にコンパイルし、それを各ページ要求に含めます (たとえば、システムは、クライアント名に基づいて、コンパイルされた css ファイルの名前を認識します)。

この方法により、クライアントごとに一意の .less および .css ファイルが作成され、ページが要求されるたびにデータベースからクライアント固有のテーマの詳細を呼び出す必要がなくなります。このコンパイル プロセスはログインごとにのみ行われるためです。

コンパイルされた less ファイル (client-a.less) をシリアル化し、.cache ファイルとして保存することで、サーバー リソースをさらに節約できます。これで、各ユーザーがシステムにログオンしたときに、client-a.less にコンパイルされる予定のコンテンツをシリアル化し、それを .cache ファイルと比較して、異なる場合は client-a.css ファイルをコンパイルできます。 . 違いがない場合は、css ファイルをコンパイルする必要はありません。

于 2014-05-29T23:04:24.280 に答える