1

我正在开发一个系统，该系统允许在不访问代码的情况下更改某些 css 参数。为了实现这一点，我有jQuery像滑块和拖动器这样的对象，它们会影响网站在用户端的外观，例如。$("#MainContent").css("width", "55%");. 现在我需要一种方法将这些更改附加到服务器上的 .css 文件中。

让我澄清一下，这是一个CMS系统，只有系统管理员才有这个选项，而不是用户端站点的访问者。我意识到 .css 是适用于所有用户的。

理想的解决方案是每次用户进行更改时连接到服务器，并且只替换一行 css 代码。但我不知道如何有效地做到这一点，或者是否有可能。

4

3 回答 3

1

您可能会为此使用less （或其他一些具有客户端支持的预处理器）。我从来没有做过这样的事情，但这很有可能并且可能对你有用。

如果您从未使用过 CSS 预处理器，您可能希望在继续之前先在该主题上搜索一下。

基本思想是对您希望管理员修改的任何数据使用变量。这些将被保存在服务器端（可能在数据库中），然后用于生成单独的“变量”少文件。注意，因为less需要编译这个文件，所以必须生成并保存到磁盘：

/* variables.less */
@mainContentWidth: 55%;

然后很可能，某种生成的映射 javascript/JSON 映射，将用于填充您的表单控件： 

/* variables.js */
window.LESSVARS = {
  // `type` here totally just an idea, but the idea is that a "percentage"
  // field might be controlled with a slider, etc.
  mainContentWidth: { value: "55%", type: "percentage" }
}

对于 CSS 的其余部分，是否使用 less 的其他功能取决于您，但这里的关键部分是您在适用的情况下使用您定义的变量：

/* styles.less */
@import "variables.less";    
#MainContent { width: @mainContentWidth; }

公众永远不会看到任何这些，因为他们将得到一个汇编styles.css，将它们放在一起，简单地说：

<link rel="stylesheet" type="text/css" href="styles.css">

但另一方面，管理员将收到未编译的 less 和映射 javascript 对象，这些对象将用于构建表单控件并维护状态：

<link rel="stylesheet/less" type="text/css" href="variables.less" />
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="variables.js" type="text/javascript"></script>
<script src="less.js" type="text/javascript"></script>

现在，当管理员操作表单控件时，您不再使用 jQuery 内联样式，而是通过以下方式更新页面less.modifyVars：

// something like this, which updates the less variable state and then
// sends it to less which will recompile the CSS.  Note that this is
// just a simple example.  In the real version you'd probably want to
// track changes, etc.
function setVar(name, value) {
  LESSVARS[name].value = val;
  var o = {};
  o['@'+name] = value;
  less.modifyVars(o);
}

// which you'd then call on form control change
setVar('mainContentWidth', '30%');

最后，一旦管理员想要保留他们的更改，他们就会提交更改后的状态以进行保存。这可能是整个LESSVARS对象或只是跟踪的更改。在服务器端，您将存储这些更改并触发variables.less对styles.less.

于 2013-11-03T17:44:51.783 回答
0

如果管理员不多，您不必担心使其非常高效。

在您打电话的地方，您$("#MainContent").css("width", "55%");还应该放置将更新服务器的代码。

所以你会有一个像这样的功能：

function updateServer(data){
    // data would probably be a JSON array with the changes to be made
    // Something like {element : {attribute1 : value1, attribute2 : value2}}
    $.post(...);
}

然后在您使用 .css() 的地方，您将调用该函数来更新服务器。

如果有许多参数可以更改，并且您想避免发送过多的 POST 请求，您还可以构建一个大data对象，在每次调用 updateServer() 时附加，然后使用保存按钮或计时器将其发送到服务器.

现在在服务器中，您将必须实现一些逻辑来解析此 JSON 数据并相应地编辑 CSS 文件。我认为最简单的方法是将每个属性的所有值存储在数据库或可读文本文件中，然后从那里重建 CSS 文件。

我不知道您使用的是哪种服务器端语言，但应该不会太难。

于 2013-11-03T16:07:26.147 回答
0

我做了类似的事情

  • 在 css 文件中，我用类似的字符串替换属性值width : PAGE_WIDTH_

  • 在 page.INI 文件中我有 PAGE_WIDTH = "960px" （我查看了很多解决方案，但我选择了这个而不是保存 json 对象，例如因为手动编辑这些对象也很容易）

  • 根据页面请求 php 查找站点的缓存 css 文件，如果未找到 php 打开 css 文件，将 PAGE_WIDTH_ 和其他参数替换为它在 INI 文件中找到的值

  • 管理员可以通过一个简单的界面更改 INI 文件的值（这很容易完成，只需遍历 INI 文件中的所有属性）并保留多个主题并从一个切换到另一个；在编辑其中一个 INI 文件时，php 删除缓存的 css 文件以强制系统在下一页请求时更新站点的 css

给你，相当多的工作，很大的好处（比如主题管理，不解析 css 文件，一眨眼就添加新的可编辑属性......）

于 2013-11-03T16:12:25.043 回答