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常用语法：模板片断相关推荐

thymeleaf模板html a标签,Thymeleaf常用语法：模板片断
Thymeleaf常用语法:模板片断系统中的很多页面有很多公共内容,例如菜单.页脚等,这些公共内容可以提取放在一个称为"模板片断"的公共页面里面,其它页面可以引用这个 " ...
thymeleaf常用语法
常用标签语法:①th:text<span th:text="${name}">1</span>注释:如果${name}有值则将替换掉1的值,若无则为1 ②t ...
简述模板引擎、常见模板引擎以及Thymeleaf常用指令
模板引擎概念: 是为了解决用户界面(显示)与业务数据(内容)分离而产生的. 它可以生成特定格式的文档,常用的如格式如HTML.xml以及其他格式的文本格式. 场景使用理解:举个栗子---[开会] 在上 ...
[JAVAEE] Thymeleaf 基本语法:常用表达式
Thymeleaf 基本语法常用表达式变量表达式 ${ } 使用方法:th:xx = "${ }" 获取对象属性值给 th:xx . 后台代码: Student s=new S ...
Helm模板常用语法介绍与简单应用场景
Helm模板常用语法介绍与简单应用场景文章目录 Helm模板常用语法介绍与简单应用场景什么是Helm _help.tpl子模版应用场景预定义对象关于变量关键字及应用函数流程与控制什么 ...
Thymeleaf基础语法
Thymeleaf基础语法今天学习一下Thymeleaf的基础语法. 1-引入Thymeleaf 首先,将view层页面中的html标签进行修改,然后在View层页面文件的其它标签里使用th:*动态 ...
Thymeleaf的语法规则
目录标准变量表达式${} 介绍案例:标准变量表达式显示实体对象中的属性选择变量表达式*{} 介绍案例:选择变量表达式显示实体对象中的属性案例:选择变量表达式显示实体对象中的属性 URL表达式 ...
Spring Boot 系列（五）web开发-Thymeleaf、FreeMarker模板引擎
前面几篇介绍了返回json数据提供良好的RESTful api,下面我们介绍如何把处理完的数据渲染到页面上. Spring Boot 使用模板引擎 Spring Boot 推荐使用Thymeleaf. ...
SpringBoot中使用Thymeleaf常用功能（一）：表达式访问数据
环境搭建: 创建一个Maven项目,按照Maven项目的规范,在src/main/下新建一个名为resources的文件夹,并在下面新建static和templates文件夹. ① 修改pom.xm ...

Thymeleaf常用语法：模板片断

Thymeleaf常用语法：模板片断相关推荐

最新文章

热门文章