當前位置：
首頁 >
Springboot：员工管理之公共页面提取 高亮显示（十（5））
發布時間：2023/10/11
76
老码农
生活随笔
收集整理的這篇文章主要介紹了
Springboot：员工管理之公共页面提取 高亮显示（十（5））
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
把頂部和左側的公共代碼分別放到header.html和left.html中
頂部代碼：resources\templates\header.html
主內容展示：
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--th:fragment="head" -->
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0" th:fragment="head">
..........內容略.........
</nav>
</html
左側代碼：resources\templates\left.html
主內容展示：
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--接收頁面傳遞過來的參數 th:fragment="left(pageActive)" -->
<nav class="col-md-2 d-none d-md-block bg-light sidebar" th:fragment="left(pageActive)">
<div class="sidebar-sticky">
<ul class="nav flex-column">
..........其他內容略.........
<!--三元運算符 判斷是否要高亮-->
<li class="nav-item">
<a th:class="${pageActive=='list'?'nav-link active':'nav-link'}" th:href="@{/employee}">
員工管理
</a>
</li>
</ul>
</div>
</nav>
</html>
在dashboard.html和list.html頁面分別引入頂部和左側頁面：
list.html
主內容展示：
<!--引入頭部公共代碼-->
<div th:replace="header::head"></div>
<div class="container-fluid">
<div class="row">
<!--引入左側公共代碼 傳參list給左側頁面 用于判斷高亮樣式-->
<div th:replace="left::left('list')"></div>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
<div class="chartjs-size-monitor" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">
dashboard.html
<div th:replace="header::head"></div>
<div class="container-fluid">
<div class="row">
<!--引入左側公共代碼 傳參main給左側頁面 用于判斷高亮樣式-->
<div th:replace="left::left('main')"></div>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
<div class="chartjs-size-monitor" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">
總結
以上是生活随笔為你收集整理的Springboot：员工管理之公共页面提取 高亮显示（十（5））的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [CQOI2013]新Nim游戏（博弈论
- 下一篇： Pyspider爬虫简单框架——链家网