基于 Spring Boot 博客系统开发（三）

呆萌很

已于 2024-04-28 16:41:26 修改

阅读量1.4k

点赞数 22

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

于 2024-04-23 13:03:16 首次发布

本文链接：https://blog.csdn.net/qq_29385297/article/details/138115801

版权

spring boot 专栏收录该内容

36 篇文章 8 订阅

订阅专栏

基于 Spring Boot 博客系统开发（三）

本系统是简易的个人博客系统开发，为了更加熟练地掌握 SprIng Boot 框架及相关技术的使用。🌿🌿🌿
基于 Spring Boot 博客系统开发（二）👈👈
基于 Spring Boot 博客系统开发（四）👈👈

thymeleaf 抽取公共页面

在Thymeleaf中，如果你想要抽取公共页面（例如，头部、底部、导航栏等），可以通过定义和使用片段（fragments）和包含（includes）来实现。

首页head部分的公共代码抽取成碎片，使用 thymeleaf 的标签 th:fragment 和 th:include
原代码

<head>
    <title>首页</title>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/>
    <meta name="renderer" content="webkit"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-transform"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="shortcut icon" href="./user/img/bloglogo.jpg"/>
    <link rel="apple-touch-icon" href="./user/img/apple-touch-icon.png"/>
    <link href="./user/css/xcode.min.css" rel="stylesheet"/>
    <link href="./user/css/style.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="./assets/css/amazeui.min.css"/>
    <link rel="stylesheet" href="./assets/css/app.css"/>
    <script src="./assets/js/jquery.min.js"></script>
    <script src="./assets/js/amazeui.min.js"></script>
    <!--[if lt IE 9]>
    <script src="/back/js/html5shiv.js"></script>
    <script src="/back/js/respond.min.js"></script>
    <![endif]-->
</head>

首先，在client目录下创建include.html文件，include.html 文件代码：

<div th:fragment="common-css" >
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/>
    <meta name="renderer" content="webkit"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-transform"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="shortcut icon" href="./user/img/bloglogo.jpg"/>
    <link rel="apple-touch-icon" href="./user/img/apple-touch-icon.png"/>
    <link href="./user/css/xcode.min.css" rel="stylesheet"/>
    <link href="./user/css/style.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="./assets/css/amazeui.min.css"/>
    <link rel="stylesheet" href="./assets/css/app.css"/>
</div>

<div th:fragment="common-js" >
    <script src="./assets/js/jquery.min.js"></script>
    <script src="./assets/js/amazeui.min.js"></script>
    <!--[if lt IE 9]>
    <script src="/back/js/html5shiv.js"></script>
    <script src="/back/js/respond.min.js"></script>
    <![endif]-->
</div>

然后，在你的主页面（比如index.html）中，使用Thymeleaf的th:include来复用这段代码。
整理后的代码：

<head>
    <title>首页</title>
    <th:block th:include="client/include :: common-css" />
    <th:block th:include="client/include :: common-js" />
</head>

将需要抽取的代码放到include fragment中，需要用到这些代码的地方使用th:include引用。

代码整理后效果

首页
在这里插入图片描述
文章详情页

呆萌很

关注

22
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
基于 Spring Boot 博客系统开发（三）

在Thymeleaf中，如果你想要抽取公共页面（例如，头部、底部、导航栏等），可以通过定义和使用片段（fragments）和包含（includes）来实现。首页head部分的公共代码抽取成碎片，使用 thymeleaf 的标签 th:fragment 和 th:include。然后，在你的主页面（比如index.html）中，使用Thymeleaf的th:include来复用这段代码。将需要抽取的代码放到include fragment中，需要用到这些代码的地方使用th:include引用。
复制链接

扫一扫

专栏目录