Thymeleaf-抽取公共页面

时间：2025-02-14 08:14:02

一、如何抽取公共页面

        在 Web 项目中，通常会存在一些公共页面片段（重复代码），例如头部导航栏、侧边菜单栏和公共的 js css 等。我们一般会把这些公共页面片段抽取出来，存放在一个独立的页面中，然后再由其他页面根据需要进行引用，这样可以消除代码重复，使页面更加简洁。

        抽取公共页面:Thymeleaf 作为一种优雅且高度可维护的模板引擎，同样支持公共页面的抽取和引用。我们可以将公共页面片段抽取出来，存放到一个独立的页面中，并使用 Thymeleaf 提供的 th:fragment 属性为这些抽取出来的公共页面片段命名。

        在Thymeleaf中，可以使用片段（fragment）来抽取和重用公共页面部分。

二、Thymeleaf抽取公共页面过程 

2.1 创建公共片段

在你的Thymeleaf模板中，找到你想要抽取的公共页面部分，比如导航栏、页眉或页脚。将这一部分的内容包裹在标签中，并使用th:fragment属性指定一个唯一的片段名称，例如：

<div th:fragment="fragment-name" >
    <span>公共页面片段</span>
</div>

2.2 在模板中引用公共片段

在 Thymeleaf 中，我们可以使用以下 3 个属性，将公共页面片段引入到当前页面中。 

th:insert：将代码块片段整个插入到使用了 th:insert 属性的 HTML 标签中；

<div th:insert="~{template::fragment-name}">
    <!-- 公共页面片段的内容将被插入到这里 -->
</div>

这里的template表示页面的名称，省略了 .html


th:replace：将代码块片段整个替换使用了 th:replace 属性的 HTML 标签中；

<div th:replace="~{template::fragment-name}">
    <!-- 当前元素将被公共页面片段替换 -->
</div>


th:include：将代码块片段包含的内容插入到使用了 th:include 属性的 HTML 标签中。

<div th:include="~{template::fragment-name}">
    <!-- 公共页面片段的内容将被包含在这里 -->
</div>

使用上 3 个属性引入页面片段，都可以通过以下 2 种方式实现。 

  • ~{templatename::selector}：模板名::选择器
  • ~{templatename::fragmentname}：模板名::片段名

通常情况下，~{} 可以省略，其行内写法为 [[~{…}]] 或 [(~{…})]，其中 [[~{…}]] 会转义特殊字符，[(~{…})] 则不会转义特殊字符.

三、案例演示

在页面  中引入通过  声明的页面片段，可以通过以下方式实现：

 假设在  中声明了名为 navbar 的公共片段：

<div th:fragment="navbar">
    <nav>
        <!-- 导航栏的内容 -->
    </nav>
</div>

在  中使用 th:insert 属性来引入  中的 navbar 片段：

<!DOCTYPE html>
<html xmlns:th="">
<head>...</head>
<body>
    <div th:insert=" :: navbar"></div>
    <!-- 页面的其他内容 -->
</body>
</html>

在上述代码中，th:insert 属性的值分成两部分：

  • ：公共片段所在的模板文件名。
  • navbar：要引入的公共片段的名称。

通过 :: 指定  作为源模板文件，并使用 navbar 引入  中声明的 navbar 公共片段。Thymeleaf 会将公共片段的内容插入到 th:insert 属性所在的 <div> 元素中。

相关文章