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生命周期的关系: 可以看到 ...

随机推荐

Testner测试圈关于页面响应时间的测试行业标准
Testner测试圈针对小程序页面的响应时间标准建议如下:0-2秒用户体验好,可以选择性改善,如首屏体验做到秒开等2-4秒用户体验一般,有改善空间4-6秒用户体验较差,有较大改善空间6秒以上用 ...
[转载] java多线程总结（二）
转载自:http://www.cnblogs.com/lwbqqyumidi/p/3817517.html 作者:Windstep 四.Java多线程的阻塞状态与线程控制上文已经提到Java阻塞的几 ...
python安装后环境变量的设置
win7系统中单击右击计算机->属性->高级系统设置->环境变量在path目录下用分号分开做分割添加环境变量. 如果同时添加python2.x.x版本和python3.x.x版本两 ...
周强 201771010141面向对象程序设计（java）》第十七周学习总结
线程同步多线程并发运行不确定性问题解决方案:引入线程同步机制,使得另一线程要使用该方法,就只能等待. ⚫ 在Java中解决多线程同步问题的方法有两种: 1.- Java SE 5.0中引入Ree ...
C#递归遍历窗体所有textbox控件并设置textbox事件的方法
/// <summary> /// /// </summary> /// <param name="sender"></param> ...
redis安装linux（二）
官网地址:http://redis.io/ redis的安装第一步:安装VMware,并且在VMware中安装centos系统(参考linux教程). 第二步:将redis的压缩包,上传到linux ...
python多个变量赋值
a, b = 3, 4 c, d = 3, 4 a, b = b, a + b c = d d = c + d print(a, b, c, d) 输出: 4 7 4 8 因为a, b和b, a + ...
MATLAB细节笔记
input函数 input('please input','s') 或者 input('please input').前者不管输入什么都会变成字符串,后者如果输入数字,那么matlab会识别成数字.如 ...
libnids校验和引起回放包不能正常捕捉
如题取消校验和校验即可: struct nids_chksum_ctl temp;temp.netaddr = 0;temp.mask = 0;temp.action = 1;nids_regist ...
eclipse中的项目为什么无法添加到tomcat中？
1.右键点击项目,选择properties 2.点击Project facets 3.在右侧的Runtimes中选中apache tomcat 4.勾选Dynamic Web Module 最终改为下 ...

thymeleaf的fragment例子

fragment介绍

定义fragment

fragment的引用

fragment的参数设置

fragment的lexible layouts

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

随机推荐

热门专题