Bootstrap Thymeleaf 布局中的导航栏突出显示

Question

我正在评估 spring boot + MVC + bootstrap 。我面临的一个问题是 bootstrap 在 thymeleaf 中的导航栏突出显示问题。

希望thymeleaf能够判断应该高亮的tab

我搜索并找到了这个解决方案：Bootstrap Navbar Highlighting in Thymeleaf

在包含（外部）页面中，它使用

<div th:replace="header::header('home')">
  to be replaced header
</div>

指定应突出显示 home 选项卡。

并且在包含的（内）页中，它使用

<nav class="..." th:fragment="header(activeTab)">
<ul class="nav navbar-nav">
  <li th:class="${activeTab == 'home'} ? 'active' : null "><a href="#" th:href="@{/home}">Home</a></li>
</ul>

判断这个tab是否高亮

它适用于每一页，但不适用于布局。

在布局页面中，包含（外部）页面是装饰器，它装饰其他页面（主页/关于/联系...）。选项卡值在这里待定。

例如

<div th:replace="header::header('home')">
  to be replaced header
</div>
<div layout:fragment="content">
  layout
</div>
<div th:replace="footer::footer">
  to be replaced footer
</div>

我无法在布局文件中预先分配 home 选项卡。有什么办法可以解决吗？

是否可以通过控制器甚至控制器的方法来判断？

环境：

springboot.version 1.3.0.M5
spring.version :4.2.1.RELEASE

非常感谢！

Answer 1

这不是您问题的确切解决方案，但也许您会喜欢这个想法。您可以使用请求上下文路径来识别实际选择了哪个选项卡，因此您可以使用 ${#httpServletRequest.getContextPath()} 然后可能是这样的：

<ul class="nav navbar-nav" th:with="view=${#httpServletRequest.getServletPath()}">
  <li th:classappend="${#strings.startsWith(view,'/home')? 'active' : ''}"><a href="#" th:href="@{/home}">Home</a></li>
</ul>

或者你可以使用 ControllerAdvice:

@ControllerAdvice(assignableTypes = { MyController.class })
public class MyControllerAdvice {

  @ModelAttribute
  public void addAttributes(@RequestParam Map<String, String> params, Model model, HttpServletRequest request) {
String activeTab = ... whatever
    model.addAttribute("active_tab", activeTab);
  }
}

使用@ControllerAdvice 有一大缺点。如果您计划使用 Spring WebFlow 来创建多页表单（向导），那么它将无法工作，因为 WebFlow 不使用模型属性。

Answer 2

更改此行<nav class="..." th:fragment="header(activeTab)"> 对此 <nav class="..." th:fragment="header(activeTab='activeTab')"> 它对我有用

Bootstrap Thymeleaf 布局中的导航栏突出显示

Bootstrap Navbar Highlighting in Thymeleaf's layout

spring

spring-mvc

twitter-bootstrap

thymeleaf

spring-boot