Thymeleaf抽取公共页面片段

墨蓝 2022-05-15 13:35 319阅读 0赞

抽取页面

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

其他，所有的页面根据需要进行引用
参考文档
这里写图片描述

th:fragment

抽取公共元素
Name，随便自定义命名

  1. <!DOCTYPE html>
  2. <html xmlns:th="http://www.thymeleaf.org">
  3. <body>
  4. <div th:fragment="copy">
  5.     © 2011 The Good Thymes Virtual Grocery
  6. </div>
  7. </body>
  8. </html>

th:insert

th:replace

th:include

引入公共元素
使用波浪号、花括号方式

  1. <body>
  2. ...
  3. <div th:insert="~{footer :: copy}"></div>
  4. </body>

这两个符号
也可以省略不写

  1. <body>
  2. ...
  3. <div th:insert="footer :: copy"></div>
  4. </body>

引入两种方式

选择器引入
模板名引入

~{templatename::selector}

模板名::选择器

~{templatename::fragmentname}

模板名::片段名

页面头部
抽取页面的顶部栏

  1. <!--topbar-->
  2. <nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0" th:fragment="topbar">
  3.     <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">[[${session.loginUser}]]</a>
  4.     <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
  5.     <ul class="navbar-nav px-3">
  6.         <li class="nav-item text-nowrap">
  7.             <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">Sign out</a>
  8.         </li>
  9.     </ul>
  10. </nav>

用户页面
引入命名空间

  1. <html lang="en" xmlns:th="http://www.thymeleaf.org">

引用页面顶部

  1. <!--引入抽取的topbar-->
  2. <!--模板名：会使用thymeleaf的前后缀配置规则进行解析-->
  3. <div th:replace="commons/bar::topbar"></div>

修改完成，刷新页面
Ctrl+F9

发表评论

表情：
评论列表 （有 0 条评论，319人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Thymeleaf抽取公共页面片段

    抽取页面 项目中，一般把所有的公共页面片段都抽取出来 放在一个独立的页面中 其他，所有的页面根据需要进行引用 参考文档 ![这里写图片描述][70] t

    墨蓝墨蓝/ 0 赞/ 320 阅读