深入了解th:fragment

一、th:fragment是什麼

th:fragment是Thymeleaf模板引擎提供的一種抽象機制，它允許我們將頁面的某個片段定義為可重用的代碼塊。

在HTML文件中，我們可以通過使用<th:fragment>標籤定義一個代碼片段，並設置一個名稱。這個名稱可以在頁面中任何位置進行引用，並將這個片段替換成實際的代碼塊。

<!-- 在HTML文件中定義一個名為「header」的th:fragment -->
<th:fragment name="header">
    <header>
        <nav>
            <ul>
                <li><a href="#">Menu 1</a></li>
                <li><a href="#">Menu 2</a></li>
                <li><a href="#">Menu 3</a></li>
            </ul>
        </nav>
    </header>
</th:fragment>

二、th:fragment的使用方法

1. 使用th:replace引用th:fragment

在HTML文件中，我們可以通過使用<th:replace>標籤來引用已經定義的th:fragment。這將會將定義的代碼片段替換成<th:replace>標籤內嵌套的HTML代碼。

<!-- 在HTML文件中引用名為「header」的th:fragment -->
<div th:replace="fragments :: header"></div>

上面這行代碼的fragments :: header這個表達式，其中fragments是Thymeleaf模板引擎提供的默認前綴，代表查找的是th:fragment，header就是我們定義的片段名稱。

2. 使用th:include引用th:fragment

與th:replace相似，我們可以使用<th:include>標籤來引用th:fragment，但是與th:replace不同的是，th:include不會替換掉當前標籤。

下面代碼演示了如何使用th:include來引用th:fragment：

<!-- 在HTML文件中引用名為「footer」的th:fragment -->
<div>
    <div>這是內容區域</div>
    <!-- 在這裡引用名為「footer」的th:fragment，並將其添加到div標籤中 -->
    <div th:include="fragments :: footer">頁面下方</div>
</div>

需要注意的是，使用th:include引用th:fragment時，我們需要保證最終的HTML代碼片段不會造成語法錯誤，例如引用一個</div>結束標籤，但是在引用的頁面中沒有與之對應的<div>開始標籤，這將會導致語法錯誤。

3. 使用th:insert引用th:fragment

在使用th:insert標籤引用th:fragment時，如果我們所引用的標籤不存在，就會直接插入這個定義好的th:fragment的HTML片段。

<!-- 在HTML文件中引用名為「test」的th:fragment -->
<div>這是內容區域</div>

<!-- 如果沒有定義所引用的標籤，則會將th:insert標籤替換成這個HTML片段 -->
<th:insert th:fragment="test">
  <h2>片段內的標題，如果引用成功，這個標題將不會被顯示</h2>
</th:insert>

三、th:fragment的注意事項

1. 定義和引用th:fragment的位置

我們應當將th:fragment定義在<body>標籤中的頂層元素內，這樣我們就可以在任何一個子元素中引用它。如果將th:fragment定義在了某個特定的子元素中，它只能在這個特定的子元素內部被引用。

2. th:fragment不能作為標籤的屬性

在HTML文件中，th:fragment是不能夠作為標籤的屬性出現的。例如，下面的代碼將會導致語法錯誤：

<nav th:fragment="test">
  <ul>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
  </ul>
</nav>

正確的寫法應該是將th:fragment定義在nav標籤的內部，如下所示：

<nav>
  <th:fragment name="test">
    <ul>
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
    </ul>
  </th:fragment>
</nav>

3. th:fragment中的變數引用

當我們在一個th:fragment中引用變數時，這個變數將會被當作局部變數。這意味著，這個變數的值只能在這個th:fragment中被訪問。

下面是一個示例代碼：

<th:fragment name="greet">
  <p th:text="${message}">Hello, World!</p>
</th:fragment>

<!-- 在另一個地方引用greet片段 -->
<div th:replace="fragments :: greet(message='Hello, Me!')" ></div>

在上面的代碼中，我們在引用greet片段時，以message=’Hello, Me!’的形式傳遞了一個參數。這個參數將會在greet片段中被識別為局部變數。

四、總結

th:fragment是Thymeleaf模板引擎提供的一種強大的代碼片段抽象機制，可以幫助我們更加有效、簡潔地編寫HTML文件以及增強代碼的可維護性。

五、代碼示例

本文所涉及到的代碼，可供參考：

<!-- /src/main/resources/templates/fragments.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Thymeleaf template engine</title>
</head>
<body>

  <!-- 定義greet片段 -->
  <th:fragment name="greet">
    <p th:text="${message}">Hello, World!</p>
  </th:fragment>

  <!-- 定義footer片段 -->
  <th:fragment name="footer">
    <footer>
      <hr>
      <p>頁腳內容</p>
    </footer>
  </th:fragment>

</body>
</html>

<!-- 在HTML文件中引用greet和footer片段 -->
<html>
<head>
  <meta charset="UTF-8">
  <title>Thymeleaf template engine</title>
</head>
<body>

  <!-- 引用greet片段 -->
  <div th:replace="fragments :: greet(message='Hello, Me!')"></div>

  <!-- 引用footer片段 -->
  <div>
    <div>這是內容區域</div>
    <div th:include="fragments :: footer">頁面下方</div>
  </div>

  <!-- 在不存在的標籤內使用th:insert引用片段 -->
  <th:insert th:fragment="test">
    <h2>片段內的標題，如果引用成功，這個標題將不會被顯示</h2>
  </th:insert>

</body>
</html>

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/271293.html