Thymeleaf抽取公共页面片段 - 好文

抽取页面

项目中，一般把所有的公共页面片段都抽取出来
放在一个独立的页面中

其他，所有的页面根据需要进行引用
参考文档

th:fragment

抽取公共元素
Name，随便自定义命名
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <body> <div
th:fragment="copy"> © 2011 The Good Thymes Virtual Grocery </div> </body>
</html>
th:insert

th:replace

th:include

引入公共元素
使用波浪号、花括号方式
<body> ... <div th:insert="~{footer :: copy}"></div> </body>
这两个符号
也可以省略不写
<body> ... <div th:insert="footer :: copy"></div> </body>
引入两种方式

选择器引入
模板名引入

~{templatename::selector}

模板名::选择器

~{templatename::fragmentname}

模板名::片段名

页面头部
抽取页面的顶部栏
 <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>
用户页面
引入命名空间
<html lang="en" xmlns:th="http://www.thymeleaf.org">
引用页面顶部
  <div th:replace=
"commons/bar::topbar"></div>
修改完成，刷新页面
Ctrl+F9

热门工具换一换