thymeleaf模板html a标签,Thymeleaf常用语法：模板片断

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依赖

org.springframework.boot

spring-boot-starter-thymeleaf

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

frag1

frag2

4、src/main/resources/templates/test.html

Title

th:insert引用片断

引用指定模板的整个内容

引用指定模板的片断

引用本页面的片断

th:replace、th:include与th:insert的区别

片断选择器的部分用法

含有变量的片断引用

片断块引用

删除模板

IDEA运行后，浏览器访问：http://localhost:8080，查看网页源代码，结果如下：

Title

th:insert引用片断

引用指定模板的整个内容

引用指定模板的片断

引用本页面的片断

th:replace、th:include与th:insert的区别

frag1

片断选择器的部分用法

含有变量的片断引用

片断块引用

0

1

删除模板

0