4

我正在构建一个 SaaS 产品，而客户的最高要求之一是允许他们给它贴上白标签。

  • 客户域
  • 在 UI 中包含客户徽标
  • 更改配色方案以匹配客户品牌

在需要做的所有事情中，我认为最容易掌握的部分是设置自定义子域（我在 AppEngine 上运行，但在任何服务器设置上都非常简单）。

我的主要问题围绕着前端样式的最佳实践。我的设置要求我定义颜色以覆盖 CSS 规则和覆盖 Javascript 变量。我所做的假设是我将任何图像资产/路径和颜色信息存储在数据库中。这是我正在考虑的两条路径，但似乎都有相当严重的缺陷。

  1. 部署任务 - 在部署之前，运行 Grunt（或其他自动化）任务，从数据库中提取客户样式信息并创建自定义 CSS / JS 文件
  2. 运行时 - 在应用程序引导期间，从数据库中提取客户信息并动态覆盖样式（内联样式、JS 覆盖等）

我寻找了很多建议或其他经验，但都一无所获。白标的最佳做法是什么？我应该继续走这两条路径之一还是有更好的选择？我应该注意哪些陷阱？不同选项对性能有影响吗？

这个问题有意与语言和框架无关，因为基本原则应该是相同的，无论它是如何实现的。

4

1 回答 1

5

我在使用 LESS 之前已经实现了这一点：

我们首先更新了所有的 CSS 文件以使用 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 回答