2

我有一个 Django 项目正在启动，如果根据用户的学校颜色有很多配色方案的 UI，那就太好了。我幻想拥有一个基本 variables.less 文件以及一堆编译成 style.css 的其他 .less 文件。

但是一旦用户设置了他们的学校颜色，它就会生成一个 blue.variables.less 文件（如果他们选择了蓝色预设）或 school123.variables.less 文件（如果他们非常喜欢并使用颜色选择器来制作自己的颜色scheme)，然后将所有内容编译为 blue.style.css 或 school123.style.css，这就是我们在提供页面时加载的 .css 文件。

我可以想象有很多方法可以让它倒下。就像我将更新推送到 forms.less 或 layout.less 时如何重新处理所有这些文件一样。

有一个更好的方法吗？我用谷歌搜索了我的手指，但没有发现有人尝试这种疯狂。

4

1 回答 1

3

有很多方法可以实现您能够拥有用户特定配色方案的目标，但它们各有优缺点。

我假设您正在使用诸如 Bootstrap 之类的框架与您命名的文件。

选项 1：用于特定颜色样式的内联 CSS（首选）

由于性能和简单性，这是我的首选。您可以为每个用户存储每种自定义颜色，甚至可以创建一个模型，以便您可以重复使用代表特定学校的颜色。它存储在数据库中，可以扩展到大量的配色方案，而不会生成很多非常相似的文件。

在您的模板代码中创建一个片段，该片段具有使用颜色变量的任何样式。

base.html

{% include "color-snippet.css" with main-color="{{ user's main color }}" alt-color="{{ user's alt color }}" %}

color-snippet.css（请注意，此文件将在您的模板目录中，因为它由您的模板引擎处理

<style>
.some-style {
    color: {{ main-color }} !important;
}
</style>

因此，这样做的最大缺点是您需要在 variables.less 之外自定义 Bootstrap。您需要通过 grep 文件查找将生成的所有类，并将样式复制到 css 中的代码段，而不是更少。当您想升级到更新的 Bootstrap 时，它需要一些前期投资和工作，但它允许您分离样式的颜色部分，以便在运行时动态派生。

我更喜欢这种方法，因为您不必在 collectstatic 步骤之外处理 less 的编译。

选项 2：LESS 的客户端编译

你可以让 Django 提供一个动态创建的文件并返回你想要的变量。然后你可以让 less.js 在客户端编译它。

这将涉及向您的基本模板添加一个由 Django 处理的 url 路径，该路径不属于您的静态路径（例如 /style/variables），在视图中创建一个处理程序，然后返回将是您的较少文件变量的文本内容.

选项 3：LESS 的服务器端编译

我使用Django Pipeline对 CSS 进行较少的服务器端编译。需要一些设置才能使用您的 Django 应用程序。在开发模式下，Django Pipeline 将在每次请求时将关联的 less 文件编译成 CSS 文件。在生产模式下，它将指向已编译文件的适当文件路径。它挂钩，collectstatic所以当你collectstatic.

这种方法的最大问题是静态文件的映射（less + css 文件编译为 css）是在您的设置文件中定义的。这需要在更新时重新启动服务器。您可以基于 Django Pipeline 的工作方式来减少自己的服务器端编译，但具有映射逻辑，而不是在需要重新启动服务器的东西中定义它。

这是很多工作，并且对每个请求都要做的 Bootstrap 编译较少。

如果您创建了不需要重新启动 Django 服务器进程的自己的映射，则始终可以运行 collectstatic 来创建新的 css 文件。这将避免在每次请求时进行编译。

虽然最后一种方法与您提到的最接近，但它似乎比仅仅分离特定颜色的样式并使用 django 模板来定制它要多得多的工作和容易出错的地方。

如果您的方案数量相当少，最后一种方法也很有效，因为您可以提前创建所有映射，而不是让人们在运行时生成自己的映射。他们可以建议它们，您可以定期更新它们。

于 2013-10-18T19:27:07.177 回答