1、點擊菜單，經過Controller層處理，正常定位到視圖頁面
2、編寫抽象出公共片段的html，根據參數判斷是否加高亮樣式
3、多個目標頁面引用步驟2中抽象出的公共片段，傳不同的參數
具體實現如下：
1、Controller跳轉代碼如下：
package com.myself.controller;
import com.myself.dao.EmployeeDao;
import com.myself.entities.Employee;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import java.util.Collection;
@Controller
public class EmployeeControlller {
@Autowired
private EmployeeDao employeeDao;
@GetMapping("/emps")
public String listEmps(Model model){
Collection<Employee> emps = employeeDao.getAll();
model.addAttribute("emps",emps);
return "emp/list";
}
}
2、抽取出的公共片段頁面，主要代碼如下：
<!DOCTYPE html>
<!--需要引入命名空間，否則下邊無法使用th:標簽-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--th:fragment為普通片段的顯示定義-->
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0" th:fragment="topbar">
<a class="navbar-brand col-sm-3 col-md-2 mr-0" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">[[${session.loginUser}]]</a>
<input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
<ul class="navbar-nav px-3">
<li class="nav-item text-nowrap">
<a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">Sign out</a>
</li>
</ul>
</nav>
<!--id="sidebar"為選擇器的形式定義-->
<nav class="col-md-2 d-none d-md-block bg-light sidebar" id="sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#" th:class="${activeUri=='main.html'?'nav-link active':'nav-link'}">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home">
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
<polyline points="9 22 9 12 15 12 15 22"></polyline>
</svg>
Dashboard <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<!--注意@{}里邊才是請求的路徑，~{}里邊是引用的片段塊，${}里邊是取變量的值，#{}里是從配置文件取值-->
<a class="nav-link" href="#" th:href="@{/emps}" th:class="${activeUri=='emps'?'nav-link active':'nav-link'}">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
</svg>
員工管理
</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
3、具體需要高亮顯示的頁面，主要代碼片段如下：
如首頁主要代碼如下：
<!--引入頂部欄-->
<div th:replace="~{emp/bar::topbar}"></div>
<!--引入側邊欄並高亮顯示-->
<div th:replace="~{emp/bar::#sidebar(activeUri='main.html')}"></div>
而員工管理頁面主要代碼為：
<!--引入頂部欄-->
<div th:replace="~{emp/bar::topbar}"></div>
<!--引入側邊欄並高亮顯示-->
<div th:replace="~{emp/bar::#sidebar(activeUri='emps')}"></div>
其中引入片段可以有th:insert ; th:replace ; th:include ，具體可參考thymeleaf手冊
若有理解不到之處，望指正！