thymeleaf模板页面的两种布局方案
- 采用th:include + th:replace方式进行布局
首先，创建布局文件layout1.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>布局方案</title>
<style>
* {font-family: Microsoft YaHei, Tahoma, Helvetica, Arial, sans-serif;}
.header {background-color: #f5f5f5;padding: 20px;}
.header a {padding: 0 20px;}
.container {padding: 20px;margin:20px auto;}
.footer {height: 40px;background-color: #f5f5f5;border-top: 1px solid #ddd;padding: 20px;}
</style>
</head>
<body>
<header class="header">
<div>
采用th:replace方式进行布局
</div>
</header>
<div class="container" th:include="::content">页面正文内容</div>
<footer class="footer">
<div>
<p style="float: left">© Hylun 2017</p>
<p style="float: right">
Powered by <a href="http://my.oschina.net/alun" target="_blank">Alun</a>
</p>
</div>
</footer>
</body>
</html>
划重点！！！这里就是页面不断变化的主体部分。
<div class="container" th:include="::content">正文内容</div>
接着我们去编写页面正文内容。这里的 th:replace="demo/layout1 内容，该内容指引了第一步中layout1.html文件所在目录位置
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
th:replace="demo/layout1">
<div th:fragment="content">
页面中正文内容：采用th:include + th:replace方式进行页面布局
</div>
</html>
编写后端Controller代码
@Controller
public class DemoController {
/**
* 验证采用th:replace方式布局的方式
* @return
*/
@RequestMapping("layout1")
public String testLayout1(){
return "text";
}
}
结果如下：
- 采用layout方式设置
第一步，在pom.xml中加入依赖
<dependency>
<groupId>nz.net.ultraq.thymeleaf</groupId>
<artifactId>thymeleaf-layout-dialect</artifactId>
<version>2.3.0</version>
</dependency>
第二步，创建布局文件layout2.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>layout布局方案</title>
<style>
* {font-family: Microsoft YaHei, Tahoma, Helvetica, Arial, sans-serif;}
.header {background-color: #f5f5f5;padding: 20px;}
.header a {padding: 0 20px;}
.container {padding: 20px;margin:20px auto;}
.footer {height: 40px;background-color: #f5f5f5;border-top: 1px solid #ddd;padding: 20px;}
</style>
</head>
<body>
<header class="header">
<div>
采用layout方式进行布局
</div>
</header>
<div class="container" layout:fragment="content"></div>
<footer class="footer">
<div>
<p style="float: left">© Hylun 2017</p>
<p style="float: right">
Powered by <a href="http://my.oschina.net/alun" target="_blank">Alun</a>
</p>
</div>
</footer>
</body>
</html>
xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" ： 引入layout标签
<div class="container" layout:fragment="content">页面正文内容</div> 设置页面正文内容所在位置
第三步，编写页面正文内容
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
layout:decorator="demo/layout2">
<div layout:fragment="content">
正文内容222222222222
</div>
</html>
layout:decorator="demo/layout2" ：此位置指向layout2.html页面位置
layout:fragment="content" ：指定页面正文内容 content要与layout2.html页面中定义的名字一致
- 模板间传参
当采用th:include + th:replace方式进行布局的时候，模板间可以进行参数传递
layout.html内容
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>布局方案</title>
<style>
* {font-family: Microsoft YaHei, Tahoma, Helvetica, Arial, sans-serif;}
.header {background-color: #f5f5f5;padding: 20px;}
.header a {padding: 0 20px;}
.container {padding: 20px;margin:20px auto;}
.footer {height: 40px;background-color: #f5f5f5;border-top: 1px solid #ddd;padding: 20px;}
</style>
</head>
<body>
<header class="header">
<div>
采用th:replace方式进行布局
</div>
</header>
<div class="container" th:include="::content('传入参数111111')"></div>
<footer class="footer">
<div>
<p style="float: left">© Hylun 2017</p>
<p style="float: right">
Powered by <a href="http://my.oschina.net/alun" target="_blank">Alun</a>
</p>
</div>
</footer>
</body>
</html>
页面正文内容
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
th:replace="demo/layout1 (title='replace方式布局')">
<div th:fragment="content(text)">
页面中正文内容：采用th:include + th:replace方式进行页面布局
模板传输参数为：<span th:text="${text}"></span>
</div>
</html>
