thymleaf之fragment使用

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
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值