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的引用

  1. th:insert:保留自己的主标签，保留th:fragment的主标签。
  2. th:replace:不要自己的主标签，保留th:fragment的主标签。
  3. 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例子的更多相关文章

  1. spring boot:thymeleaf给fragment传递参数的方法(spring boot 2.3.3)

    一,thymeleaf如何给fragment传递参数? 1,如果是全局的参数,可以用interceptor中传递 非全局参数,可以从controller中传递 2,引用片断时也可以传递参数 说明:刘宏 ...

  2. thymeleaf之fragment

    MUEAS项目,web前端采用thymeleaf作为展示层.这个view解析器,个人觉得非常不错.简单而且性能也比较好!个人觉得比JSP和freemarker之类,简单易用! 今天简单记录一下frag ...

  3. Thymeleaf+Spring整合

    前言 这个教程介绍了Thymeleaf与Spring框架的集成,特别是SpringMvc框架. 注意Thymeleaf支持同Spring框架的3.和4.版本的集成,但是这两个版本的支持是封装在thym ...

  4. thymeleaf 专题

    Thymeleaf 之 内置对象.定义变量.URL参数及标签自定义属性 如标题所述,这篇文章主要讲述Thymeleaf中的内置对象(list解析.日期格式化.数字格式化等).定义变量.获取URL的参数 ...

  5. spring+thymeleaf实现表单验证数据双向绑定

    前言 这个教程介绍了Thymeleaf与Spring框架的集成,特别是SpringMvc框架. 注意Thymeleaf支持同Spring框架的3.和4.版本的集成,但是这两个版本的支持是封装在thym ...

  6. Thymeleaf模板引擎+Spring整合使用方式的介绍

    尊重原创,原文地址为:https://www.cnblogs.com/jiangchao226/p/5937458.html 前言 这个教程介绍了Thymeleaf与Spring框架的集成,特别是Sp ...

  7. SPRING + THYMELEAF 配置

    1.使用的是Spring EL而不是Ognl.2.访问上下文的Bean用${@myBean.doSomething()}3.th:field,th:errors,th:errorclass用于form ...

  8. 33.Android之Fragment学习

    Fragment Android是在Android 3.0 (API level 11)开始引入Fragment的. 可以把Fragment想成Activity中的模块,这个模块有自己的布局,有自己的 ...

  9. Android之Fragment(碎片)方方面面

    Fragment简介碎片(Fragment)是一种可以嵌入到活动当中的UI片段,它能让程序更加合理和充分的利用大屏幕的空间. Fragment的生命周期 它与Activity生命周期的关系: 可以看到 ...

随机推荐

  1. 三星S8相机黑画面解决

    最近手机刷机卸载系统软件后有遇到相机黑化面不能工作的情况,同时闪光灯也无法开启,人脸识别也无法使用.具体情况如下图. 后来接上电脑打开logcat,发现相机相关的错误,说libquramresize. ...

  2. 微信小程序上传文件遇到的坑

    在开发小程序时,使用的花生壳做的内网映射,域名使用花生壳卖的https域名 在做小程序文件上传时,调用接口,老是报错. Caused by: org.apache.commons.fileupload ...

  3. winedt102安装

    http://www.xue51.com/soft/3171.html 安装是安装上了,还是用不了,提示系统找不到文件什么的.最后还是安装winedt7. 注意要配置,miktex,这个东西.wine ...

  4. Tajima's D

    Three ways to assess the nucleotide diversity (heterozygosity).The first is mean pairwise difference ...

  5. 并发编程心得--synchronized

    根据业务需求解决并完善并发问题-- IWMS仓库系统不考虑并发那么大的情况下,我想到的有2种并发解决方案. 1.在同时请求时,给需要操作的保存接口添加synchronized 同步方式,同步保存方法, ...

  6. Web 建站技术中，HTML、HTML5、XHTML、CSS、SQL、JavaScript、PHP、ASP.NET、Web Services 是什么（转）

    Web 建站技术中,HTML.HTML5.XHTML.CSS.SQL.JavaScript.PHP.ASP.NET.Web Services 是什么?修改 建站有很多技术,如 HTML.HTML5.X ...

  7. LeetCode 922. Sort Array By Parity II C++ 解题报告

    922. Sort Array By Parity II 题目描述 Given an array A of non-negative integers, half of the integers in ...

  8. Creation of SecureRandom instance for session ID generation using [SHA1PRNG] took [33,755] milliseconds.

    刚部署好程序,第一次登录时,加载非常得慢,查看log日志发现:Creation of SecureRandom instance for session ID generation using [SH ...

  9. hbase整合

    hbase與hive整合    1. hive中有數據 --> 創建hive管理表映射hbase    例如:        1)hive創建內部表            create tabl ...

  10. LVS-DR模式 SOP

    LVS DR SOP 1.1虚拟机地址信息LVS-DR模式DR1:172.31.0.29 DR2:172.31.0.28 RS1:172.31.0.25 RS2:172.31.0.26 lvs-cli ...