springboot中的HTML页面作为组件使用

最新推荐文章于 2025-02-28 00:15:00 发布

清幽子

最新推荐文章于 2025-02-28 00:15:00 发布

阅读量262

点赞数

分类专栏： springboot 文章标签： spring boot

本文链接：https://blog.youkuaiyun.com/qq_45489665/article/details/118695969

版权

springboot 专栏收录该内容

7 篇文章

订阅专栏

这篇博客介绍了如何利用Thymeleaf的th:fragment和th:replace属性进行组件复用。通过设置th:fragment定义可重用的HTML片段，然后在其他页面中使用th:replace或th:insert引用这些片段，实现页面组装。th:with用于在插入或替换时传递参数，增强了模板的灵活性和代码复用性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用Thymeleaf进行组件调用。
首先在想要作为组件的HTML中，头部在HTML标签中引入thymeleaf链接，在head标签中

使用到的标签是 th:fragment = “ id（ valueOne , valueTwo）”，在HTML文件中，将有可能多个地方出现的元素块，用 fragment 包裹起来

<!DOCTYPE html>
<html  xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
       xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
       
<head th:fragment="headerFragment(title,active)">

    ......
    
</head>
<body th:fragment="header-body">
    
       ......
       
</body>

在使用组件的HTML文件中，在使用的地方，用th:replace或者th:insert引入即可。
th:replace：保留自己的主标签，保留 th:fragment 的标签
th:insert：不要自己的主标签，保留 th:fragment 的标签

<html  lang="en" xmlns:th="http://www.thymeleaf.org" th:with="title='管理中心',active='home'">
<head>
    .....
</head>
<header th:replace="index::headerFragment(${title},${active})"></header>
<body>
    <div th:replace="index::header-body"></div>
    <div>
        
    </div>
</body>