Thymeleaf 模板通過在 CSS 文件中轉義英鎊符號來解析模型屬性

Question

當我嘗試使用 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。

我會感謝任何有解決方案或可以為我指明正確方向來教育自己的人，因為我會自己完成工作。

Answer 1

我認為 Thymeleaf 正試圖將您的 CSS 轉義為 CSS 標識符。

話雖如此，您可以簡單地將表達式從轉義形式/*[[${...}]]*/更改/*[[${...}]]*/轉義形式/*[(${...})]*/並且它不會不要逃避你的顏色代碼。

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