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. bottle.py中的路由解析代码

    # Routing def compile_route(route): """ Compiles a route string and returns a precomp ...

  2. UML 类图口诀

    UML类图口诀: (10G:实线继承)空三角实线指向被继承, (虚实:虚线实现)空三角虚线指向被实现, (恐惧:空棱形聚合)空棱形实线(棱形)指向聚合整体.部分作为成员变量. (十足:实棱形组合)实棱 ...

  3. IIC时序和24C02读写字节时序

    一年前刚学51单片机时,接触到了IIC时序和用IIC通信读写AT24C02的学习历程.那时刚刚大一,对数据线时钟线等概念不是很清楚,也没有分清IIC通信的底层时序和写24c02的时序为什么不同. 借着 ...

  4. python笔记——随手记

    1.max与min函数的使用min(0)返回该矩阵中每一列的最小值 min(1)返回该矩阵中每一行的最小值 max(0)返回该矩阵中每一列的最大值 max(1)返回该矩阵中每一行的最大值2.argso ...

  5. sql server 字符串根据指定分隔符进行分组

    SET QUOTED_IDENTIFIER ON SET ANSI_NULLS ON GO --功能:分拆字符串 --参数:@String:要分拆的字符串:@Delimiter:分割符号 --返回值: ...

  6. jcifs windows 域账户单点登录（转）

    1.首先从http://jcifs.samba.org 这个站点下载 jcifs-1.3.2.jar包. 2.把这个包放到相应的lib文件下面. 3.对web.xml文件进行配置,添加如下内容 < ...

  7. python 异步发送邮件 aiosmtplib

    aiosmtplib is an asynchronous SMTP client for use with asyncio.文档地址 与 smtplib的用法大体相同 有几个地方需要注意下: 加密S ...

  8. Winscp无法连接linux虚拟机解决

    之前需要从主机传文件到虚拟机上,安装了vmware tools,拖拽文件后发现文件总是会损坏一些,查了一下,使用Winscp就不会出现这个问题. 安装好后配置连接:(Centos7) 打开虚拟机,找到 ...

  9. vue 基础: 组件

    2.局部组件: 动态组件:

  10. java 使用post 请求php接口

    遇到问题:php无法正常接收post参数,原因php只有当content-type为content-type为application/x-www-data-urlencoded和multipart/f ...