Thymeleaf系列教程

文章6 |   阅读 2562 |   点赞0

来源：https://blog.csdn.net/hry2015/category_6970939.html

Thymeleaf系列六 模板 template

转x33g5p2x  于2021-12-24 转载在 其他  
字(4.7k)|赞(0)|评价(0)|浏览(431)

1. 概述

在web开发中，我们经常会将公共头，公共尾，菜单等部分提取成模板供其它页面使用。在thymeleaf中，通过th:fragment、th:include、th:replace、参数化模板配置、css选择器加载代码块等实现。下文通过例子来说明用法:

  • fragment语法
  • 通过 th:fragment 和 css选择器加载代码块
  • th:include 和 th:replace
  • 参数化模板配置

这应该是Thymeleaf系列的最后一篇，不容易啊！夸夸一下自己，呵呵！

注意

  • spring boot 1.5.4 默认使用的 thymeleaf 2，这里只演示thymeleaf 2语法

2. 例子

2.1. 公共页

/templates/template/footer.html
此页面定义待加载的模板页面

  1. <!DOCTYPE html>
  2. <html xmlns:th="http://www.thymeleaf.org">
  3. <meta charset="UTF-8" />
  4. <body>
  5.     <!-- th:fragment 定义用于加载的块 -->
  6.     <span th:fragment="copy"> 2017 hry loaded by fragment=copy</span>
  8.     <span id="copy-section"> 2017 hry loaded by id=copy-section</span>
  10.     <!-- 定义模板时，可以传入参数 -->
  11.     <span th:fragment="frag(month, date) "> <span th:text="'welcome hry come in ' + ${month} + '-' + ${date}"></span></span>
  13.   </body>
  15. </html>

2.2. fragment语法

/templates/template/footer.html：定义要加载代码块copy

  1. <!-- th:fragment 定义用于加载的块 -->
  2. <span th:fragment="copy"> 2017 hry loaded by fragment=copy</span>

/templates/template/template.html：通过th:include在本页中加载以上的代码块copy，fragment加载语法如下：

  • templatename::selector：”::”前面是模板文件名，后面是选择器
  • ::selector：只写选择器，这里指fragment名称，则加载本页面对应的fragment
  • templatename：只写模板文件名，则加载整个页面
  1. ================== fragment语法 ============================= <br />
  2.     <!-- 语法说明 "::"前面是模板文件名，后面是选择器 -->
  3.     <div th:include="template/footer::copy"></div>
  4.     <!-- 只写选择器，这里指fragment名称，则加载本页面对应的fragment -->
  5.     <div th:include="::#thispage"></div>
  6.     <!-- 只写模板文件名，则加载整个页面 -->
  7.     <div th:include="template/footer"></div>
  8. ================= 加载块 ============================
  9. <br />
  10. <span id="thispage">
  11.     div in this page.
  12. </span>

运行结果输出：

  1. ================== fragment语法 ============================= <br />
  2.     <!-- 语法说明 "::"前面是模板文件名，后面是选择器 -->
  3.     <div> 2017 hry loaded by fragment=copy</div>
  4.     <!-- 只写选择器，这里指fragment名称，则加载本页面对应的fragment -->
  5.     <div>
  6.         div in this page.
  7.     </div>
  8.     <!-- 只写模板文件名，则加载整个页面 -->
  9.     <div>
  10.         <html>
  11.         <meta charset="UTF-8" />
  12.         <body>
  13.             <!-- th:fragment 定义用于加载的块 -->
  14.             <span> 2017 hry loaded by fragment=copy</span>
  16.             <span id="copy-section"> 2017 hry loaded by id=copy-section</span>
  18.             <!-- 定义模板时，可以传入参数 -->
  19.             <span> <span>welcome hry come in 6-19</span></span>
  21.           </body>
  23.         </html>
  24. </div>

2.3. 通过 th:fragment 和 css选择器加载代码块

/templates/template/footer.html：
除了th:fragment外，还可以css选择器加载代码块。下文定义th:fragment=”copy”和id=”copy-section”。

  1. <!-- th:fragment 定义用于加载的块 -->
  2.     <span th:fragment="copy"> 2017 hry loaded by fragment=copy</span>
  4.     <span id="copy-section"> 2017 hry loaded by id=copy-section</span>

/templates/template/template.html：

  • 通过 th:fragment 加载代码块
  • 通过css选择器加载代码块
  1. ================= 通过 th:fragment 和 css选择器加载代码块 =================
  2. <!-- 这里加载”th:fragment 定义用于加载的块“ -->
  3. <div th:include="template/footer::copy"></div>
  4. <!-- 这里加载”id=copy-section“的节点 -->
  5. <div th:include="template/footer::#copy-section"></div>

运行结果输出：

  1. ================= 通过 th:fragment 和 css选择器加载代码块 =================
  2. <!-- 这里加载”th:fragment 定义用于加载的块“ -->
  3. <div> 2017 hry loaded by fragment=copy</div>
  4. <!-- 这里加载”id=copy-section“的节点 -->
  5. <div> 2017 hry loaded by id=copy-section</div>

2.4. th:include 和 th:replace

th:include 和 th:replace都是加载代码块内容，但是还是有所不同，下面会展示两者不同。

/templates/template/footer.html：

  1. <!-- th:fragment 定义用于加载的块 -->
  2. <span th:fragment="copy"> 2017 hry loaded by fragment=copy</span>

/templates/template/template.html：

  • th:include：加载模板的内容： 读取加载节点的内容（不含节点名称），替换div内容
  • th:replace：替换当前标签为模板中的标签，加载的节点会整个替换掉加载他的div
  1. ================= th:include 和 th:replace============================
  2. <!-- 加载模板的内容： 读取加载节点的内容（不含节点名称），替换<div>的内容 -->
  3. <div th:include="template/footer::copy">1</div>
  4. <!-- 替换当前标签为模板中的标签： 加载的节点会整个替换掉加载他的<div> -->
  5. <div th:replace="template/footer::copy">2</div>

运行结果输出：

  1. <!-- 加载模板的内容： 读取加载节点的内容（不含节点名称），替换<div>的内容 -->
  2. <div> 2017 hry loaded by fragment=copy</div>
  3. <!-- 替换当前标签为模板中的标签： 加载的节点会整个替换掉加载他的<div> -->
  4. <span> 2017 hry loaded by fragment=copy</span>

2.5. 参数化模板配置

/templates/template/footer.html：
指定fragment时，可以指定变量

  1. <!-- 定义模板时，可以传入参数 -->
  2. <span th:fragment="frag(month, date) "> <span th:text="'welcome hry come in ' + ${month} + '-' + ${date}"></span></span>

/templates/template/template.html：
向模板中传入变量值

  1. ================= 参数化模板配置 ============================
  2. <div th:include="template/footer::frag(${month},${date})">...</div>

运行结果输出：

  1. ================= 参数化模板配置 ============================
  2. <div> <span>welcome hry come in 6-19</span></div>

3. 代码

详细见代码Github

版权说明 : 本文为转载文章, 版权归原作者所有 版权申明

原文链接 : https://blog.csdn.net/hry2015/article/details/73476973

内容来源于网络，如有侵权，请联系作者删除！

thymeleaf模板web前端

相关文章

    查看更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com