Question

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

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

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

Answer 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。

Answer 2

如果没有多少管理员，你不应该真的担心它会非常有效。

在您致电$("#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（）时附加，然后使用Save按钮或计时器将其发送到服务器。

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

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

Answer 3

我做了类似的事情

我用width : PAGE_WIDTH_
等字符串替换属性值
在page.INI文件中我有PAGE_WIDTH =“960px”（我查看了很多解决方案，但我选择了这个，而不是保存json对象，例如因为手动编辑这些也很容易）
请求页面php查找该站点的缓存css文件，如果没有找到php打开css文件，则替换PAGE_WIDTH_＆amp;具有在INI文件中找到的值的其他参数
admin可以通过简单的界面更改INI文件的值（这很容易只是迭代INI文件中的所有属性）＆amp;保持多个主题以及＆amp;从一个切换到另一个;在编辑其中一个INI文件时，php删除缓存的css文件以强制系统在下一页请求时更新站点的css

这里你去了，相当一些工作，很棒的好处（比如主题管理，没有解析css文件，眨眼间添加新的可编辑属性......）

将jQuery更改保存到服务器上的css文件中

3 个答案: