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

在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”，各种错误，英语不好，还不太理解啥意思，头疼了老半天，记下来，记下来，时刻提醒自己，长知识了

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

猜你喜欢