我有一个Django项目,在该项目中,可以根据用户的学校颜色在UI中使用多种配色方案。我幻想有一个基本的variables.less文件以及一堆编译成style.css的其他.less文件。
但是,一旦用户设置了学校颜色,它将生成一个blue.variables.less文件(如果他们选择了蓝色预设)或school123.variables.less文件(如果他们都很喜欢并使用了颜色选择器来制作自己的颜色)方案),然后将所有内容编译为blue.style.css或school123.style.css,这就是我们为页面提供服务时加载的.css文件。
我可以想象有很多方法可以解决这个问题。就像当我将更新推送到Forms.less或layout.less时如何重新处理所有这些文件。
有一个更好的方法吗?我用裸露的谷歌搜索,但没有发现任何尝试这种疯狂的人。
有多种方法可以实现具有特定于用户的颜色方案的目标,但是每种方法都有其优点/缺点。
我假设您正在使用诸如Bootstrap之类的框架来处理您命名的文件。
选项1:内联CSS,用于特定颜色的样式(首选)
由于性能和简单性,这是我的首选。您可以为每个用户存储每种自定义颜色,甚至可以创建模型,以便重新使用代表特定学校的颜色。它存储在数据库中,可以缩放到大量的配色方案,而不会生成很多非常相似的文件。
在您的模板代码中创建一个代码段,该代码段具有使用color变量的任何样式。
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步骤之外处理更少的内容。
选项2:LESS的客户端编译
您可以让Django提供动态创建的文件并返回所需的变量。然后,您可以让less.js在客户端上对其进行编译。
这将涉及将不属于您的静态路径(例如/ style / variables)的,由Django处理的url路径添加到您的基本模板中,在视图中创建一个处理程序,然后返回将是您的较少文件变量的文本内容。
选项3:LESS的服务器端编译
我使用Django Pipeline进行不到CSS的服务器端编译。需要一些设置才能使用Django应用程序。在开发模式下,Django Pipeline将根据每个请求将较少的相关文件编译为CSS文件。在生产模式下,它将指向已编译文件的适当文件路径。它钩住了collectstatic
你的更少的东西collectstatic
。
这种方法的最大问题是,静态文件(少+ css文件编译为css)的映射是在设置文件中定义的。当您更新此服务器时,这需要重新启动服务器。您可以根据Django Pipeline的工作原理,减少服务器端的编译工作,但可以使用映射逻辑,而不必在需要重新启动服务器的情况下对其进行定义。
繁琐的工作量以及对Bootstrap的较少编译对于每个请求而言都是不平凡的。
如果您创建了不需要重启Django服务器进程的映射,则始终可以运行collectstatic来创建新的CSS文件。这样可以避免在每次请求时进行编译。
尽管这最后一种方法最接近您所提到的方法,但似乎不仅要分离特定于颜色的样式并使用django模板对其进行自定义,还需要做更多的工作和出错。
如果您的方案数量很少,则最后一种方法也可以很好地工作,因为您可以提前创建所有映射,而不能让人们在运行时生成自己的映射。他们可以建议他们,您可以按常规节奏对其进行更新。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句