一、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名稱後的兩個冒號)