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

客官°小女子只卖身不卖艺 2022-05-23 01:15 410阅读 0赞

在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=”“**表示

**第三步：使用该模板**

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