Spring Boot Thymeleaf 模板使用th:replace可用指定的頁面中的標籤取代。當多個頁面中有重複出現的部分時（例如logo、header、選單、導覽列，footer區塊）便能利用插入片段的方式來提高維護性，當共同部分需要修改時只要修改被插入的片段即可。
事前要求
參考「Spring Boot Thymeleaf 簡單範例」搭建好Spring Boot Thymeleaf專案，下面以此進行修改。
設定替代fragment
修改hello.html內容如下。在Hello, World的上下有兩個<div>分別為Header及Footer，同時以th:replace設定了取代的頁面片段。th:replace設定雙冒號::前為指定的模板頁面名稱，後面則為頁面中要用來取代的th:fragment標記名稱。
<div th:replace="header :: header">的標籤內容會被同目錄header.html中標有th:fragment="header"的標籤取代；
<div th:replace="footer :: footer">的標籤內容會被同目錄footer.html中標有th:fragment="footer"的標籤取代。
hello.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Hello Thymeleaf</title>
</head>
<body>
<div th:replace="header :: header">Header</div>
<div>
<p th:text="'Hello, ' + ${name} + '!'"/>
</div>
<div th:replace="footer :: footer">Footer</div>
</body>
</html>
Thymeleaf 3.0多了fragment expressions語法~{...}如下，效果相同。
...
<div th:replace="~{header :: header}">Header</div>
...
<div th:replace="~{footer :: footer}">Footer</div>
...
建立fragment模板
在專案的src/main/resources/templates目錄建立header.html及footer.html如下。裡面以th:fragment標記的標籤將用來取代hello.html中對應的th:replace內容。
header.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
</head>
<body>
<div th:fragment="header">
<h1>Thymeleaf Basic Include Demo</h1>
</div>
</body>
</html>
footer.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
</head>
<body>
<div th:fragment="footer">
Copyright © 2014-2021 菜鳥工程師 肉豬 All rights reserved.
</div>
</body>
</html>
測試
啟動專案並輸入http://localhost:8080/demo/hello導向hello.html結果顯示如下。
<!DOCTYPE html>
<html">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello Thymeleaf</title>
</head>
<body>
<div>
<h1>Thymeleaf Basic Include Demo</h1>
</div>
<div>
<p>Hello, World!</p>
</div>
<div>
Copyright © 2014-2021 菜鳥工程師 肉豬 All rights reserved.
</div>
</div>
</body>
</html>
設定替代template
或使用th:replace="~{templatename}"後面不加雙冒號以整份template來取代。在src/main/resources/templates新增一個logo.html內容如下，<img>指向src/main/resources/static中的spring.png。
logo.html
<div><img src="spring.png"></div>
在header上方新增一個<div th:replace="~{logo}"></div>加入logo.html。
hello.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Hello Thymeleaf</title>
</head>
<body>
<div th:replace="~{logo}"></div><!-- 加入logo -->
<div th:replace="~{header :: header}">Header</div>
<div>
<p th:text="'Hello, ' + ${name} + '!'"/>
</div>
<div th:replace="~{footer :: footer}">Footer</div>
</body>
</html>
測試
結果顯示如下。
<!DOCTYPE html>
<html">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello Thymeleaf</title>
</head>
<body>
<div><img src="spring.png"></div>
<div>
<h1>Thymeleaf Basic Include Demo</h1>
</div>
<div>
<p>Hello, World!</p>
</div>
<div>
Copyright © 2014-2021 菜鳥工程師 肉豬 All rights reserved.
</div>
</div>
</body>
</html>
2 則留言:
Why your hello.html in templates folder, but not in static folder? When I move the hello.html page into static folder, then the controller cannot find it....
Hi Alex, please see [Spring Boot Thymeleaf 簡單範例](https://matthung0807.blogspot.com/2021/05/spring-boot-web-thymeleaf-simple-example.html).
hello.html is a Thymeleaf template, and
"Thymeleaf default read templates in /templates folder", so if you put hello.html in /static folder, Thymleaf will not find and parsing it, then Controller cannot direct to "hello".
張貼留言