SpringBoot搭建个人博客系统项目4：使用thymeleaf抽取页面的公共片段

最新推荐文章于 2021-10-20 16:23:10 发布
最新推荐文章于 2021-10-20 16:23:10 发布
阅读量1.4k 收藏 2
点赞数
分类专栏： 项目 文章标签： java thymeleaf 博客系统 SpringBoot
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44547562/article/details/107784095
版权

文章目录

thymeleaf简单使用

thymeleaf是SpringBoot默认集成的模板引擎

表达式

${...}: 变量表达式。
*{...} : 选择表达式。
#{...} : 消息 (i18n) 表达式。
@{...} : 链接 (URL) 表达式。
~{...} : 片段表达式。

使用thymeleaf抽取公共片段

使用th:fragment="xx"来抽取某个页面的片段

<div th:fragment="copy">

</div>

使用th:insert="~{page::xx}"来引入从page中抽取的片段

<div th:insert="~{dashboard::copy}">

</div>

此时抽取部分被包含在一个div中。有可能造成排版错乱

三种引入片段的属性
th:insert：将公共的片段整个插入指定元素中
th:replace：将声明引入的元素替换为公共片段（符合理想情况）
th:include：将被引入公共片段的内容插入到指定的元素中

如果使用th:insert属性引入则可以不用写~{}，例如th:insert="dashboard::copy"
而行内写法则必须加上~{}：[[~{}]]、[(~{})]

还可以不使用th:fragment抽取公共部分，在引入的页面中使用th:replace="~{template::#selector}"即可

在博客系统中抽取公共片段

以首页为例，其它页面用法稍有不同。

新建一个admin_fragments.html，存放admin文件夹中页面的公共部分；
新建一个fragments.html页面，里面保存公共片段。
将这两个文件统一放到templates下的commons文件夹下。

CSS样式

先将所有页面引入的css保存起来，在别的页面引入时，只需要传入参数改变页面的title属性即可。
fragments.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="head(title)">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>[[${title}]]</title>
    <link rel="stylesheet" href="/css/me.css" th:href="@{/css/me.css}">
    <link rel="stylesheet" href="/css/typo.css" th:href="@{/css/typo.css}">
    <link rel="stylesheet" href="/lib/editormd/css/editormd.css" th:href="@{/lib/editormd/css/editormd.css}" />
    <link rel="stylesheet" href="/lib/tocbot/tocbot.css" th:href="@{/lib/tocbot/tocbot.css}">
    <link rel="stylesheet" href="/lib/prism/prism.css" th:href="@{/lib/prism/prism.css}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.css">
</head>
<body>
</body>
</html>

在首页传入titile的值为'首页'，则页面标题为"首页"，例如：
index.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragments::head('首页')"></head>
<body>
...
</body>
</html>

导航栏

大部分页面（除博客管理和写博客页面）的头部是一样的，只是active的地方不同而已。
fragments.html

<body>
<!-- 导航 -->
<nav th:fragment="menu(index)" class="ui inverted attached segment m-padding-tb-mini m-shadow-small" id="header">
    <div class="ui container m-container-large">
        <div class="ui inverted secondary stackable menu">
            <h2 class="ui teal header item m-header">Yonmin</h2>
            <a href="/" class="m-item item m-mobile-hide" th:classappend="${index=='首页'} ? 'active'"><i class="home icon"></i>首页</a>
            <a href="types" class="m-item item m-mobile-hide" th:classappend="${index=='分类'} ? 'active'"><i class="idea icon"></i>分类</a>
            <a href="tags" class="m-item item m-mobile-hide" th:classappend="${index=='标签'} ? 'active'"><i class="tags icon"></i>标签</a>
            <a href="archives" class="m-item item m-mobile-hide" th:classappend="${index=='归档'} ? 'active'"><i class="clone icon"></i>归档</a>
            <a href="about" class="m-item item m-mobile-hide" th:classappend="${index=='关于我'} ? 'active'"><i class="info icon"></i>关于我</a>
            <div class="right item m-item m-mobile-hide m-margin-tb-small">
                <div class="ui icon inverted transparent input">
                    <input type="text" placeholder="Search...">
                    <i class="search link icon"></i>
                </div>
            </div>
        </div>
    </div>
    <a href="#" class="ui button black icon m-top-right m-mobile-show show">
        <i class="sidebar icon"></i>
    </a>
</nav>

根据传入的index值选择在哪个元素的class中添加active，因此只需要在页面传入相应的值即可。
例如首页写<head th:replace="_fragments::head('首页')"></head>
分类页写<head th:replace="_fragments::head('分类')"></head>

index.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragments::head('首页')"></head>
<body>
<!-- 导航 -->
<div th:replace="_fragments::menu('首页')"></div>

...
<body>
</html>

底部 footer

底部footer除了博客管理页面（因为无用所以我将其删除了）和写博客页面外的所有页面都是一样的，只需要抽取后直接在页面内引入。
fragments.html

<!-- 底部footer -->
<footer th:fragment="footer" id="footer" class="ui inverted vertical segment m-padding-tb-massive">
    <div class="ui center aligned container m-container-large">
        <div class="ui grid stackable inverted divided">
            <div class="three wide column">
                <div class="ui inverted link list">
                    <div class="item">
                        <img src="images/wechat.jpg" class="ui rounded image" style="width: 110px">
                    </div>
                </div>
            </div>

            <div class="three wide column">
                <h4 class="ui inverted header m-opacity-mini">最新博客</h4>
                <div class="ui inverted link list">
                    <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 m-opacity-mini">联系我</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">Email：2@qq.com</a>
                    <a href="#" class="item">WeChat：YonminMa</a>
                    <a href="#" class="item">QQ：2</a>
                </div>
            </div>

            <div class="seven wide column">
                <h4 class="ui inverted header m-opacity-mini">Blog</h4>
                <p class="m-text-thin m-text-spaced m-opacity-mini">这是我的个人博客、分享关于编程、写作、思考相关的任何内容，希望可以给来这儿的人一点帮助。。。</p>
            </div>
        </div>
        <div class="ui inverted section divider"></div>
        <p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright © 2012-2020 Yonmin. All Rights Reserved.</p>
    </div>
</footer>

index.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragments::head('首页')"></head>
<body>

<!-- 导航 -->
<div th:replace="_fragments::menu('首页')"></div>

...

<!-- 底部footer -->
<div th:replace="_fragments::footer"></div>

...

</body>
</html>

admin_fragments.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="head(title)">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>[[${title}]]</title>
    <link rel="stylesheet" href="/css/me.css" th:href="@{/css/me.css}">
    <link rel="stylesheet" href="/css/typo.css" th:href="@{/css/typo.css}">
    <link rel="stylesheet" href="/lib/editormd/css/editormd.css" th:href="@{/lib/editormd/css/editormd.css}">
    <link rel="stylesheet" href="/lib/tocbot/tocbot.css" th:href="@{/lib/tocbot/tocbot.css}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.css">
</head>
<body>
<nav th:fragment="menu(index)" class="ui inverted attached segment m-padding-tb-mini m-shadow-small" id="header">
    <div class="ui container m-container-large">
        <div class="ui inverted secondary stackable menu">
            <h2 class="ui teal header item m-header">Yonmin</h2>
            <a href="#" class="m-item item m-mobile-hide" th:classappend="${index=='博客'} ? 'active'"><i class="home icon"></i>博客</a>
            <a href="#" class="m-item item m-mobile-hide" th:classappend="${index=='分类'} ? 'active'"><i class="idea icon"></i>分类</a>
            <a href="#" class="m-item item m-mobile-hide" th:classappend="${index=='标签'} ? 'active'"><i class="tags icon"></i>标签</a>
            <div class="right m-item m-mobile-hide menu">
                <div class="ui dropdown item">
                    <img src="https://tse4-mm.cn.bing.net/th/id/OIP.Ie53C-X76KBg5Yr5rf6JbgHaDe?w=318&h=164&c=7&o=5&pid=1.7" alt="" class="ui avatar image">
<!--                    <div>Yonmin</div>-->
<!--                    <i class="dropdown icon"></i>-->
                    <div class="menu">
                        <a href="/admin/logout" class="item">注销</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <a href="#" class="ui button black icon m-top-right m-mobile-show show">
        <i class="sidebar icon"></i>
    </a>
</nav>
</body>
</html>

对导航栏样式做了少许修改。
使用时用例如<div th:replace="commons/admin_fragments::menu('博客')"></div>引用。

引入的js资源也是可以抽取的，但是不多，我就没弄，有需要的朋友可以自己抽取一下。

此更新已提交至此项目的Github，欢迎star

YonminMa
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于SpringBoot搭建的开源个人博客系统，模板引擎使用thymeleaf。
12-28
基于SpringBoot搭建的开源个人博客系统，模板引擎使用thymeleaf。项目后台部分采用前后端分离模式开发。前台使用 vue 和 element完成。
SpringBoot 十二 Thymeleaf 语法 及 公共页面抽取
weixin_38628400的博客
08-15 584
6-10 Thymeleaf基本语法及公共页面抽取 理论 做公共抽取的原因（因为用的模板 导航栏什么的 每个页面都有 要改的话太麻烦必须每个页面都去改 所以要做抽取 这样只要改一个地方就可以全部都改了） 为什么要用Thymeleaf JSP和FreeMarker 需要配置发布 非常麻烦 Thymeleaf的语法更加接近HTML，很简单就能用 是Spring Boot官方推荐 用的文件 语法 Th语法 ： 1 th:fragment = xxxx 代表声明一个代码片段 名字叫xxxx th:fr
Spring boot里使用thymeleaf中怎么引入公共部分
qq_41948525的博客
05-24 648
1.使用 th:fragment=“copy” 来把工公共部分抽取处理 举个例子 header.html //假设这个body是你要的公共部分 <body th:fragment="copy"> </body> 2.thymeleaf中引入片段的基本方式 <div th:insert="你的header.html的路径:: copy"></div> <div th:replace="你的header.html的路径:: copy"></d
SpringBoot整合Thymeleaf提取公共页面
weixin_44541136的博客
05-29 753
在我们开发web项目的过程中，例如我们在编写HTML页面代码的时候，像典型的导航栏、侧边栏等部分，几乎都是重复的代码。在这之前我们一般都是使用页面嵌套等方式，把这些多余的页面代码去重复，最近接触到很多前后端代码分离开发的技术（Vue，Thymeleaf等），那么今天就简单分享一下学习到的Springboot整合了Thymeleaf模板后提取页面公共代码。 下面这两部分折叠的代码段就是上图红色框里面的顶部和侧边栏。 首先在templates目录下创建一个页面把上面两段代码放置进去，单独抽取出来..
Spring Boot Email 发送邮件、POP3/IMAP/SMTP 服务协议
蚩尤后裔-汪茂雄
08-03 2228
3、如果 spring.mail.host 和相关的库（spring-boot-starter-mail）可用，则会创建一个默认的JavaMailSender（如果不存在）。有关详细信息，请参阅。1、系统中使用电子邮件仍然是重要的沟通工具之一，在使用 Spring Boot 框架开发应用程序时，有时需要集成邮件发送功能，以便在用户注册、找回密码、接收通知等场景中向用户发送邮件。为其提供了自动配置(spring.mail.*)以及启动模块(spring-boot-starter-mail)。
SpringBoot----thymeleaf的公共部分的抽取31
weixin_39337047的博客
08-31 388
把页面的一些通用的部分单独拿出来，其他页面来引用，就如JSP里面的include 第一步：声明公共片段 <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <body> <div th:fragment="copy"> &a...
基于SpringBoot搭建的开源个人博客系统，模板引擎使用thymeleaf。项目后台部分采用前后端分离模式开发
最新发布
05-14
该项目利用了基于springboot + vue + mysql的开发模式框架实现的课设系统，包括了项目的源码资源、sql文件、相关指引文档等等。 【项目资源】：包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理...
SpringBoot和Thymeleaf搭建的个人博客项目
03-16
使用Spring Boot和Thymeleaf模板引擎，适合搭建个人博客，拿来即用，内含全套资源，包括sql建表文件。
基于SpringBoot搭建的开源个人博客系统，模板引擎使用thymeleaf。项目后台部分采用前后端分离模式开发。.zip
04-29
【博客个人资源】 包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、...
基于SpringBoot搭建的开源个人博客系统，模板引擎使用thymeleaf+源代码+文档说明
11-29
4. 运行`BlogApplication.java`，启动项目 5. 浏览器访问`http://127.0.0.1:8080/` > 使用 Idea，Eclipse 等IDE运行需要安装Lombok插件，JDK版本要求1.8+。 部署 ---- ### jar部署 配置好`application-prod.yml`...
Thymeleaf 语法总结
xss0905的博客
10-20 139
一、介绍 Thymeleaf是Spring boot推荐使用的模版引擎，直接以html显示，前后端可以很好的分离。 二、依赖与约束 依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> ...
Leaf：美团的分布式唯一ID方案深入剖析
每天叫醒自己的不是闹铃 是娟 是梦 是理想。
05-21 1546
简介 为什么叫leaf？因为天底下没有两片完全一样的树叶（德国哲学家、数学家莱布尼茨：There are no two identical leaves in the world），意味着每次通过leaf获取的ID肯定是唯一的。 首先，简单介绍一下如何使用leaf。 配置 leaf是基于springboot、以HTTP协议的方式提供获取分布式唯一ID的服务。总计有两种模式：Snowflake和Segment。我们通过它的核心配置文件leaf.properties可知： leaf.name=afei
springboot个人博客的构建（6） 分类管理(标签管理)
qq_40979622的博客
11-02 2607
标签管理和分类管理一样。 分类管理页面： 首先：建立HTML文件types.html 这个是分类列表的页面。  这个页面是由blog.html页面由来的，进行修改得到。 看源代码:这里用的模板引用，在admin/下面建立新的模板引擎。 先看模板引擎： &lt;!DOCTYPE html&gt; &lt;html lang="en" xmlns:th="http://www...
thymleaf之fragment使用
weixin_38568503的博客
11-24 2043
fragment片段的意思，是thymleaf为了消除前端代码的重复性而设计出来的。 用法： 1.th:insert:保留自己的主标签，保留th:fragment的主标签。 将远处需要引入用的片段插入到当前的标签 内 ，如： <div><th:insert>将远处整个片段插入到此div中，本div标签保留</div> 2.th:replace:不要自己的主标签，保留th:fragment的主标签。 将远处需要引入用的片段替换 当前的标签 ，如： <div>
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模板中的fragment公共片段无法替换
weixin_44571808的博客
06-08 534
一、使用Thymeleaf模板，为了不用每个页面都去更改，定义公共的片段，将其替换 Thymeleaf的引用 1、 th:insert:保留自己的主标签，保留th:fragment的主标签 2、 th:replace:不要自己的注标签，保留th:fragment的注标签 Thymeleaf模板中的fragment公共片段无法替换成功，在头部使用<head th:replace=”_fragments :: head(~{title})”>启动时显示500，去掉后启动是可以的,可样式是乱的 1、建
blog增删改查
winnie12581的博客
07-08 183
package com.zr.dao; import com.zr.po.Type; import org.springframework.data.jpa.repository.JpaRepository; public interface TypeDao extends JpaRepository<Type,Long> { } package com.zr.service; import com.zr.po.Type; import org.springframework.dat
python3抓取个人博客文章
开心就好的专栏
07-08 943
#!/usr/bin/python # -*- coding: UTF-8 -*- # 抓取csdn博客页面的所有文章 from urllib import request from bs4 import BeautifulSoup import json from selenium import webdriver import time def write2file(filename,...
使用springboot搭建一个个人博客系统
02-17
使用Spring Boot 搭建个人博客系统可以遵循以下步骤： 1. 首先，安装Java JDK和Spring Boot开发工具，如Eclipse或IntelliJ IDEA。 2. 创建一个新的Spring Boot项目，并配置相关依赖，如Spring Web、Thymeleaf、...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值