Thymeleaf常用语法：模板片断
系统中的很多页面有很多公共内容，例如菜单、页脚等，这些公共内容可以提取放在一个称为“模板片断”的公共页面里面，其它页面可以引用这个
“模板片断”内容。
一、模板片断的定义
可以是html标签，也可以使用th:fragment属性定义片断。
二、引用片断
1、使用th:insert属性插入片断，除此之外，还可以使用th:replace和th:include插入。
语法：
(1) th:insert="~{模板名称}"
插入模板的整个内容
(2) th:insert="~{模板名称::选择器}"
插入模板的指定内容，选择器可以对应th:fragment定义的名称，也可以用类似JQuery选择器的语法选择部分片断。
片断选择器语法：
a) /name，选择子节点中节点名称为name的节点
b) //name，选择全部子节点中节点名称为name的节点
c) name[@attr='value'] 选择名称为name并且属性值为value的节点，如有多个属性可用and连接
d) //name[@attr='value'][index] 选择名称为name并且属性值为value的节点，指定节点索引
片断选择器的简化语法：
a) 可以省略 @ 符号
b) 使用 # 符号代替 id 选择，如div#id等价于div[id='id']
c) 使用 . 符号代替 class 选择，如div.class等于于div[class='class']
d) 使用 % 代替片断引用，如片断节点使用了th:ref或th:fragment，则可使用div%ref来选取节点
(3) th:insert="~{::选择器}"
不指定模板名称，则选择器作用于当前页面
(4) th:insert="~{this::选择器}"
与"~{::选择器}"类似，不同之处是在本页面找不到片断时，会到模板引擎的process方法处理的模板中寻找片断。
2、th:insert、th:replace、th:include的区别
th:insert 当前标签里面插入模板中的标签
th:replace替换当前标签为模板中的标签
th:include前标签里面插入模板的标签内容
3、模板片断也支持传入变量
引用语法：~{footer.html::名称(参数)
4、片断块引用
可以使用th:block定义片断块，th:block是一个属性容器，可以在里面添加任何的th属性。
例如表格的循环体中一般在tr中用th:each，也可以用th:block改写。
5、删除模板
使用th:remove删除模板，属性值：
all：删除当前节点，包括子节点
body：删除当前节点的全部子节点
tag：删除当前节点，不包括子节点
all-but-first：除了当前节点下面的第一个子节点，其它全部删除
none：不进行任何操作
三、使用实例
开发环境：IntelliJ IDEA 2019.2.2
Spring Boot版本：2.1.8
新建一个名称为demo的Spring Boot项目。
1、pom.xml
加入Thymeleaf依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
2、src/main/java/com/example/demo/TestController.java
package com.example.demo; import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping; @Controller
public class TestController {
@RequestMapping("/")
public String test(){
return "test";
}
}
3、src/main/resources/templates/footer.html
<span th:fragment="frag1">frag1</span>
<span th:fragment="frag2">frag2</span> <div id="footer1">footer1</div> <div>
<div id="footer2">footer2</div>
</div> <div>
<span class="content">footer3</span>
<span class="content">footer4</span>
</div> <div th:fragment="welcome(userName)">
<span th:text="|hello,| + ${userName}"></span>
</div>
4、src/main/resources/templates/test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <h4>th:insert引用片断</h4>
引用指定模板的整个内容
<div th:insert="~{footer.html}"></div>
引用指定模板的片断
<div th:insert="~{footer.html::frag1}"></div>
引用本页面的片断
<div th:insert="~{::frag3}"></div>
<div th:insert="~{this::frag3}"></div>
<div th:fragment="frag3">frag3</div> <h4>th:replace、th:include与th:insert的区别</h4>
<div th:replace="~{footer.html::frag1}"></div>
<div th:include="~{footer.html::frag1}"></div> <h4>片断选择器的部分用法</h4>
<div th:insert="~{footer.html::/div[@id='footer1']}"></div>
<div th:insert="~{footer.html:://div#footer2}"></div>
<div th:insert="~{footer.html::span[class='content']}"></div>
<div th:insert="~{footer.html:://span[class='content'][0]}"></div>
<div th:insert="~{footer.html:://span.content}"></div>
<div th:insert="~{footer.html::span%frag1}"></div> <h4>含有变量的片断引用</h4>
<div th:insert="~{footer.html::welcome('小明')}"></div> <h4>片断块引用</h4>
<table>
<th:block th:each="number : ${#numbers.sequence(0,1)}">
<tr>
<td th:text="${number}"></td>
</tr>
</th:block>
</table> <h4>删除模板</h4>
<table>
<th:block th:each="number : ${#numbers.sequence(0,1)}">
<tr th:remove="${number > 0} ? all : none">
<td th:text="${number}"></td>
</tr>
</th:block>
</table> </body>
</html>
IDEA运行后，浏览器访问：http://localhost:8080，查看网页源代码，结果如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <h4>th:insert引用片断</h4>
引用指定模板的整个内容
<div><span>frag1</span>
<span>frag2</span> <div id="footer1">footer1</div> <div>
<div id="footer2">footer2</div>
</div> <div>
<span class="content">footer3</span>
<span class="content">footer4</span>
</div> <div>
<span>hello,null</span>
</div></div>
引用指定模板的片断
<div><span>frag1</span></div>
引用本页面的片断
<div><div>frag3</div></div>
<div><div>frag3</div></div>
<div>frag3</div> <h4>th:replace、th:include与th:insert的区别</h4>
<span>frag1</span>
<div>frag1</div> <h4>片断选择器的部分用法</h4>
<div><div id="footer1">footer1</div></div>
<div><div id="footer2">footer2</div></div>
<div><span class="content">footer3</span><span class="content">footer4</span></div>
<div><span class="content">footer3</span></div>
<div><span class="content">footer3</span><span class="content">footer4</span></div>
<div><span>frag1</span></div> <h4>含有变量的片断引用</h4>
<div><div>
<span>hello,小明</span>
</div></div> <h4>片断块引用</h4>
<table> <tr>
<td>0</td>
</tr> <tr>
<td>1</td>
</tr> </table> <h4>删除模板</h4>
<table> <tr>
<td>0</td>
</tr> </table> </body>
</html>
Thymeleaf常用语法：模板片断的更多相关文章
- 1-9springboot之thymeleaf常用语法（html页面）
一.引用命名空间 <html xmlns:th="http://www.thymeleaf.org"> 在html中引入此命名空间,可避免编辑器出现html验证错误,虽 ...
- Thymeleaf常用语法：表达式语法之运算符
Thymeleaf表达式语法之常量分为字符串常量.数字常量.布尔值常量.空值常量:运算符分为算术运算符.关系运算符.条件运算符.无操作符. 开发环境:IntelliJ IDEA 2019.2.2Spr ...
- Thymeleaf常用语法：模板注释
Thymeleaf模板注释分为标准HTML/XML注释.解析层注释.原型注释三种. 一.注释说明 1.标准HTML/XML注释 直接通过浏览器打开,不显示,Thymeleaf模板引擎解析也不处理,但查 ...
- Thymeleaf常用语法：模板文件中表达式调用Java类的静态方法
在模板文件的表达式中,可以使用“${T(全限定类名).方法名(参数)}”这种格式来调用Java类的静态方法. 开发环境:IntelliJ IDEA 2019.2.2Spring Boot版本:2.1. ...
- thymeleaf常用语法
常用标签语法:①th:text<span th:text="${name}">1</span>注释:如果${name}有值则将替换掉1的值,若无则为1 ②t ...
- Thymeleaf常用语法：使用星号表达式
在处理模板时,一般情况都是使用变量表达式 ${...} 来显示变量,还可以使用选定对象表达式 *{...},它也称为星号表达式.如果在模板中先选定了对象,则需要使用星号表达式.Thymeleaf的内置 ...
- Thymeleaf常用语法：数据延迟加载
在处理模板时,可以由模板逻辑决定是否加载数据,以提高性能.在Spring Boot控制器中设置数据时,使用LazyContextVariable可以实现这功能. 开发环境:IntelliJ IDEA ...
- Thymeleaf常用语法：自定义数据转换类
在模板文件中,可以使用“${{...}}”表达式进行数据转换,Thymeleaf会使用配置好的数据转换类,来实现转换.例如一个User对象,简单起见假设有姓名和年龄两个字段,对象的toString() ...
- Thymeleaf常用语法：数据迭代
Thymeleaf数据迭代使用th:each属性,可以迭代数组.List.Set和Map等,数组.List.Set的迭代方法类似,迭代Map则会得到一个java.util.Map.Entry对象.在迭 ...
随机推荐
- Android BGradualProgress 多种渐变、直角or弧角、进度条、加载条
可实现多种渐变.直角or弧角.进度条.加载条 (Various gradient, right or arc angle, progress bar and loading bar can be re ...
- ios学习之路：Xcode+swift+打包ipa一步一坑记录
咳咳,作为公司的Android开发(兼java接口开发,兼软件测试,兼运维……)由于公司ios开发小伙伴离我而去,ios的app出了问题,急需处理.于是领导决定由我来处理一下.就是用证书重新打包的事儿 ...
- LAMP环境搭建与配置（1）
安装和配置MySQL.Apache.PHP 概念 LAMP是Linux Apache MySQL PHP 的简写,把Apache.MySQL以及PHP安装在Linux系统上,组成一个环境来运行PHP的 ...
- RN配置 java和python环境
安装java JDK 不推荐更改安装路径. 安装时 不要有中文 会安装jdK和jre 1==>配置新建 JAVA_HOME 具体是[编辑]==>[新建] 然后添加下两句 JAVA_HOME ...
- 源码角度分析-newFixedThreadPool线程池导致的内存飙升问题
前言 使用无界队列的线程池会导致内存飙升吗?面试官经常会问这个问题,本文将基于源码,去分析newFixedThreadPool线程池导致的内存飙升问题,希望能加深大家的理解. (想自学习编程的小伙伴请 ...
- （好文转载与总结）Windows10安装ubuntu18.04
Windows10中安装Ubuntu,期间踩了非常多的坑,最终安装成功了,梳理下来Windows10装Ubuntu的步骤还是比较简明的. 制作Ubuntu系统U盘 Windows磁盘为新系统进行分区, ...
- 5分钟搞定Jenkis
目录 什么是持续集成 Jenkins简介 Jenkins安装与启动 Jenkins插件安装 全局工具配置 自动安装 本地安装 代码上传至Git服务器 任务的创建与执行 Go项目 JAVA项目 @ 什么 ...
- GetWindowLong() 函数
Window API函数,可根据nlndex参数的不同获取指定窗口的相关信息,也可用于获取窗口内存中指定偏移的32位度整型值.该值大小在注册窗口类时设定, 函数原型:Long GetWindowLon ...
- 老师傅珍藏多年CAD常用快捷键合集，收藏，工作效率翻倍！
想要熟练操作CAD,做一名出色的CAD绘图员,少不了勤学苦练,还要掌握一些常用的绘图命令以及常用快捷键. 今天就来跟大家分享超全的CAD绘图命令,以及常用快捷键,学会涨工资! 常用快捷键: CTRL快 ...
- MySQL的表定义语法
表定义 只有成功创建数据库后,才能创建数据表,数据表是字段的集合,在表中数据按行和列的格式存储 创建表 MySQL 使用 CREATE TABLE 创建表.其中有多个选择,主要由表创建定义(creat ...