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

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

<dependency>
     <groupId>nz.net.ultraq.thymeleafgroupId>
     <artifactId>thymeleaf-layout-dialectartifactId>
     <version>2.0.2version>
dependency>

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

<div layout:fragment="content">

div>

第三步:使用该模板

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


<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 informationsmall>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)