天天看點

thymeleaf的簡單用法-布局标簽

最近簡單學習使用了thymeleaf模闆引擎,現在把一些了解寫出來,可能了解的很淺或者有偏差,希望讀者了解,并評論對我指正,讓我能夠有所進步,并改正偏差。

一.eclipse或myeclipse 設定HTML模闆

Window->Preferences->輸入templates->選擇HTML下的HTML Source 下的Templates->New->Name中填寫thymeleaf->Context->選擇New HTML->Pattern中填入

<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"

      xmlns:th="http://www.thymeleaf.org">

<head>

 <title>title</title>

</head>

<body>

</body>

</html>

接着->Apply->OK  一定要在HTML頁面引入thymeleaf命名空間<html xmlns:th="http://www.thymeleaf.org"></html>  在html中引入此命名空間,可避免編輯器出現html驗證錯誤。

二.使用自定義的HTMl模闆

點選檔案夾->New->選擇html中的(Basic Templates)->Next到選擇模闆頁面->頁面下方有藍色的字型HTML Templates->選擇自定義的HTML模闆->OK就可以了

三.thymeleaf中布局标簽的簡單用法

1.布局标簽:th:fragment,layout:fragment和th:include,th:replace,th:insert,layout:decorator

1.1 th:fragment和th:include,th:replace,th:insert的用法:定義和引用代碼塊

(1)首先需要注意帶有公共使用的代碼塊(布局标簽定義的代碼塊)最好不要帶有<html><body></body></html>

(2)th:fragment和th:include,th:replace,th:insert的用法和後三個标簽的差別

<!-- school/common.html-->  定義代碼塊,公共使用  

<header th:fragment="header">  

 <div>this is a header</div>  

</header> 

<div id="nofragment"> this i a common code</div>(普通的代碼塊)

<!--school/index.html -->引用代碼塊

<html xmlns:th="http://www.thymeleaf.org">

<head>

 <title>title</title>

</head>

<body>

<div th:insert="school/common :: header"> </div>

th:insert保留自己的主标簽,保留th:fragment的主标簽,作用插入代碼塊是,則對應的結果為:

<div>

 <header>

  <div>this is a header</div>

 </header>

</div>

<div th:include="school/common :: header"> </div>

th:include保留自己的主标簽,舍棄th:fragment的主标簽,作用是插入代碼塊,對應的結果為:

<div>

 <div>this is a header</div>

</div>

 <div th:replace="school/common :: header"> </div>

 th:replace舍棄自己的主标簽,保留th:fragment的主标簽,作用是替換代碼塊,對應的結果為:

<header>

 <div>this is a header</div>

</header>

我們也可以引用不使用定義代碼塊的布局标簽的代碼塊,引用普通代碼塊。

 <div th:include="header:: #nofragment">

</body>

<html>

引入代碼塊的參數格式為templatename::[domselector],其中templatename是模闆名(如header),domselector是可選的dom選擇器。如果隻寫templatename,不寫domselector,則會加載整個模闆。

我們可以寫<div th:include="header:: (${user.isManager}? #{header.manager} : #{header.noManager})"></div>來做選擇

1.2 layout:fragment和layout:decorator的用法

<!-- school/layout.html-->模闆頁面

<html xmlns="http://www.w3.org/1999/xhtml"

      xmlns:th="http://www.thymeleaf.org">

<head>

 <title>title</title>

</head>

<body>

<div th:include="school/common :: header"></div>

<div layout:fragment="content"></div>

<div th:include="school/common :: header"></div>

</body>

</html>

<!-- school/index.html-->

<html layout:decorator="school/layout"

      xmlns:th="http://www.thymeleaf.org">

<head>

 <title>title</title>

</head>

<body>

<div layout:fragment="content">這裡是每個頁面自己定義内容的部分,個人了解相當于重寫layout中content部分</div>

</body>

</html>

這樣的話,layout.html中引入的css,js,images之類的都可以在index.html頁面使用,同時index.html頁面可以引入自己的css,js,images等,隻不過index.html使用了layout.html的布局,而content中的内容是每個頁面自定義的,不共用

1.3 布局傳參(模闆傳參)

<!--定義模闆同時定義參數 school/common.html -->

<div th:fragment="content(firstvalue,secondvalue)">

 <p th:text="${firstvalue}+'---'+${secondvalue}"></p>

</div>

<!--引用模闆同時傳遞參數 school/index.html -->

<div th:incluede="school/common :: content(${onevalue},${twovalue})"></div>

<div th:include="school/common :: content(firstvalue=${onevalue},secondvalue=${twovalue})"></div>

定義模闆的時候簽名也可以不包括參數:<div th:fragment="content">,我們依然可以使用<div th:include="school/common :: content(firstvalue=${onevalue},secondvalue=${twovalue})"></div>,還可以使用<div th:include="school/common :: content" th:with="firstvalue=${onevalue},secondvalue=${twovalue}">

我們還可以驗證模闆參數,用标簽th:assert 斷言

<!--定義模闆同時定義參數 school/common.html -->

<div th:fragment="content(firstvalue,secondvalue)" th:assert="${!#strings.isEmpty(firstvalue,secondvalue)}">

 <p th:text="${firstvalue}+'---'+${secondvalue}"></p>

</div>

若是哪裡有了解錯誤的或寫錯的地方,望各位讀者評論或者私信指正,不勝感激。

繼續閱讀