- 采用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>