1. 程式人生 > >記一次SpringBoot整合thymeleaf layout模板的經歷

記一次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”,各種錯誤,英語不好,還不太理解啥意思,頭疼了老半天,記下來,記下來,時刻提醒自己,長知識了