Thymeleaf公共代码段抽取,th:include, th:replace, th:insert
本文参考: Thymeleaf教程
th:include | 将公共代码片段包含的内容插入到使用该属性的标签中 |
th:insert | 将公共代码片段插入到使用该属性的标签中 |
th:replace | 将公共代码片段直接替换使用该属性的标签 |
- 引入代码段:
使用以上3个属性引入代码片段,都可以使用以下两种方式实现:
- ~{templateName::selector} 模板名::选择器名
- ~{templateName::fragmentname} 模板名::片段名
通常情况下~{}可以省略,其行内写法 [[~{...}]] 或 [(~{...})], 其中 [[~{...}]] 会转义特殊字符, [(~{...})] 不会转义特殊字符
新建一个common.html文件,写入以下代码:
1 <div th:fragment="cf" id="fragment_id" > 2 <span>公共代码段</span> 3 </div>
引入代码段:
1 <!-- th:include 通过片段名引入 --> 2 <div th:include="common::cf"></div> 3 <!-- th:include 通过 id 选择器引入 --> 4 <div th:include="common::#fragment_id"></div> 5 6 <!-- th:insert 通过片段名引入 --> 7 <div th:insert="common::cf"></div> 8 <!-- th:insert 通过 id 选择器引入 --> 9 <div th:insert="common::#fragment_id"></div> 10 11 <!-- th:replace 通过片段名引入 --> 12 <div th:replace="common::cf"></div> 13 <!-- th:replace 通过 id 选择器引入 --> 14 <div th:replace="common::#fragment_id"></div>
结果为:
- 参数传递:
引入公共代码片段时,我们可以使用以下两种方式传递参数:
- 模板名::片段名或选择器名(参数1=值1,参数2=值2,,...)
- 模板名::片段名或选择器名(值1, 值2,...)
common.html代码:
1 <div th:fragment="cf(var1, var2)" id="fragment_id" > 2 <span th:text=" 'var1:'+${var1}+ '-----var2:'+${var2} "></span> 3 </div>
引入代码段html:
1 <!-- th:include 通过片段名引入 --> 2 <div th:include="common1::cf(var1='include_name', var2='include_name2')"></div> 3 <!-- th:include 通过 id 选择器引入 --> 4 <div th:include="common1::#fragment_id('include_id', 'include_id2')"></div><br/> 5 6 7 8 <!-- th:insert 通过片段名引入 --> 9 <div th:insert="common1::cf(var1='insert_name', var2='insert_name2')"></div> 10 <!-- th:insert 通过 id 选择器引入 --> 11 <div th:insert="common1::#fragment_id('insert_id', 'insert_id2')"></div><br/> 12 13 14 15 <!-- th:replace 通过片段名引入 --> 16 <div th:replace="common1::cf(var1='replace_name', var2='replace_name2')"></div> 17 <!-- th:replace 通过 id 选择器引入 --> 18 <div th:replace="common1::#fragment_id('replace_id', 'replace_id2')"></div><br/>
结果: