时间戳

首页 > 解决方案 > Thymeleaf 模板通过转义磅来解析模型属性 登录 CSS 文件

css - Thymeleaf 模板通过转义磅来解析模型属性 登录 CSS 文件

问题描述

当我尝试使用 Thymeleaf 将一些基本 CSS 加载到我的 css 文件中时，Thymeleaf 可以完成工作，但是当我使用 # 和任何形式的括号等特殊字符时，它会被 \ 转义

我现在要做的就是动态获取 HEX 颜色值（在本例中为 SQL 数据库）并将其加载到我的 CSS 文件中。

注意：我对 Spring MVC 和 Thymeleaf 相当陌生，所以我可能在不知道它是解决方案的情况下忽略了一个可能的解决方案。

我理解为什么 Thymeleaf 认为它应该转义这些字符，因为它们在涉及 html 和 xhtml 时可能会非常有问题，但这是 CSS，只需要按原样插入原始文本。

我自己使用了 HTML 实体以及对井号 (#) 进行编码，但它在 CSS 中不起作用，我也觉得即使这样做也不是最好的解决方案：HTML Entity (decimal) # HTML Entity (hex) #

我还采用了 Javascript 路由来解析模板，但它不适用于 CSS。

我的 .css 文件中的 CSS 类：

.bgMainColor{
    background-color:/*[[${styleProperties.Main_Color}]]*/ pink;
}

在我的 JAVA 控制器中，我将模型属性设置如下：

model.addAttribute("styleProperties", properties);

注意：属性包含样式属性列表，如 Main_Color。控制器中的一切正常工作，Thymeleaf 理解将模型传递给 CSS 文件并且插入 css 但不正确。

然后 CSS 将呈现为：

.bgMainColor{
    background-color: \#1BC6B4;
}

1BC6B4 是从数据库中以原始文本形式检索到的字符串。

粗略地说，由于明显的原因，这不起作用。

我搜索了高低，找不到有效的解决方案。必须有一种方法可以“告诉”Thymeleaf 正在解析的模板是 CSS 而不是 html。

我将感谢任何有解决方案或可以指出正确方向来教育自己的人，就像我自己做这项工作一样。

标签： cssspringtemplatesmodel-view-controllerthymeleaf

解决方案

我认为 Thymeleaf 正试图将您的 CSS 转义为 CSS 标识符。

话虽如此，您只需将表达式从转义形式/*[[${...}]]*/更改为未转义形式/*[(${...})]*/，它就不会转义您的颜色代码。

.bgMainColor{
    background-color: /*[(${styleProperties.Main_Color})]*/ pink;
}

推荐阅读