最近簡單學習使用了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>
若是哪裡有了解錯誤的或寫錯的地方,望各位讀者評論或者私信指正,不勝感激。