網頁

▼

2021/5/21

Spring Boot Thymeleaf 取代頁面片段 replace page fragment

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>

github。


2 則留言:

  1. Alex2022年5月31日 凌晨2:38

    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....

    回覆刪除
  2. Matt2022年5月31日 清晨5:20

    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".

    回覆刪除