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