thymeleaf中的fragment使用

最新推荐文章于 2024-04-25 23:13:41 发布
最新推荐文章于 2024-04-25 23:13:41 发布
阅读量2.4w 收藏 41
点赞数 14
分类专栏： thymeleaf 文章标签： thymeleaf
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/whatlookingfor/article/details/78321451
版权

fragment介绍

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

fragment使用

定义fragment

所有的fragment可以写在一个文件里面，也可以单独存在，例如

<footer th:fragment="copy">  
   the content of footer 
</footer>

fragment的引用

  1. th:insert:保留自己的主标签，保留th:fragment的主标签。
  2. th:replace:不要自己的主标签，保留th:fragment的主标签。
  3. th:include:保留自己的主标签，不要th:fragment的主标签。（官方3.0后不推荐）
导入片段：
<div th:insert="footer :: copy"></div>  

<div th:replace="footer :: copy"></div>  

<div th:include="footer :: copy"></div>

结果为:
<div>  
    <footer>  
       the content of footer   
    </footer>    
</div>    

<footer>  
    the content of footer 
</footer>    

<div>  
    the content of footer 
</div>

在Springboot中，默认读取thymeleaf文件的路径是：src/main/resource/templates，静态文件为src/main/resource/static，这个默认值可以在配置文件中修改：spring.thymeleaf.prefix=classpath:/templates/

所有在调用fragment时，是默认从thymeleaf的根路径开始设置的：
例如
<head th:replace="/include/header::head" >
从读取templates/include/header.html中 fragment=head的代码块

fragment的参数设置

<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

定义(文件地址:include/header.html)：

<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" />  

<th:block th:replace="${links}" />  
<th:block th:replace="${scripts}" />  

</head>

调用：

<head th:include="include/header :: head(~{::title},~{::link},~{::script})">   
<title>html的title</title>  
<link rel="stylesheet" th:href="@{/css/bootstrap.css}">  
<script th:src="@{/js/bootstrap.js}"></script>  
</head>

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

<head th:include="include/header :: head(~{::title},~{},~{})">
jonathanzhan
关注
  • 14
    点赞
  • 踩
  • 41
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
thymeleaf-3.0.5中文文档
11-07
Thymeleaf是一款强大的Java模板引擎，常用于Web应用程序中的视图层处理，与Spring框架配合使用尤为广泛。Thymeleaf 3.0.5是该引擎的一个稳定版本，提供了许多增强的功能和优化，使得开发者能够更加高效地编写模板。...
thymeleaf中文和英文帮助文档
06-05
- 变量表达式：`[[...]]`用于输出变量，`${...}`用于在JavaScript中使用变量。 2. Thymeleaf上下文： - 模型上下文（Model Context）：包含了要渲染的数据，这些数据会被注入到模板中。 - 页面上下文（Page ...
thymeleaf学习之fragment
myl_0808的博客
03-03 323
title: thymeleaf学习 date: 2019-11-22 原本在个人博客上写了一些博文，现转移到CSDN上 thymeleaf学习之fragment 在上一篇博客中，简单的介绍了一些thymeleaf的使用，包括thymeleaf如何利用modelandview确定view的名字以及如何给model加值。并利用确定好的model以及view在前台绑定与渲染数据。本篇博客将介绍如何利...
thymleaf之fragment使用
weixin_38568503的博客
11-24 2058
fragment片段的意思，是thymleaf为了消除前端代码的重复性而设计出来的。 用法： 1.th:insert:保留自己的主标签，保留th:fragment的主标签。 将远处需要引入用的片段插入到当前的标签 内 ，如： <div><th:insert>将远处整个片段插入到此div中，本div标签保留</div> 2.th:replace:不要自己的主标签，保留th:fragment的主标签。 将远处需要引入用的片段替换 当前的标签 ，如： <div>
Thymeleaf中的th:replace,th:insert,th:include之间的区别
最新发布
gaoqiandr的博客
04-25 348
本文主要介绍的是Thymeleaf中的th:replace,th:insert,th:include之间的区别
Thymeleaf fragment
Feathers的个人笔记
03-06 118
fragment 类似jsp的tag，可以用于抽取重复代码模板，定义组件，并且可以朝fragment中传递参数，较为灵活。 参考原文：https://blog.csdn.net/believe__sss/article/details/79992408 定义模块， 在component目录下定义pagination.html 作为组件模板，用作公共代码抽取： <!-- th:fragment...
thymeleaf之fragment
pdw2009的专栏
10-01 3627
thymeleaf之fragment
Thymeleaf--:fragment
weixin_33725807的博客
10-12 107
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"&gt; &lt;body&gt; &lt;div th:fragment="crudmodal"&gt; //主要是这里 &lt;!-- modify modal --&gt
thymeleaf th fragment高级应用 – Pure nonsense.rar
06-10
2. **条件和循环**：在Fragment中可以使用Thymeleaf的条件语句（如`th:if`, `th:unless`）和循环语句（如`th:each`），根据传入的数据动态生成HTML结构。 3. **模板布局**：Thymeleaf的Fragment可以用于构建复杂的...
thymeleaf th fragment高级应用 – Pure nonsense
06-01
thymeleaf th fragment高级应用 – Pure nonsensethymeleaf th fragment高级应用 – Pure nonsensethymeleaf th fragment高级应用 – Pure nonsensethymeleaf th fragment高级应用 – Pure nonsensethymeleaf th ...
thymeleaf材料
01-19
5. **最佳实践**：这部分可能提供了一些使用Thymeleaf的最佳实践，如如何优化模板性能、如何避免模板中的复杂逻辑、以及如何设计易于维护的模板结构等。 学习Thymeleaf，不仅能够提升Web应用的用户体验，还能够使...
Thymeleaf通过fragment实现组件化
龙源IT 的博客
04-10 1924
在Thymeleaf中通过th:fragment将代码组件化，可以提高代码的复用，简化我们的开发。
thymeleaf中片段（fragment）使用调用页内容
左直拳的马桶_日用桶
01-14 1870
我终于知道在thymeleaf中，一个公用片段，如何使用调用它的页面上的内容了。 将页面上一些公用、独立的东西制作成片段，然后供其他页面按需要、层次式地引用，一般来说，已经满足大部分的需求。 但是有些还不够。比如想做一些容器类的片段：这个片段是一个容器，它只有外层一些东西是公用的，里面的内容，可能对于不同的页面，就是不同的，如图所示： 对于这个容器来说，如何将调用页面上的个性化内容放到它里面去呢...
Thymeleaf fragment使用
Tyrell
03-18 259
1.在 一个html文档的 一个标签里： th:fragment="myFragment" 2.在另一个 html里 引入： th:replace="/test::myFragment" //templates文件夹下 test.html 3. th:replace 会将加载它的容器标签去掉（在replace的文档里），将整个片段放到这里。 th:include 读取要进来的...
thymeleaf fragments可选参数
左直拳的马桶_日用桶
08-17 2003
spring boot的首荐页面模板引擎thymeleaf，其母版页的思想就是缝百衲衣，将可公用的东东做成一个个片段（fragment），然后在每个页面上加以引用，以达到复用的效果。 某页面 <body> <th:block th:include="_submenu::submenu(curicon=hi.png,marginleft=65)" /> …… </bod...
thymeleaf的fragment例子
weixin_30468137的博客
04-19 327
fragment介绍 fragment类似于JSP的tag，在html中文件中，可以将多个地方出现的元素块用fragment包起来使用。 定义fragment 新建foot.html文件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht...
thymeleaf中layout:fragment的使用和布局
热门推荐
sddaaa的博客
05-27 2万+
我是用的spring boot 直接的构建的  所有的都是HTML5方式使用的 注意版本和依赖thymeleaf中layout:fragment的使用layout.html是布局文件 就是最外面通用一个只要理解了谁引用了谁就好了=================decorator方式是整个布局文件替换 不是片段替换=================index.html引用layout.html后 ...
如何在Thymeleaf 模板中使用片段Fragments
allway2的博客
10-19 1081
表示可包含在其他模板中的模板片段的片段。它可以是页眉，菜单，页脚和文档的任何其他部分，通常在许多页面上重复。片段可以参数化并包含在特定的初始参数中。在本文中，我们已经展示了百里叶中的模板布局机制是多么灵活。我们还可以将常用的逻辑分离到一个片段中，并将其附加到许多模板中。要使用参数化片段，我们需要提供一个片段名称和声明的参数列表。片段可以隔离在单独的文件中（我们建议使用此方法），也可以在任何其他模板中定义。在下面的示例中，我们定义了一个负责在 HTML 表中显示单个联系人行的片段。
[JAVA EE] Thymeleaf 高级用法：模板布局，带参数的引用片段，表单验证，常用校验注解
Dust的博客
09-02 1041
模板布局 公共部分通常定义为模板布局：如页眉，页脚，公共导航栏、菜单等。 模板布局定义方法 布局页中用 th:fragment 定义模板片段，其他页面用 th:insert 引用片段 例如：footer.html，通过 th:fragment 定义一个模板片段 <footer th:fragment="copy"> … </footer> 其他页面通过 th:insert 引用片段： 标准形式： <div th:insert = "~{ footer :: copy
th:fragment的使用方法
05-26
在Android开发中，th:fragment是Thymeleaf模板引擎的一种特殊语法，用于实现页面片段的嵌套和引用。下面是th:fragment的使用方法： 1. 在模板中定义一个th:fragment，例如： ``` <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>模板页面</title> </head> <body> <div th:fragment="header"> <h1>页面头部</h1> </div> <div th:fragment="content"> <p>页面内容</p> </div> <div th:fragment="footer"> <p>页面底部</p> </div> </body> </html> ``` 2. 在其他模板中引用定义好的th:fragment，例如： ``` <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>引用模板页面</title> </head> <body> <div th:replace="~{template :: header}"></div> <div th:replace="~{template :: content}"></div> <div th:replace="~{template :: footer}"></div> </body> </html> ``` 这里使用了th:replace属性来引用定义好的th:fragment，其中“template”是模板名称，“header”、“content”、“footer”是定义好的th:fragment的名称。 注意：在定义和引用th:fragment时，需要使用“~{}”语法来指定模板的相对路径。例如，“~{template :: header}”表示引用当前模板所在目录下的“template.html”文件，并使用其中名称为“header”的th:fragment。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值