thymeleaf 需要注意的点

1、[[...]] 在 Thymeleaf 中认为是内联表达式

2、th:inline="text/javascript/css/none"

3、注释 /*<![CDATA[*/ ... /*]]>*/

1、[[...]] 在 Thymeleaf 中认为是内联表达式

[[${session.user.name}]]!

等同于： !

注意：使用内联样式之前，我们需要必须先用 th:inline="text/javascript/none" 明确启用此模式。

<body/>中不激活默认以字符串形式输出，而javascript必须激活才能使用[ [...] ]。

关于 [[...]] --> /*[[...]] */

<script th:inline="javascript">
    ...
    var username = [[${session.user.name}]];
    ...
</script>

输出结果：

<script th:inline="javascript">
    ...
    var username = "Sebastian \"Fruity\" Applejuice";
    ...
</script>

JavaScript内联不仅会输出所需的文本，而且还会用引号和JavaScript来包含它 - 转义其内容，以便将表达式结果输出为格式良好的JavaScript文字。

发生这种情况是因为我们将${session.user.name}表达式输出为转义，如果相反，我们使用非转义

<script th:inline="javascript">
    ...
    var username = [(${session.user.name})];
    ...
</script>

输出结果：

<script th:inline="javascript">
    ...
    var username = Sebastian "Fruity" Applejuice;
    ...
</script>

...这是一个格式错误的JavaScript代码。但是，如果我们通过附加内联表达式来构建脚本的一部分，那么输出未转义的内容可能就是我们所需要的，因此最好有这个工具。

JavaScript自然模板：在JavaScript注释中包装我们的（转义的）内联表达式

<script th:inline="javascript">
    ...
    var username = /*[[${session.user.name}]]*/ "Gertrud Kiwifruit";
    ...
</script>

输出结果：

<script th:inline="javascript">
    ...
    var username = "Sebastian \"Fruity\" Applejuice";
    ...
</script>

Thymeleaf 将忽略我们在注释之后和分号之前（在这种情况下'Gertrud Kiwifruit'）编写的所有内容。

请注意这是有效的JavaScript代码。当您以静态方式打开模板文件时（无需在服务器上执行），它将完美执行。所以我们这里有一个做自然模板的方法！

css内联,明确启用此模式

假如我们定义俩个变量：

classname = 'main elems'
align = 'center

<style th:inline="css">
    .[[${classname}]] {
      text-align: [[${align}]];
    }
</style>

具体来说，通过转义表达式输出的表达式[[${classname}]]将作为CSS标识符进行转义。

文字内联,明确启用此模式

JavaScript内联,明确启用此模式

禁用内联,明确启用此模式

/*<![CDATA[*/ ... /*]]>*/ 为了兼容支持xml文档和不支持xml(即只支持html文档)文档的浏览器而设计的。

在支持xml文档中虽然用' /* */' 注释掉代码但xml文档中仍可识别出属于xml的代码<![CDATA[ 和 ]]>，所以代码中有大于'>'小于'<'之类的特殊字符不会发生错误，因为在xml文档中这些都是特殊字符。

而不支持xml文档中，这些大于小于号就不是特殊字符了，由于<![CDATA[ 和 ]]>是xml代码所以不注释掉就会发生错误。

所以上述设计达到了兼容支持xml文档和不支持xml文档的要求。

通常 CDATA 里面放一些‘一字不改的数据’，比如源代码，比如Javascript源码。