SpringBoot web开发-11-Thymeleaf 公共页面抽取

Thymeleaf 公共页面抽取

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

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

• 例如：将公共页面片段抽取出来，存放在 commons.html 中，代码如下。

    公共页面片段

1
2
3

• 引用公共页面

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

• th:insert：将代码块片段整个插入到使用了 th:insert 属性的 HTML 标签中，嵌套层div；
• th:replace：将代码块片段整个替换使用了 th:replace 属性的 HTML 标签中；
• th:include：将代码块片段包含的内容插入到使用了 th:include 属性的 HTML 标签中。

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

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

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

• 例如：

• 在页面 fragment.html 中引入 commons.html 中声明的页面片段，可以通过以下方式实现。

------------------------------------------------




------------------------------------------------




1
2
3
4
5
6
7
8
9
10
11
12
13
14

• 启动 Spring Boot，使用浏览器访问 fragment.html，查看源码，结果如下。

    

        公共页面片段
    



    

        公共页面片段
    

------------------------------------------------


    公共页面片段



    公共页面片段

------------------------------------------------


    公共页面片段



    公共页面片段

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

• 传递参数

Thymeleaf 在抽取和引入公共页面片段时，还可以进行参数传递，大致步骤如下：

1. 传入参数；
2. 使用参数。

• 传入参数

引用公共页面片段时，我们可以通过以下 2 种方式，将参数传入到被引用的页面片段中：

• 模板名::选择器名或片段名(参数1=参数值1,参数2=参数值2)
• 模板名::选择器名或片段名(参数值1,参数值2)

注：

• 若传入参数较少时，一般采用第二种方式，直接将参数值传入页面片段中；
• 若参数较多时，建议使用第一种方式，明确指定参数名和参数值，。

• 例如：

------------------------------------------------




------------------------------------------------




1
2
3
4
5
6
7
8
9
10
11
12
13
14

• 使用参数：在声明页面片段时，我们可以在片段中声明并使用这些参数，例如：

    
...

1
2
3
4

• 结果：

下一篇：SpringBoot web开发-12-springboot整合thymeleaf模板引擎