thymleaf之fragment使用

最新推荐文章于 2023-11-30 16:46:24 发布
最新推荐文章于 2023-11-30 16:46:24 发布
阅读量2k 收藏 6
点赞数 3
分类专栏： springboot 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38568503/article/details/110087208
版权

fragment片段的意思，是thymleaf为了消除前端代码的重复性而设计出来的。
用法：

1.th:insert:保留自己的主标签，保留th:fragment的主标签。

将远处需要引入用的片段插入到当前的标签 内 ，如：

<div><th:insert>将远处整个片段插入到此div中，本div标签保留</div>

2.th:replace:不要自己的主标签，保留th:fragment的主标签。

将远处需要引入用的片段替换 当前的标签 ，如：

<div><th:replace>将远处需要引入用的片段替换掉 当前的标签（本div被替换掉）</div>

3.th:include:保留自己的主标签，不要th:fragment的主标签。（官方3.0后不推荐）

开发中的常用做法：
抽取公共的css
第一步：找一个页面引入最多的css,然后将整个head辅助出来。
第二步：在templates下新建一个html,名字随意，我这里叫_fragments.html。
定义片段：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="head(title)"><!--此处定义片段，head(title)这个是片段名字和参数-->
    <meta charset="UTF-8">
    <title th:replace="${title}">xxx</title><!--将head方法中传递的参数替换掉下面的${title}-->
    <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/components/icon.min.css'>

    <link href="css/semantic.min.css" th:href="@{/css/semantic.min.css}" rel="stylesheet" type="text/css">
    <!--这个从压缩包直接全部把相应的文件夹（themes,components）全部复制过来，修改一下依赖的路径，然后修改引用即可-->
    <link href="css/icon.min.css" th:href="@{/css/icon.min.css}" rel="stylesheet" type="text/css">

    <link href="css/typo.css" th:href="@{/css/typo.css}" rel="stylesheet" type="text/css"><!--字体样式-->
    <link href="css/animate.css" th:href="@{/css/animate.css}" rel="stylesheet" type="text/css"><!--动画样式-->
    <link href="css/tocbot.css" th:href="@{/css/tocbot.css}" rel="stylesheet" type="text/css"><!--生成目录样式-->
    <link href="css/my.css" th:href="@{/css/my.css}" rel="stylesheet" type="text/css">
</head>

</body>
</html>

引用片段：

<head th:replace="_fragments :: head(~{::title})"><!--将来此head中的title首页将替换掉片段中的参数（title）-->
    <meta charset="UTF-8">
    <title>首页</title>
</head>

然后js应用片段如下：同理找一个js引用最多的页面
定义片段：

<!--js  片段-->
<th:block th:fragment="script">
    <script src="js/jquery-3.5.1.min.js" th:src="@{/js/jquery-3.5.1.min.js}"></script>
    <script src="js/semantic.min.js" th:src="@{/js/semantic.min.js}"></script>
    <script src="js/tocbot.min.js" th:src="@{/js/tocbot.min.js}"></script><!--目录的js-->
    <script src="js/qrcode.min.js" th:src="@{/js/qrcode.min.js}"></script><!--二维码生成的js-->
</th:block>

在其他页面去引用：

<th:block th:replace="_fragments :: script"></th:block>

或者这样引用：

<!--/*/<th:block th:replace="_fragments :: script"></th:block>/*/-->

每个页面的footer和导航和此类似。
导航片段定义：

<!--导航-->
<!--自己定义的做外层的容器-->
<nav th:fragment="menu(n)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small"><!--给导航标签自定义样式m-padded-tb-mini，用于内边距缩小-->
    <div class="ui container"><!--ui容器-->
        <div class="ui inverted secondary stackable menu"><!--ui的菜单,secondary是中级的,适应手机的stackable堆积-->
            <!--以下都属于菜单menu下的条目，所以末尾都是item-->
            <h2 class="ui pink header item">Blog</h2><!--代表菜单里的每个条目-->
            <!--th:classappend="${n==1} ? 'active' "当menu(n)传过来的参数n==1时候，则增加class-->
            <a href="#" class="m-item item m-mobile-hide" th:classappend="${n==1} ? 'active' "><i class="home icon"></i>首页</a>
            <a href="#" class="m-item item m-mobile-hide" th:classappend="${n==2} ? 'active' "><i class="idea icon"></i>分类</a>
            <a href="#" class="m-item item m-mobile-hide" th:classappend="${n==3} ? 'active' "><i class="tags icon"></i>标签</a>
            <a href="#" class="m-item item m-mobile-hide" th:classappend="${n==4} ? 'active' "><i class="clone icon"></i>归档</a>
            <a href="#" class="m-item item m-mobile-hide" th:classappend="${n==5} ? 'active' "><i class="info icon"></i>关于我</a>
            <div class="middle  item m-mobile-hide">
                <div class="ui  icon input"><!--ui库中带图标的输入框框-->
                    <input type="text" placeholder="test">
                    <i class="home icon"></i>
                </div>
            </div>
            <!--靠右的搜索框-->
            <div class="right m-item  item m-mobile-hide "><!--靠右的一个div容器-->
                <div class="ui icon input"><!--内部带有图标的输入框-->
                    <input type="text" placeholder="搜索...">
                    <i class="search link icon"></i>
                </div>
            </div>
        </div>
    </div>
    <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
        <i class="sidebar icon"></i>
    </a>
</nav>

引用：

<nav th:replace="_fragments :: menu(1)" ></nav>

menu(1)：用于激活active的。_fragments.htm片段中使用th:classappend="${n==1} ? ‘active’ " 来根据参数选择激活当前哪个标签。footer类似，但是不用传参数。
footer引用实例：

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

附上完整的片段html:
下面展示 _fragments.html。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="head(title)"><!--此处定义片段-->
    <meta charset="UTF-8">
    <title th:replace="${title}">xxx</title><!--将head方法中传递的参数替换掉下面的${title}-->
    <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/components/icon.min.css'>

    <link href="css/semantic.min.css" th:href="@{/css/semantic.min.css}" rel="stylesheet" type="text/css">
    <!--这个从压缩包直接全部把相应的文件夹（themes,components）全部复制过来，修改一下依赖的路径，然后修改引用即可-->
    <link href="css/icon.min.css" th:href="@{/css/icon.min.css}" rel="stylesheet" type="text/css">

    <link href="css/typo.css" th:href="@{/css/typo.css}" rel="stylesheet" type="text/css"><!--字体样式-->
    <link href="css/animate.css" th:href="@{/css/animate.css}" rel="stylesheet" type="text/css"><!--动画样式-->
    <link href="css/tocbot.css" th:href="@{/css/tocbot.css}" rel="stylesheet" type="text/css"><!--生成目录样式-->
    <link href="css/my.css" th:href="@{/css/my.css}" rel="stylesheet" type="text/css">
</head>

<!--导航-->
<!--自己定义的做外层的容器-->
<nav th:fragment="menu(n)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small"><!--给导航标签自定义样式m-padded-tb-mini，用于内边距缩小-->
    <div class="ui container"><!--ui容器-->
        <div class="ui inverted secondary stackable menu"><!--ui的菜单,secondary是中级的,适应手机的stackable堆积-->
            <!--以下都属于菜单menu下的条目，所以末尾都是item-->
            <h2 class="ui pink header item">Blog</h2><!--代表菜单里的每个条目-->
            <!--th:classappend="${n==1} ? 'active' "当menu(n)传过来的参数n==1时候，则增加class-->
            <a href="#" class="m-item item m-mobile-hide" th:classappend="${n==1} ? 'active' "><i class="home icon"></i>首页</a>
            <a href="#" class="m-item item m-mobile-hide" th:classappend="${n==2} ? 'active' "><i class="idea icon"></i>分类</a>
            <a href="#" class="m-item item m-mobile-hide" th:classappend="${n==3} ? 'active' "><i class="tags icon"></i>标签</a>
            <a href="#" class="m-item item m-mobile-hide" th:classappend="${n==4} ? 'active' "><i class="clone icon"></i>归档</a>
            <a href="#" class="m-item item m-mobile-hide" th:classappend="${n==5} ? 'active' "><i class="info icon"></i>关于我</a>
            <div class="middle  item m-mobile-hide">
                <div class="ui  icon input"><!--ui库中带图标的输入框框-->
                    <input type="text" placeholder="test">
                    <i class="home icon"></i>
                </div>
            </div>
            <!--靠右的搜索框-->
            <div class="right m-item  item m-mobile-hide "><!--靠右的一个div容器-->
                <div class="ui icon input"><!--内部带有图标的输入框-->
                    <input type="text" placeholder="搜索...">
                    <i class="search link icon"></i>
                </div>
            </div>
        </div>
    </div>
    <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
        <i class="sidebar icon"></i>
    </a>
</nav>

<!--底部footer，确定研究对象是这个片段-->
<!--自己定义的做外层的容器-->
<footer th:fragment="footer" class="ui inverted vertical segment m-padded-tb-massive"><!--inverted反转的意思，segment片段的意思-->
    <div class="ui center aligned container"><!--将容器中的所有都center aligned 居中 对齐-->
        <!--grid网格布局，此ui分成了16份，bootstract12份-->
        <div class="ui inverted divided stackable grid"><!--反转  划分网格-->
            <div class="three wide column"><!--占了三列宽，里面放一个列表，列表里是div条目-->
                <div class="ui inverted link list">
                    <div class="item">
                        <img src="img/weixin.jpg" class="ui rounded image" style="width: 120px">

                    </div>

                </div>

            </div> <!--三个 宽 列-->
            <div class="three wide column">
                <h4 class="ui inverted header">最新博客</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">用户故事</a>
                    <a href="#" class="item">用户故事</a>
                    <a href="#" class="item">用户故事</a>
                    <a href="#" class="item">用户故事</a>
                </div>
            </div> <!--三个 宽 列-->
            <div class="three wide column">
                <h4 class="ui inverted header">联系我</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">Email:fan187@126.com</a>
                    <a href="#" class="item">QQ:541564201</a>

                </div>
            </div> <!--三个 宽 列-->
            <div class="seven wide column">
                <h4 class="ui  inverted header">MY  BLOG</h4>
                <p class="m-opacity-mini m-text-spaced">这是我的第一个博客网站，希望自己慢慢成长起来，希望自己能学到跟多的知识，希望跟上世界的发展，希望事业有成</p>
            </div> <!--三个 宽 列-->
        </div>
        <!--在容器内部设置一个水平的分割线-->
        <div class="ui inverted section divider"></div><!--section截面 分割线-->
        <p class="m-opacity-mini m-text-spaced">Copyright © 2016 - 2020 Made in China ,dev name fandongdong</p>
    </div>
</footer>

<!--js  片段-->
<th:block th:fragment="script">
    <script src="js/jquery-3.5.1.min.js" th:src="@{/js/jquery-3.5.1.min.js}"></script>
    <script src="js/semantic.min.js" th:src="@{/js/semantic.min.js}"></script>
    <script src="js/tocbot.min.js" th:src="@{/js/tocbot.min.js}"></script><!--目录的js-->
    <script src="js/qrcode.min.js" th:src="@{/js/qrcode.min.js}"></script><!--二维码生成的js-->
</th:block>


</body>
</html>

注意：页面的其他图片引用不需要被themleaf去接管。可以正常使用。我们只需要把css,js用th：去接管即可。

这个名字先用着
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
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 ...
5）Thymeleaf 模板布局 th:fragment、th:replace、th:insert、th:remove
热门推荐
蚩尤后裔-汪茂雄
12-03 4万+
目录 th:fragment 模板布局 模板片段说明 ⽚段表达式语法 th:insert 与 th:replace 区别 参数化片段签名 编码示例 commons.html 公共模板 user/home.html 引入模板片段 运行效果 th:remove 删除模版片段 th:fragment 模板布局 模板片段说明 模板中，经常希望从其他模板中包含⼀些部...
thymeleaf中的fragment使用
jonathan的专栏
10-23 2万+
fragment介绍fragment类似于JSP的tag，在html中文件中，可以将多个地方出现的元素块用fragment包起来使用。fragment使用定义fragment所有的fragment可以写在一个文件里面，也可以单独存在，例如<footer th:fragment="copy"> the content of footer </footer> fragment的引用 th:i
thymeleaf
全栈者也的博客
04-25 3710
Springboot默认是不支持JSP的，默认使用thymeleaf模板引擎 模板（template fragments） 日常开发中，我们经常会将导航栏，页尾，菜单等部分提取成模板供其它页面使用。 在Thymeleaf 中，我们可以使用th:fragment属性来定义一个模板。 <!DOCTYPE html> <html xmlns:th="http:...
SpringBoot系列教材 （三十）- Thymeleaf - thymeleaf 如何通过 fragment 包含另一个文件举例
Lan_ht的博客
11-30 459
把你自己做的项目文件夹，和我的可运行项目文件夹进行比较。在页面底部可以看到如图所示的版权信息，这个版权信息就是包含另一个页面的内容而来的。的可运行项目，配置运行起来，确认可用之后，再学习做了哪些步骤以达到这样的效果。在确保可运行项目能够正确无误地运行之后，再严格照着教程的步骤，对代码模仿一遍。th:replace ：不要自己的主标签，保留th:fragment的主标签。th:insert ：保留自己的主标签，保留th:fragment的主标签。，可以较为明显地提升学习速度，跨过学习路上的各个槛。
如何在Thymeleaf 模板中使用片段Fragments
allway2的博客
10-19 1100
表示可包含在其他模板中的模板片段的片段。它可以是页眉，菜单，页脚和文档的任何其他部分，通常在许多页面上重复。片段可以参数化并包含在特定的初始参数中。在本文中，我们已经展示了百里叶中的模板布局机制是多么灵活。我们还可以将常用的逻辑分离到一个片段中，并将其附加到许多模板中。要使用参数化片段，我们需要提供一个片段名称和声明的参数列表。片段可以隔离在单独的文件中（我们建议使用此方法），也可以在任何其他模板中定义。在下面的示例中，我们定义了一个负责在 HTML 表中显示单个联系人行的片段。
Thymeleaf 模板布局 th:fragment、th:replace、th:insert、th:remove
qq_34357018的博客
11-19 2677
目录 th:fragment 模板布局 模板片段说明 1、模板中，经常希望从其他模板中包含⼀些部分，如⻚眉，⻚脚，公共菜单等部分，为了做到这⼀点，Thymeleaf 可以使⽤th:fragment 属性来定义被包含的模版⽚段，以供其他模版包含。 如下所示定义模板片段： <divth:fragment="copy"> &copy; 2011 The Good Thymes Virtual Grocery </div> 2、上⾯的代码定义了⼀...
thymeleaf th fragment高级应用 – Pure nonsense.rar
06-10
2. **条件和循环**：在Fragment中可以使用Thymeleaf的条件语句（如`th:if`, `th:unless`）和循环语句（如`th:each`），根据传入的数据动态生成HTML结构。 3. **模板布局**：Thymeleaf的Fragment可以用于构建复杂的...
thymeleaf的使用
01-27
11. **模板布局**：使用`th:fragment`定义可复用的模板部分，如定义页眉和页脚，然后在其他页面中引用。 12. **表达式基本对象**：`param`、`session`、`application`、`request`和`servletContext`，可以访问请求...
thymeleaf材料
最新发布
01-19
4. **高级特性**：可能涵盖了Thymeleaf的高级功能，如国际化（i18n）、模板片段重用（fragment）、条件逻辑的复杂运用、以及如何利用Thymeleaf的API进行模板预处理等。 5. **最佳实践**：这部分可能提供了一些使用...
thymeleaf-3.0.5中文文档
11-07
Thymeleaf是一款强大的Java模板引擎，常用于Web应用程序中的视图层处理，与Spring框架配合使用尤为广泛。Thymeleaf 3.0.5是该引擎的一个稳定版本，提供了许多增强的功能和优化，使得开发者能够更加高效地编写模板。...
Thymeleaf th:fragment局部刷新
菜鸟记录
11-10 1385
⏹Thymeleaf th:fragment局部刷新
SpringBoot 利用 th:fragment 实现代码复用
weixin_44627672的博客
02-16 1799
定义和引用模板片段 在多数项目中，我们经常会写很多重复代码，如导航栏、侧边栏等，为实现代码复用，Thymeleaf 需要我们定义这些部分“⽚段”（相当于抽取出来）以供其他模版包含，可以使⽤th:fragment属性来定义被包含的模版⽚段。 示例如下： 将待重用的代码单独放入html文件中；（不放也可以，目的是方便日后区分）； 这里单独放入commons文件夹下： 将待重用代码中加入 th:fragment:“name”,导入thymleaf引擎； thymleaf引擎： <!DOCTYPE ht
Thymeleaf 常用的 th 属性
qq_71695227的博客
05-11 1933
html有的属性，Thymeleaf基本都有，而常用的属性大概有七八个。其中th属性执行的优先级从1~8，数字越低优先级越高。th:text , th:value , th:each , th:if , th:insert , th:fragment , th:object , th:attr
Thymeleaf 模板的使用
Voyager-Lc
03-27 351
Thymeleaf是现代化服务器端的Java模板引擎，不同与JSP和FreeMarker，Thymeleaf的语法更加接近HTML，并且也有不错的扩展性。详细资料可以浏览官网。本文主要介绍Thymeleaf模板的使用说明。 定义和引用模板: 日常开发中，我们经常会将导航栏，页尾，菜单等部分提取成模板供其它页面使用。 在Thymeleaf 中，我们可以使用th:fragment属性来定义一个模板。 ...
[Thymeleaf] th:fragment局部刷新具体代码实现
HelloWorld, GraspWorld!
06-20 918
th:fragment局部刷新具体代码实现
thymeleaf学习之fragment
myl_0808的博客
03-03 324
title: thymeleaf学习 date: 2019-11-22 原本在个人博客上写了一些博文，现转移到CSDN上 thymeleaf学习之fragment 在上一篇博客中，简单的介绍了一些thymeleaf的使用，包括thymeleaf如何利用modelandview确定view的名字以及如何给model加值。并利用确定好的model以及view在前台绑定与渲染数据。本篇博客将介绍如何利...
thymeleaf中片段（fragment）使用调用页内容
左直拳的马桶_日用桶
01-14 1880
我终于知道在thymeleaf中，一个公用片段，如何使用调用它的页面上的内容了。 将页面上一些公用、独立的东西制作成片段，然后供其他页面按需要、层次式地引用，一般来说，已经满足大部分的需求。 但是有些还不够。比如想做一些容器类的片段：这个片段是一个容器，它只有外层一些东西是公用的，里面的内容，可能对于不同的页面，就是不同的，如图所示： 对于这个容器来说，如何将调用页面上的个性化内容放到它里面去呢...
thymeleaf fragment传值问题
09-15
对于Thymeleaf中的fragment传值问题，可以使用Thymeleaf的内置语法来传递值。在使用th:replace指令时，可以通过指定参数来传递值，例如： ``` (active='emps')" > ``` 在这个例子中，active参数被设置为'emps'，...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值