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;">
posted @   努力的校长  阅读(333)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
点击右上角即可分享
微信分享提示