fragment介绍
fragment类似于JSP的tag，在html中文件中，可以将多个地方出现的元素块用fragment包起来使用。
定义fragment
新建foot.html文件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns:th="http://www.thymeleaf.org"> <footer th:fragment="footDiv"> the content of footer </footer> </html>
fragment的引用
- th:insert:保留自己的主标签，保留th:fragment的主标签。
- th:replace:不要自己的主标签，保留th:fragment的主标签。
- th:include:保留自己的主标签，不要th:fragment的主标签。（官方3.0后不推荐）
新建test.html文件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns:th="http://www.thymeleaf.org"> <!--导入片段--> <div th:insert="footer :: footDiv"></div> <div th:replace="footer :: footDiv"></div> <div th:include="footer :: footDiv"></div> </html>
得到的结果为
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <!--导入片段--> <div><footer> the content of footer </footer></div> <footer> the content of footer </footer> <div> the content of footer </div> </html
fragment的参数设置
定义：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns:th="http://www.thymeleaf.org"> <div th:fragment="headDiv(showInfo)"> the content of head!message:[(${showInfo})] </div> </html>
调用：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns:th="http://www.thymeleaf.org"> <!--导入片段--> <div th:include="head :: headDiv('测试')"></div> </html>
结果：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <!--导入片段--> <div> the content of head!message:测试 </div> </html>
如果是 多个参数的时候例子：
<div th:fragment="frag (onevar,twovar)"> <p th:text="${onevar} + ' - ' + ${twovar}">...</p> </div> 按参数定义时的顺序进行传递 <div th:replace="::frag (${value1},${value2})">...</div> <div th:replace="::frag (onevar=${value1},twovar=${value2})">...</div> 可以不按照参数定义的顺序 <div th:replace="::frag (twovar=${value2},onevar=${value1})">...</div>
fragment的lexible layouts
定义：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns:th="http://www.thymeleaf.org"> <head th:fragment="head(title,links,scripts)"> <title th:replace="${title}">The awesome application</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link href="/static/css/test.css" rel="stylesheet"> <script type="text/javascript" src="/static/js/jquery.js"></script> <th:block th:replace="${links}" /> <th:block th:replace="${scripts}" /> </head> </html>
使用：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns:th="http://www.thymeleaf.org"> <head th:include="head :: head(~{::title},~{::link},~{::script})"> <title>html的title</title> <link rel="stylesheet" th:href="@{/css/bootstrap.css}"> <script th:src="@{/js/bootstrap.js}"></script> </head> </html>
结果：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>html的title</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link href="/static/css/test.css" rel="stylesheet"> <script type="text/javascript" src="/static/js/jquery.js"></script> <link rel="stylesheet" href="/css/bootstrap.css"> <script src="/js/bootstrap.js"></script> </head> </html>
注意是link 和script，不是links 和scripts
如果调用的页面没有link或者script ，则指定传入的参数为~{}即可。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns:th="http://www.thymeleaf.org"> <head th:include="head :: head(~{::title},~{::link},~{})"> <title>html的title</title> <link rel="stylesheet" th:href="@{/css/bootstrap.css}"> </head> </html>