Javascript 如何为SaaS解决方案添加白标签?

Javascript 如何为SaaS解决方案添加白标签?,javascript,themes,customization,saas,white-labelling,Javascript,Themes,Customization,Saas,White Labelling,我正在构建一个SaaS产品,其中一个最高的客户要求是允许他们为其贴上白色标签 客户域 在用户界面中包含客户徽标 更改配色方案以匹配客户品牌 在所有需要做的事情中,我认为对我来说最容易掌握的部分是设置自定义子域(我在AppEngine上运行,但在任何服务器设置上都非常简单) 我的主要问题围绕前端造型的最佳实践。我的设置要求我定义颜色来覆盖CSS规则和Javascript变量。我的假设是,我正在数据库中存储任何图像资源/路径和颜色信息。这是我正在考虑的两条道路,但它们似乎都有相当严重的缺陷 部署

我正在构建一个SaaS产品,其中一个最高的客户要求是允许他们为其贴上白色标签

  • 客户域
  • 在用户界面中包含客户徽标
  • 更改配色方案以匹配客户品牌
在所有需要做的事情中,我认为对我来说最容易掌握的部分是设置自定义子域(我在AppEngine上运行,但在任何服务器设置上都非常简单)

我的主要问题围绕前端造型的最佳实践。我的设置要求我定义颜色来覆盖CSS规则和Javascript变量。我的假设是,我正在数据库中存储任何图像资源/路径和颜色信息。这是我正在考虑的两条道路,但它们似乎都有相当严重的缺陷

  • 部署任务-在部署之前,运行Grunt(或其他自动化)任务,从数据库中提取客户样式信息,并根据需要创建自定义CSS/JS文件
  • 运行时-在应用程序引导期间,从数据库中提取客户信息并动态覆盖样式(内联样式、JS覆盖等)
  • 我找了很多推荐信或其他经验,结果都是空的。白色标签的最佳做法是什么?我应该继续走这两条路中的一条,还是有更好的选择?我应该注意哪些陷阱?不同的选项是否会影响性能


    这个问题有目的地与语言和框架无关,因为无论如何实现,基本原则都应该是相同的

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

    我们首先更新了所有CSS文件以减少使用。所有必要的颜色将根据每个客户的情况进行更改,使用的变量更少。我们将主less站点文件称为“main.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文件。

    这听起来与我们的计划相似,但有一些很酷的转折。我们即将实现这个,所以我们将看看它是如何运行的!谢谢你的回复!