深入了解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/n/271293.html