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. 连号区间数（2013年第四届c/c++ b组第10题）

    题目描述 标题:连号区间数 小明这些天一直在思考这样一个奇怪而有趣的问题: 在1~N的某个全排列中有多少个连号区间呢?这里所说的连号区间的定义是: 如果区间[L, R] 里的所有元素(即此排列的第L个 ...

  2. js循环出相同name，不同id的按钮，对其进行点击回复操作

    function getseat(){ var option= "<button class='btn'style='margin:5px;' onclick='onclickSeat ...

  3. soupUI基础使用方法

    SoapUI简介 文章出处:http://www.cnblogs.com/hong-fithing/ SoapUI是一个开源测试工具,通过soap/http来检查.调用.实现Web Service的功 ...

  4. 使用LSTM-RNN建立股票预测模型

    硕士毕业之前曾经对基于LSTM循环神经网络的股价预测方法进行过小小的研究,趁着最近工作不忙,把其中的一部分内容写下来做以记录. 此次股票价格预测模型仅根据股票的历史数据来建立,不考虑消息面对个股的影响 ...

  5. 刷新浏览器 protractor

    //refresh browser.ignoreSynchronization = true; browser.refresh(); browser.sleep(3000); browser.swit ...

  6. 实现在WebView中返回上一级

    代码 import React, {Component} from 'react'; import {Platform, View, WebView, BackHandler,Dimensions,S ...

  7. Linux环境下nginx集群搭建

    #确保安装nginx,stream模块默认不安装的,需要手动添加参数:–with-stream, nginx1.9或以上版本 #nginx.conf文件中,添加以下内容(只供参考),这个不能放在htt ...

  8. 自动删除Android工程中无用的资源

    开发时间久了, 几个版本迭代之后, 工程中难免留下很多垃圾资源, 造成apk的包很大, 这里介绍一个工具, 可以自动扫描工程中, 没有使用的资源, 然后自动删除: 包括图片, xml, 文本等. 采用 ...

  9. Ubuntu系统下Anaconda使用方法总结

    前言:个人认为Anaconda比pip使用起来要方便很多,因为它创建虚拟环境和下载各种库都很方便.但是有时候conda的安装方法中没有某些库,必须使用pip来进行安装.所以,主要用Anaconda,偶 ...

  10. Simple circos code

    According to the tutorials (http://circos.ca/documentation/tutorials/), to draw a graph using circos ...