Question

我需要在html页面中使用一些自定义css，从数据库中检索css样式。当页面调用控制器将css样式呈现为html时。我只想显示颜色代码而不是整个span标签。

这是我需要的结果：

color: #159426;

这是我得到的意外结果：

color: <span>#159426</span>;

这是我的目录结构。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"
      xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Title</title>
  <meta content="initial-scale=1.0, width=device-width" name="viewport"/>
  <style th:include="generic/templates/init :: init" th:with="params=${params}"/>
</head>

<body>

<div id="wrapper">
  <a><h1>....111</h1></a>
  <h1>....222</h1>
</div>

</body>

</html>

这是init.html

<script th:inline="javascript" th:fragment="init">
    h1, h2, h3, h4, h5, h6, .site-title {
        font-family: 'Open Sans', sans-serif;
    }

    body.site {
        border-top: 3px solid <span th:text="${params.templateColor}"/>;
        background-color: <span th:text="${params.templateBackgroundColor}"/>;
    }

    a {
        color: <span th:text="${params.templateColor}"/>;
    }
</script>

这是我的结果

<!DOCTYPE html>
<html xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3" 
      xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Title</title>
  <meta content="initial-scale=1.0, width=device-width" name="viewport" />
  <style>
    h1, h2, h3, h4, h5, h6, .site-title {
      font-family: 'Open Sans', sans-serif;
    }
    
    body.site {
      border-top: 3px solid <span>#159426</span>;
      background-color: <span>#f4f6f7</span>;
    }
    
    a {
      color: <span>#159426</span>;
    }
  </style>
</head>

<body>

<div id="wrapper">
  <a><h1>....111</h1></a>
  <h1>....222</h1>
</div>

</body>

</html>

Answer 1

尝试使用

th:remove="tag"

例如替换

a {
        color: <span th:text="${params.templateColor}" />;
  }

这一个

a {
        color: <span th:text="${params.templateColor}" th:remove="tag"/>;
  }

Answer 2

您应该使用inlining，而不是在CSS中使用html标记。 Thymeleaf 3支持开箱即用。您的样式标记应如下所示：

<style th:fragment="init">
    h1, h2, h3, h4, h5, h6, .site-title {
        font-family: 'Open Sans', sans-serif;
    }

    body.site {
        border-top: 3px solid [[${params.templateColor}]];
        background-color: [[${params.templateBackgroundColor}]];
    }

    a {
        color: [[${params.templateColor}]];
    }
</style>

没有span标记的html上的Thymeleaf print实体属性

2 个答案: