TH:INCLUDE的詳解

在Spring Thymeleaf中，th:include允許我們在一個頁面中引用另一個頁面的片段，這讓網站的開發更加靈活和高效。

一、引入th:include的基本用法

th:include最基本的語法格式如下：

<div th:include="fragments/header::headerContent"></div>

在上面的代碼中，我們使用th:include引用了其他頁面的headerContent片段，這個頁面位於fragments/header.html中。

需要注意的是，在引用其他頁面的片段時，必須使用以下格式：頁面的名字+::+片段的名字。

th:include並不僅僅局限於標籤，我們在其他標籤中同樣可以使用它來引入其他頁面中的內容。

二、使用th:include與動態展示數據

我們可以使用th:include來引入其他頁面中的動態數據。假設我們在片段headerContent中需要動態展示當前用戶的頭像和用戶名，這個信息可以從後台Java代碼中獲取。

那麼我們可以將headerContent片段寫為如下形式：

<div th:fragment="headerContent">
    <span class="avatar" th:style="'background-image: url(' + ${user.avatar} + ')'"></span>
    <span class="username" th:text="${user.name}"></span>
</div>

在上面的代碼中，我們使用了th:text和th:style屬性來展示用戶名和頭像，並且這些數據都來自於後台Java代碼中的user對象。

那麼在引用這個片段時，我們可以這樣寫：

<div th:include="fragments/header::headerContent" th:with="user=${currentUser}"></div>

在上面的代碼中，我們使用th:with屬性來指定user變量，這個變量在後台Java代碼中與currentUser對象對應。

三、使用th:include拆分頁面

編寫網站時，有時候一些頁面中會出現相似的內容，這時我們可以使用th:include來避免代碼重複。使用th:include時，我們可以將相似的內容提取出來，放在單獨的頁面中，以便復用。

舉個例子，在一個博客網站中，可能會有很多文章列表，在每個文章列表中，都需要顯示文章的標題、摘要以及發表時間等信息。那麼我們可以將文章列表的部分內容寫為一個片段，然後在所有需要使用到文章列表的頁面中引用這個片段。

我們可以將文章列表片段寫為如下代碼：

<div th:fragment="articleList">
    <div class="article-item" th:each="article : ${articles}">
        <h4 th:text="${article.title}"></h4>
        <p th:text="${article.abstract}"></p>
        <small th:text="${article.publishedTime}"></small>
    </div>
</div>

在上面的代碼中，我們使用th:each循環來展示所有的文章，並且使用了th:text屬性來展示文章的標題、摘要以及發表時間。

在其他頁面中引用這個片段時，我們可以這樣寫：

<div th:include="fragments/article::articleList" th:with="articles=${articleList}"></div>

在上面的代碼中，我們使用th:with屬性來指定articles變量，這個變量在後台Java代碼中與articleList對象對應。

四、結語

在這篇文章中，我們詳細介紹了th:include的用法。通過引用其他頁面的片段，我們可以實現更加靈活和高效的網站開發。希望這篇文章能夠對大家有所幫助。