从 Thymeleaf 中的模型对象设置 CSS 变量

Posted 2023-02-26

【中文标题】从 Thymeleaf 中的模型对象设置 CSS 变量

【英文标题】：Set CSS variables from model object in Thymeleaf

【发布时间】：2020-10-17 23:47:58

【问题描述】：

我在 Thymeleaf 模板的样式标签内设置 CSS 颜色变量。颜色值来自模型对象。我还想应用默认颜色，以防模型属性不存在。

但是当我渲染模板时，Thymeleaf 不会评估表达式，而是将整个表达式分配为字符串文字，而不是颜色值。

下面是我的风格标签。我在 Apache Freemarker 中做过同样的事情，而且效果很好。我对 Thymeleaf 很陌生，在这里我应该做些什么不同的事情？

<style>
  :root 
    --primary-color: $brandingConfig?.themeConfig?.primaryColor ?: '#633EA5';
    --secondary-color: $brandingConfig?.themeConfig?.secondaryColor ?: '#E9E6ED';
  
</style>

【问题讨论】：

你试过像$brandingConfig.themeConfig.primaryColor ?:'#633EA5'一样吗？

@soorapadman 是的，我有。虽然我认为这与问题无关。我使用了安全导航 (?.) 运算符来处理 null 父对象。

【参考方案1】：

如果你想设置 CSS 变量，你应该使用CSS inlining。

<style th:inline="css">
  :root 
    --primary-color: [[$brandingConfig?.themeConfig?.primaryColor ?: '#633EA5']];
    --secondary-color: [[$brandingConfig?.themeConfig?.secondaryColor ?: '#E9E6ED']];
  
</style>

Thymeleaf 处理器通常只计算标签的th:* 属性中的表达式。但是，如果您在样式标签上设置th:inline="css"，您可以使用[[...]] 表达式来评估标签内的文本。

【讨论】：

唯一的问题是我不得不使用 th:inline="text" 而不是 th:inline="css"，可能是因为旧的 thymeleaf 版本。

是的，th:inline="text" 将适用于旧版本的 Thymeleaf。