thymeleaf模板頁面的兩種佈局方案
阿新 • • 發佈：2020-09-11
- 採用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>