thymeleaf的fragment例子

时间:2022-09-26 23:10:58

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的引用

  1. th:insert:保留自己的主标签,保留th:fragment的主标签。
  2. th:replace:不要自己的主标签,保留th:fragment的主标签。
  3. 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>