SpringBoot(十六) Thymeleaf模板引擎 - 页面布局

使用Thymeleaf做页面模板,页面模板的主要作用是将相对公共的页面部份(如站头、站尾及公共的js、css等)提取出现放到模板页面中,在其他需要使用的地方引用该模板即可。

构建项目

控制层

1
2
3
4
5
6
7
8
9
10
11
12
13
/**
* @author Ray
* @date 2018/8/1 0001
*/
@Controller
@RequestMapping(value = "/test04")
public class TestController04 {

@GetMapping(value = "/")
public String index(){
return "test04";
}
}

页面模板webModel.html

位置:templates/fragments/webModel.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>页面模板</title>
</head>
<body>

<div style="text-align: center;border: 1px #3b8cff solid;">
<h3>头部</h3>
</div>

<div>
<div th:include="this::content"></div>
</div>

<div style="text-align: center;border: 1px #3b8cff solid;">
<h3>尾部</h3>
</div>
</body>
</html>

注意

  1. 需要使用Thymeleaf的命名空间xmlns:th="http://www.thymeleaf.org"
  2. 最关键部份:<div th:include="this :: content"></div>使用th:include来将数据引入进来。意为将content部份的内容引入到这个地方,content是在具体页面中体现,此名称可自己定义。
  3. th:includeth:replace区别,include只是加载,replace是替换

页面test04.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="zh-CN"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
th:include="fragments/webModel">
<head>
<meta charset="UTF-8">
<title>Thymeleaf-4</title>
</head>
<body>
th:include和th:replace都可以引入模块,两者的区别在于
th:include:引入子模块的children,依然保留父模块的tag
th:replace:引入子模块的所有,不保留父模块的tag

<div th:fragment="content" th:remove="tag">
<h2>这里的内容会显示</h2>
<span>
<h3>th:remove总共有五种属性:</h3>
all : 移除tag标记和children。<br/>
body:保留tag标记和移除children。<br/>
tag :移除tag和保留children。<br/>
all-but-first :保留tag和移除除了第一个外的所有children。<br/>
none :什么都不做。<br/>
</span>
</div>

</body>
</html>

注意

  1. 需要使用Thymeleaf的命名空间xmlns:th="http://www.thymeleaf.org"
  2. 引入模块 th:include="fragments/webModel" (路径+名称(即html页面名称))
  3. 使用 th:fragment="content" 来启用页面模板,启用的模板根据模板名称和fragment名称而定。content是根据webModel.html页面模板中指定的名称而定。
  4. 使用了th:remove="tag"这表示数据加载完成后将当前标题删除。

输出结果

-------------- 本文结束  感谢您的阅读 --------------