溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本例采用的是Springboot+thymeleaf,因為公共頁面屬于動態頁,因此需要放在templates目錄下(具體幾層自定義即可),我們這里做一個引用頭部、主體和底部公共信息的示例
head.html,使?th:fragment 屬性來定義被包含的模版?段,以供其他模版引用或者包含,這里我們定義了頭部(admin_head(title))、主體(admin_common)、底部(admin_bottom)三個模板片段
<!DOCTYPE html>
<html>
<head th:fragment="admin_head(title)">
<meta charset="UTF-8">
<title th:text="${title}"></title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<base th:href="${#request.getContextPath()}+'/'">
<!-- 引用頁面css樣式 -->
<link rel="stylesheet" th:href="@{/css/common/public.css}" media="all"/>
</head>
<body>
<th:block th:fragment="admin_common">
這是公共信息
</th:block>
<th:block th:fragment="admin_bottom">
<!-- jquery控件 -->
<script type="text/javascript" charset="utf-8" th:src="@{/js/common/jquery-3.4.1.min.js}"></script>
</th:block>
</body>
</html>main.html,雙冒號(::)前面是公共頁面路徑,不受當前頁面層級影響,直接從根路徑寫即可
<!DOCTYPE html>
<html>
<!-- 引用公共頁面頭部片段信息,雙冒號(::)前后都要有空格,切記 -->
<head th:replace="common/head :: admin_head(測試頁)">
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<!-- 引用公共頁面主體片段信息 -->
<body th:include="common/head :: admin_common">
</body>
</html>我們來看一下頁面源碼,頭部信息和主體都已經加載過來了
list.html,雙冒號(::)前面是公共頁面路徑,不受當前頁面層級影響,直接從根路徑寫即可
<!DOCTYPE html>
<html>
<!-- 引用公共頁面頭部片段信息,雙冒號(::)前后都要有空格,切記 -->
<head th:replace="common/head :: admin_head(user列表)"></head>
<body>
OK
<!-- 引用公共頁面底部片段信息 -->
<th:block th:replace="common/head :: admin_bottom"></th:block>
</body>
</html>我們來看一下頁面源碼,頭部信息和主體都已經加載過來了
引用模板的時候可以使用 th:insert或者 th:replaceth:insert與th:replace 區別如下:
th:insert：將被引用的模板片段插?到自己的標簽體中
th:replace：將被引用的模板片段替換掉自己
th:include：類似于 th:insert,?不是插??段,它只插?此?段的內容(Thymeleaf 3.0 之后不再推薦使?)
th:block空標簽詳解
移步碼云下載
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
