css - 将 Thymeleaf 转换为 <style></style>

Question

我将 Polymer 与 Thymeleaf 一起使用，我想在 paper-scroll-header-panel 元素未压缩时设置背景图像。所以，我正在尝试:

paper-scroll-header-panel{
--paper-scroll-header-panel-full-header: {
    background-image: url("+ @{(${session.user.coverImagePath})} + ");        
  };
}

但是 Thymeleaf 没有呈现这段代码，当我访问这个模板时，我得到了原样的代码。那么，如何使用 Thymeleaf 设置此属性？

Answer 1

您必须明确告诉 Thymeleaf 在具有 th:inline 属性的文本中查找表达式，而不是用双方括号将表达式括起来。

<style th:inline="text">
    paper-scroll-header-panel{
       --paper-scroll-header-panel-full-header: {
          background-image: url([[@{(${session.user.coverImagePath})}]]);        
       };
    }
</style>

Thymeleaf 的作者出于性能原因选择了这种方案，因为 Thymeleaf 的模板解析和处理与 JSP 或 Facelets 有很大不同。