记一次SpringBoot整合thymeleaf layout模板的经历

最新推荐文章于 2025-01-12 00:00:00 发布

choosezzz

最新推荐文章于 2025-01-12 00:00:00 发布

阅读量1w

点赞数 2

分类专栏： SpringBoot 文章标签： thymeleaf使用layout模版

本文链接：https://blog.youkuaiyun.com/dingse/article/details/80509208

版权

SpringBoot 专栏收录该内容

3 篇文章

订阅专栏

本文记录了一次在SpringBoot项目中整合Thymeleaf的Layout模板过程，通过布局模板简化页面重复部分的编写。首先介绍了引入Thymeleaf相关依赖，然后详细阐述如何创建和使用layout.html模板，包括定义片段和装饰器的用法。最后提到了在SpringBoot中模板文件的存放位置以及配置，并分享了解决引用错误的教训。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在thymeleaf中可以使用th:include等标签在模板引擎加载的时候动态的将要包含的数据引进页面，但是当页面较多且每一个页面都具有相同部分时，这样做比较麻烦，所以百度找到可以使用layout模板
第一步：引入依赖

<dependency>
     <groupId>nz.net.ultraq.thymeleaf</groupId>
     <artifactId>thymeleaf-layout-dialect</artifactId>
     <version>2.0.2</version>
</dependency>

第二步：创建模板页面，我叫它layout.html
由于页面数据较多，就只粘贴重点：在需要其他页面数据的位置，使用layout:fragment=”“表示

<div layout:fragment="content">

</div>

第三步：使用该模板

使用layout:decorator=”“指定要使用的模版

<!doctype html>
<html class="no-js" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorator="center/layout" >

接下来，在内容部分，同样使用layout:fragment=”“来指定要将片段输出在模版的位置

 <div class="admin-content" layout:fragment="content">
    <div class="am-cf am-padding">
      <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">个人资料</strong> / <small>Personal information</small></div>
    </div>
。。。。。。。。。。。

说明
使用这种方式，可以直接继承模版的js以及css样式，很方便，所以只需要将内容部分单独放在其他html里面即可，只需要在模版中将相同的js，css等引入

注意
在SpringBoot中，将所有的模版放在了resources->templates->center下
在application.properties配置thymeleaf模版引擎时：

spring.thymeleaf.prefix=classpath:/templates/

说明：在项目发布时，resources下的所有文件都会加载到名为 classpath 的路径下；
即当模版引擎thymeleaf加载html文件的时候，根据配置会到classpath->templates下匹配与html名称相同的文件。
所以在指定layout:decorator=”“中模版位置时，要从templates下开始写，如center/layout。
遇到的坑：原以为模版与其他页面在同一路径下，可以直接引用，所以当初只写了layout:decorator=”layout”，各种错误，英语不好，还不太理解啥意思，头疼了老半天，记下来，记下来，时刻提醒自己，长知识了