Question

我正在构建一款我们最终将采用白标的产品。现在我正试图找出以编程方式促进这些要求的最佳方法，以便用户可以通过其个人资料/设置表单更新网站的基本设计（即标题颜色等）。

要求：

用户可以更新徽标（已完成）
用户可以更新基本设计元素（基于CSS），即标题颜色，页脚颜色，侧边栏颜色 - 所有基本CSS覆盖

我们不想使用ASP.Net主题/皮肤，因为这需要在本地文件系统中存储静态主题。我们希望使用CSS覆盖基本样式并将其存储在数据库中。

我们的初步计划是将CSS存储在数据库中的简单varchar字段中，并使用“！”将该CSS写入Pre-Init事件的母版页。覆盖基本样式。这是最好的解决方案吗？如果没有，你做了什么来完成这个功能/

Answer 1

几个月前我去过那里。虽然使用由专用处理程序/ servlet生成的动态CSS是第一个解决方案，但为了提高性能，现在可以在文件上生成自定义CSS，覆盖标准CSS的基本元素：

<link rel="stylesheet" href="standard.css" />
<link rel="stylesheet" href="<%= customer_code %>/custom_style.css" />
...
<img scr="<%= customer_code %>/logo.png" />

每个自定义CSS都有自己的URL，因此您可以让浏览器缓存它们。

这样，您就可以为每个请求保存：

从数据库到应用层的流量

从应用程序层到浏览器的流量

应用层的一些计算

我认为用户应该填写一份详细说明他们想要进行的自定义的网页表单。

Answer 2

首先，确定可以替换哪些资源，以及是否可以添加资源。你需要把它们存放在某个地方;对于诸如徽标之类的小资源，db可能很好，否则你需要担心db中的大小。

然后您可以确定您希望用户自定义多少功能：只是颜色或整个样式？如果它只是颜色，您可以在CSS文件中定义一些变量并动态地提供文件，并从数据库加载数据。 CSS文件可能被称为styles.asp，并包含如下代码：

.header_area {
  border: 1px solid <%=headerBorderColor%>;
  background-color:  <%=headerBGColor%>;
  foreground-color:  <%=headerFGColor%>;
}

（我使用的语法是JSP语法，我不知道ASP，但想法是一样的。）

或者，允许用户指定整个样式表，替换默认样式表或补充它。然后将整个工作表存储在数据库中，并使用自己的URL为其提供服务（不要将其嵌入页面中）。

<link rel="stylesheet" href="default_styles.css">
<link rel="stylesheet" href="white_label_css.asp">

如果使用asp页面提供缓存标题和内容类型，请确保在css文件中正确设置缓存标题和内容类型。

如果您担心用户可以在white_label_css文件中添加哪种内容，可以通过创建生成css的自定义工具并将其存储在db中来限制它。例如，用户不必允许用户上传任何文件并将其存储在数据库中，而是必须填写一份详细说明他们想要进行的自定义的网络表单。这样您就可以确保只允许某些css规则/更改（但可能不够灵活）。

Answer 3

我喜欢使用ASP.Net Handler使用动态CSS的想法......

<link rel="stylesheet" href="style.ashx" />

<强> style.ashx

<!--WebHandler Language="C#" Class="StyleSheetHandler"-->

<强> StyleSheetHandler.cs

public class StyleSheetHandler : IHttpHandler {
        public void ProcessRequest (HttpContext context)
        {   
            context.Response.ContentType = "text/css";
            context.Response.ContentEncoding = System.Text.Encoding.UTF8;

            string css = BuildCSSString(); //not showing this function

            context.Response.Cache.SetExpires(DateTime.Now.AddSeconds(600));
            context.Response.Cache.SetCacheability(HttpCacheability.Public);
            context.Response.Write( css );
        }

        public bool IsReusable
        {
            get { return true; }
        }

}

BuildCSSString（）函数将根据存储在数据库中的值构建css并返回它以覆盖母版页上的基本样式。

Answer 4

您提出的方法是解决此问题的方法：将用户可控制的值（可能只是颜色和字体大小）上传到链接到用户的表中。

您希望用户拥有的徽标/头像可以存储在数据库中，也可以存储在fs上的文件中。

Answer 5

我认为这取决于您的用户对CSS的了解程度。如果他们是Web开发人员或者有这种倾向，那么让他们编写CSS可能就好了。如果没有，您将要么必须根据输入静态生成它并将其存储在数据库中，或者您只需存储输入的值并使用自定义处理程序动态生成CSS。

自定义处理程序方法意味着您可以直接在CSS中间替换值，而不必担心！important或声明项目的顺序以确保发生正确的覆盖。

Answer 6

以php为例，你可以创建动态css，所以这与存储在db中的用户信息一起就足够了。

尝试here或here作为简介。

Answer 7

如果我理解正确，您希望促进颜色和排版相关的更改。布局怎么样？如果我们安全地假设只有颜色和排版会发生变化，我们可以在现有基本CSS文件的末尾重复使用相同的样式类，从而覆盖样式（使用！important虽然好主意，但可以防止用户覆盖他们的自定义样式）。

这些新创建的类可以压缩为单个行字符串并存储为varchar，然后在构建页面时将其内联链接/复制。我可以想到以下选项

内联CSS
创建一个文件分区，您可以在其中转储生成的CSS文件，让浏览器引用该位置（通过创建软链接？）
使用Ajax，检索CSS并修改DOM

如果布局要改变，我们会更加厚实，我会避免这种情况，因为脚本/事件处理涉及的复杂性太多了。

Answer 8

我会避免使用！important子句，而只是确保在导入常规样式表后，它们的值会显示在<style>标记中。

否则，我会以同样的方式这样做。

根据用户更改主题/ CSS

8 个答案: