在thymeleaf中引入网页碎片

最新推荐文章于 2023-04-08 15:41:03 发布

youngcave2

最新推荐文章于 2023-04-08 15:41:03 发布

阅读量463

点赞数

分类专栏： springboot 文章标签： springboot thymeleaf

本文链接：https://blog.csdn.net/yougcave/article/details/121500414

版权

springboot 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、文件头引入thymeleaf

thymeleaf文件都要放在springboot的templates目录下

每个文件的头部都要引入网址，注意th不要漏掉

<html lang="en" xmlns:th="http://www.thymeleaf.org">

二、子网页

使用th:fragment标签

th:fragment="fragment1"

完整页面-头部 header.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>header</title>
</head>
<body>
    <div style="background: cadetblue" th:fragment="fragment1">thymeleaf头部</div>
</body>
</html>

完整页面-尾部 footer.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>header</title>
</head>
<body>
    <div th:fragment="fragment2">时间：2021/11/23</div>
</body>
</html>

三、主网页

引入的时候使用th:fragment，属性里要写：子页面名::定义的名字

th:include="header::fragment1"

完整页面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div align="center" th:include="header::fragment1"></div>
    <div align="center">
        $$$$$$$$$$$$
        $$$$$$$$$$$$
    </div>
    <div align="center" th:include="footer::fragment2"></div>
</body>
</html>

四、目录关系

五、控制类

templates下面的文件是不能直接访问的，所以要加一个控制器

PathController

@Controller
@RequestMapping("/books")
public class PathController {

    @RequestMapping("/xx.html")
    public String a(){
        return "xx";
    }

}

启动项目后在浏览器上输入 http://www.localhost:8080/books/xx.html

六、显示效果

内部都能引入，但是子网页的样式没有引入进来，使用的是主网页的样式

七、使用子网页的样式

只需要把 th:include 换成th:replace ，会使用子网页的样式代替掉主网页的样式

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div align="center" th:replace="header::fragment1"></div>
    <div align="center">
        $$$$$$$$$$$$
        $$$$$$$$$$$$
    </div>
    <div align="center" th:include="footer::fragment2"></div>
</body>
</html>

八、显示效果

子网页的“背景”出来了，主网页的“居中”不见了

youngcave2

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
在thymeleaf中引入网页碎片

头文件：xmlns:th="http://www.thymeleaf.org" 引入：th:fragment="fragment1" 使用：th:include="header::fragment1"
复制链接

扫一扫