thymeleaf的fragment例子

fragment介绍

fragment类似于JSP的tag，在html中文件中，可以将多个地方出现的元素块用fragment包起来使用。

定义fragment

新建foot.html文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<footer th:fragment="footDiv">
    the content of footer
</footer>
</html>

fragment的引用

th:insert:保留自己的主标签，保留th:fragment的主标签。
th:replace:不要自己的主标签，保留th:fragment的主标签。
th:include:保留自己的主标签，不要th:fragment的主标签。（官方3.0后不推荐）

新建test.html文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<!--导入片段-->
<div th:insert="footer :: footDiv"></div>
<div th:replace="footer :: footDiv"></div>
<div th:include="footer :: footDiv"></div>
</html>

得到的结果为

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<!--导入片段-->
<div><footer>
    the content of footer
</footer></div>
<footer>
    the content of footer
</footer>
<div>
    the content of footer
</div>
</html

fragment的参数设置

定义：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<div th:fragment="headDiv(showInfo)">
    the content of head!message:[(${showInfo})]
</div>
</html>

调用：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<!--导入片段-->
<div th:include="head :: headDiv('测试')"></div>
</html>

结果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<!--导入片段-->
<div>
    the content of head!message:测试
</div>
</html>

如果是多个参数的时候例子：

<div th:fragment="frag (onevar,twovar)">
    <p th:text="${onevar} + ' - ' + ${twovar}">...</p>
</div>
 
按参数定义时的顺序进行传递
<div th:replace="::frag (${value1},${value2})">...</div>
<div th:replace="::frag (onevar=${value1},twovar=${value2})">...</div>
可以不按照参数定义的顺序
<div th:replace="::frag (twovar=${value2},onevar=${value1})">...</div>

fragment的lexible layouts

定义：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="head(title,links,scripts)">
    <title th:replace="${title}">The awesome application</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link href="/static/css/test.css" rel="stylesheet">
    <script type="text/javascript" src="/static/js/jquery.js"></script>
    <th:block th:replace="${links}" />
    <th:block th:replace="${scripts}" />
</head>
</html>

使用：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="head :: head(~{::title},~{::link},~{::script})">
    <title>html的title</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}">
    <script th:src="@{/js/bootstrap.js}"></script>
</head>
</html>

结果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>html的title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link href="/static/css/test.css" rel="stylesheet">
    <script type="text/javascript" src="/static/js/jquery.js"></script>
    <link rel="stylesheet" href="/css/bootstrap.css">
    <script src="/js/bootstrap.js"></script>
</head>
</html>

注意是link 和script，不是links 和scripts
如果调用的页面没有link或者script ，则指定传入的参数为~{}即可。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="head :: head(~{::title},~{::link},~{})">
    <title>html的title</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}">
</head>
</html>

thymeleaf的fragment例子的更多相关文章

spring boot:thymeleaf给fragment传递参数的方法(spring boot 2.3.3)
一,thymeleaf如何给fragment传递参数? 1,如果是全局的参数,可以用interceptor中传递非全局参数,可以从controller中传递 2,引用片断时也可以传递参数说明:刘宏 ...
thymeleaf之fragment
MUEAS项目,web前端采用thymeleaf作为展示层.这个view解析器,个人觉得非常不错.简单而且性能也比较好!个人觉得比JSP和freemarker之类,简单易用! 今天简单记录一下frag ...
Thymeleaf+Spring整合
前言这个教程介绍了Thymeleaf与Spring框架的集成,特别是SpringMvc框架. 注意Thymeleaf支持同Spring框架的3.和4.版本的集成,但是这两个版本的支持是封装在thym ...
thymeleaf 专题
Thymeleaf 之内置对象.定义变量.URL参数及标签自定义属性如标题所述,这篇文章主要讲述Thymeleaf中的内置对象(list解析.日期格式化.数字格式化等).定义变量.获取URL的参数 ...
spring+thymeleaf实现表单验证数据双向绑定
前言这个教程介绍了Thymeleaf与Spring框架的集成,特别是SpringMvc框架. 注意Thymeleaf支持同Spring框架的3.和4.版本的集成,但是这两个版本的支持是封装在thym ...
Thymeleaf模板引擎+Spring整合使用方式的介绍
尊重原创,原文地址为:https://www.cnblogs.com/jiangchao226/p/5937458.html 前言这个教程介绍了Thymeleaf与Spring框架的集成,特别是Sp ...
SPRING + THYMELEAF 配置
1.使用的是Spring EL而不是Ognl.2.访问上下文的Bean用${@myBean.doSomething()}3.th:field,th:errors,th:errorclass用于form ...
33.Android之Fragment学习
Fragment Android是在Android 3.0 (API level 11)开始引入Fragment的. 可以把Fragment想成Activity中的模块,这个模块有自己的布局,有自己的 ...
Android之Fragment(碎片)方方面面
Fragment简介碎片(Fragment)是一种可以嵌入到活动当中的UI片段,它能让程序更加合理和充分的利用大屏幕的空间. Fragment的生命周期它与Activity生命周期的关系: 可以看到 ...

随机推荐

render函数（转）
https://blog.csdn.net/qq78827534/article/details/80792514
SQL Server DDL
1:向表中添加字段 Alter table [表名] add [列名] 类型 2: 删除字段 Alter table [表名] drop column [列名] 3: 修改表中字段类型 (可以修 ...
github仓库主页介绍、用git管理本地仓库和github仓库、搭建网站
github仓库主页介绍名词解释: 工作区: 添加.编辑.修改文件等动作暂存区: 暂存已经修改的文件,最后统一提交到git中 git(仓库): 最终确定的文件保存到仓库,成为一个新的版本,并且对他 ...
swagger2常用注解
常用注解: @Api()用于类: 表示标识这个类是swagger的资源 @ApiOperation()用于方法: 表示一个http请求的操作 @ApiParam()用于方法,参数,字段说明: 表示对参 ...
关于QQ屏蔽某些文件上传一些有意思的事
起因是因为某鱼事件... 资源倒是找了,可是因为TX的屏蔽文件上传.文件通过几次改名之后也没能上传成功(想想也没那么简单). 然后某神就写了上面那串代码实现上传.具体思想是:绕过文件摘要算法(hash ...
redis数据库可视化工具（RedisDesktopManager）
RedisDesktopManager下载地址:https://redisdesktop.com/download 使用过程中可能会遇到的问题我在文后有所总结我下载Windows版的: 我的redi ...
Sublime Text 3 package control 解决 "There are no packages available for installation" 错误
造成这个错误的原因估计是因为由于packagecontrol.io无法访问,所以导致无法读取“https://packagecontrol.io/channel_v3.json”文件的原因. 解决方法 ...
EmptyBeanUtil
package com.rscode.credits.util; import java.util.List; /** * * 判断实体是否为空 * @author tn * */ public cl ...
hbuilder中的wap2app （将M站快速转换成App的开发框架）使用过程有关原生标题的关闭
首先,我最近在做有关将M站快速转换成App的项目,在网上看了很多,最终结合同学的推荐,我选择了hbuilder,有关于hbuilder的下载还有具体使用方法,官网都有详细的说明,我就不介绍了,我重点介 ...
springboot+mybatis-puls利用swagger构建api文档
项目开发常采用前后端分离的方式.前后端通过API进行交互,在Swagger UI中,前后端人员能够直观预览并且测试API,方便前后端人员同步开发. 在SpringBoot中集成swagger,步骤如下 ...

thymeleaf的fragment例子

fragment介绍

定义fragment

fragment的引用

fragment的参数设置

fragment的lexible layouts

thymeleaf的fragment例子的更多相关文章

随机推荐

热门专题