Thymeleaf抽取公共页面代码

最新推荐文章于 2023-07-24 19:33:49 发布

不_停_奔_跑

最新推荐文章于 2023-07-24 19:33:49 发布

阅读量2.6k

点赞数

CC 4.0 BY-SA版权

分类专栏：经验文章标签： Thymeleaf 公共页面要点总结

本文链接：https://blog.youkuaiyun.com/weixin_42839838/article/details/90511732

经验专栏收录该内容

13 篇文章

订阅专栏

本文介绍了SpringBoot中使用Thymeleaf模板引擎如何抽取和引入公共页面代码，包括th:insert、th:replace和th:include三种引入方式，以及th:fragment定义公共代码部分的方法。通过实例展示了如何在head标签中引用公共代码，同时强调了如果引入页面无额外样式文件需设置传值为空的重要性。

SpringBoot中的使用thymeleaf模板引擎提供了对每个页面的公共的部分，比如导航栏，页脚部分或者head标签中引入的固定的公共资源等，抽取公共代码进行简单的引入即可达到公共页面代码的复用。
废话少说直接开始带大家具体操作下：
我所使用的thymeleaf模板引擎版本为：3.0.11的
在这里插入图片描述

Thymeleaf提供了三种引入方式：

th:insert
th:replace
th:include

在定义公共代码时，有如下两种当时：

定义id名进行引入
使用 th:fragment 定义公共代码部分

定义公共代码示例

此处使用了两种方式进行定义，便于下面进行演示

	<!-- 公共页面代码，此处为了用于区分使用了span标签 -->
    <span th:fragment="comId" id="commonId">
        我是公共代码
    </span>

公共代码页面截图
在这里插入图片描述

引入公共代码

引入的格式：~{公共页面的地址/页面名称::公共页面定义的唯一标识}
注：公共页面名称不需要带后缀名，定义的唯一标识可以是定义的id名或者使用 th:fragment定义的唯一标识名或方法名

使用三种方式引入公共页面，直接上截图
在这里插入图片描述
运行之后的效果截图

还可以将head标签中的公共代码做引用

公共页面截图
在这里插入图片描述
在公共页面中添加以下代码，表示引入当前页面中引入的其他样式及样式资源文件

//将title部分修改为对应的页面内容
<title th:replace="${title}">公共页面</title> 

<th:block th:replace="${links}"/>
<th:block th:replace="${styles}"/>

引入页面截图
在这里插入图片描述
注：若引入页面没有需要单独引入的样式及样式文件则需要将传值设置为空，否则页面会报错

<head th:replace="commonDemo::common_head(~{::title},~{},~{})">

运行之后我们就会看到在当前页面中引入的样式及样式文件也会一并添加到head中
在这里插入图片描述
运行之后页面标题已经修改为了当前页面标题，并且当前页面中单独引入的样式文件也一并添加进来

以上就是Thymeleaf中抽取公共页面的要点总结，如有不对之处望大家批评指正