符合中小企业对网站设计、功能常规化式的企业展示型网站建设
本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...
商城网站建设因基本功能的需求不同费用上面也有很大的差别...
手机微信网站开发、微信官网、微信商城网站...
本篇内容主要讲解“Thymeleaf模板片断技术怎么使用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Thymeleaf模板片断技术怎么使用”吧!
成都创新互联公司2013年开创至今,先为利川等服务建站,利川等地企业,进行企业商务咨询服务。为利川企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
系统中的很多页面有很多公共内容,例如菜单、页脚等,这些公共内容可以提取放在一个称为“模板片断”的公共页面里面,其它页面可以引用这个 “模板片断”内容。
一、模板片断的定义
可以是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 frag2footer1footer2footer3 footer4
4、src/main/resources/templates/test.html
Title th:insert引用片断
引用指定模板的整个内容 引用指定模板的片断 引用本页面的片断frag3th:replace、th:include与th:insert的区别
片断选择器的部分用法
含有变量的片断引用
片断块引用
IDEA运行后,浏览器访问:http://localhost:8080,查看网页源代码,结果如下:
Title th:insert引用片断
引用指定模板的整个内容frag1 frag2引用指定模板的片断footer1footer2footer3 footer4hello,nullfrag1引用本页面的片断frag3frag3frag3th:replace、th:include与th:insert的区别
frag1frag1片断选择器的部分用法
footer1footer2footer3footer4footer3footer3footer4frag1含有变量的片断引用
hello,小明片断块引用
0 |
1 |
0 |
到此,相信大家对“Thymeleaf模板片断技术怎么使用”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!