thyemeleaf學習要點心得

一、thymeleaf模板子頁面引用JS,CSS,HTML的方法:

這是我的目錄結構

1,引用JS文件

首先將公共資源提取出來放在單獨的一個html中,並加入thymeleaf模板的引用

然後,在<div>中引用thymeleaf的th:fragment=“自定義一個名稱” 標籤,<script th:src="@{公共資源JS路徑}">。

<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<body>
	<div th:fragment="onload_js">
		<script th:src="@{/js/jquery.min.js}"></script>
		<script th:src="@{/js/amazeui.min.js}"></script>
		<script th:src="@{/js/app.js}"></script>
	</div>
</body>
</html>

子頁面中調用的方法,首先加入thymeleaf模板的引用

然後,自定義一個<div>,在<div>中引用thymeleaf的th:include=“公共資源的路徑/html名稱::自定義的js名稱” 標籤,(注意html名稱後的兩個冒號

2,引用CSS文件

首先將公共資源提取出來放在單獨的一個html中,並加入thymeleaf模板的引用

然後,在<head>中引用thymeleaf的th:fragment=“自定義一個名稱(title)” 標籤,<title th:text="${title}">,<link th:href="@{公共資源CSS路徑}" rel="stylesheet" />。

<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="commonHeader(title)">
	<title th:text="${title}"></title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link th:href="@{/i/favicon.png}" rel="icon" type="image/png"/>
	<link th:href="@{/i/[email protected]}" rel="apple-touch-icon-precomposed"/>
	<link th:href="@{/css/amazeui.min.css}" rel="stylesheet" />
	<link th:href="@{/css/admin.css}" rel="stylesheet" />
</head>
</html>

子頁面中調用的方法,首先加入thymeleaf模板的引用

然後,自定義一個<head>,在<head>中引用thymeleaf的th:include=“公共資源的路徑/html名稱::自定義的css名稱(標題)” 標籤,(注意html名稱後的兩個冒號

3,引用html文件

首先將公共資源提取出來放在單獨的一個html中,並加入thymeleaf模板的引用

然後,在<div>中引用thymeleaf的th:fragment=“自定義一個名稱” 標籤。

<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
	<div th:fragment="table">
		<table>
			<tr>
				<th>標題</th>
			</tr>
			<tr>
				<td>序號</td>
				<td>名稱</td>
				<td>操作</td>
			</tr>
		</table>
	</div>
</html>

子頁面中調用的方法,首先加入thymeleaf模板的引用

然後,自定義一個<div>,在<div>中引用thymeleaf的th:replace=“公共資源的路徑/html名稱::自定義的div名稱” 標籤,(注意html名稱後的兩個冒號

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章