css - Umbraco 中的动态 CSS 样式

Question

我继承了一个 Umbraco 系统(我对 Umbraco 知之甚少)，我目前正在查看网站的性能

品牌/样式目前通过“品牌”文档类型控制，允许网站管理员指定背景颜色、字体等

作为一个普遍的问题，人们如何实现这种类型的样式，而网站不必一直进行查找以获取各种文档类型属性的值？

即:如果网站管理员将“品牌”文档的背景颜色从红色更改为蓝色，然后重新发布网站/发布页面，这些更改如何传递到网站正在使用的 CSS 文件？

该站点似乎在使用 LESS 几乎是针对 Umbraco 进行“实时查找”，但性能不是很好

Answer 1

作为一个一般性问题，人们如何实现这种类型的样式，而网站不必一直进行查找以获取各种文档类型属性的值？

如果您希望内容编辑器通过 Umbraco 控制样式，您肯定需要在某个时候查找这些值。问题是如何最好地缓存数据以及如何最好地查询数据。我不会在这里花太多时间缓存。根据事物的设置方式，您可能只能使用 Html.CachedPartial(...)。至于你如何从 umbraco 查询，我看到了很多看起来像这样的代码:

var cs = ApplicationContext.Current.Services.ContentService;
var node = cs.GetById(nodeId);
var value = node.GetValue("backgroundColorHex");

使用 ContentService 将访问数据库。你不想要那个。它会大大减慢您的网站速度。只有当您打算以编程方式编辑内容时，您才应该真正使用 ContentService。这是查询 umbraco 数据的更好方法:

var node = Umbraco.TypedContent(nodeId);
var value = node.GetPropertyValue<string>("backgroundColorHex");

上面的代码使用 UmbracoHelper 来查询 umbraco。这要快得多，因为它利用了许多 umbraco 的内置缓存。

如果站点管理员将“品牌”文档的背景颜色从红色更改为蓝色，然后重新发布站点/发布页面，那么更改如何传递到站点的 CSS 文件使用？

如果可以，一种选择是使用 razor 为 html 元素分配不同的类。您的 LESS 可以选择这些类并分配适当的样式。这很好，因为您不必编写任何内联 css。诀窍在于，如果内容编辑器可以输入他们能想象到的任何十六进制颜色，那么编写将这些十六进制值转换为类的逻辑可能有点粗鲁。

@* Some logic here that gets the hex values from umbraco and converts the data to classes maybe? This depends on what the color data looks like *@
<div class="@bgColorClass @fontColorClass @borderClass">
    ...
</div>

否则，你可以这样写

<div style="background-color:@bgColor;">
    ...
</div>

你怎么看？让我知道这是否恰到好处，或者我是否遗漏了您真正想知道的内容，或者我是否跳过了您感兴趣的内容。