StarBlog - 2023年底更新内容一览

前言

先说一下我对 StarBlog 这个系列的文章的规划吧，在 StarBlog 的 1.x 版本，我会同步更新两个系列的文章

• 博客前台+接口开发笔记 （即当前已发布的这一系列文章）
• 博客Vue后台开发笔记 （后续开始持续发布）

最近很久没有更新 StarBlog 系列的文章，事实上我之前已经把【博客Vue后台开发笔记】基本完成了，但我想把 StarBlog 1.x版本的功能完善之后，把【前台+接口开发笔记】这系列完成之后，再开始更新【vue后台开发笔记】

所以最近一段时间对本项目的后端、前端代码做了很多修改，包括性能优化、UI调整、功能完善等，本文做一个简单的记录。（当然优化和改进是无止境的，欢迎各位同学提交 issues 和 pr！）

前台UI调整

本次更新我对前台和后台的UI都做了一些调整，对用户来说，UI调整是感知程度最强的，所以放在第一个介绍。

文章列表

文章列表界面的调整包括右上角的文章排序选项和重新设计的文章列表。

旧的文章列表直接使用 Bootstrap4 样式的 Card，card-header 里放置文章的分类名称，然后 card-body 里是文章标题和梗概，丑是丑了点，但更主要的问题是没有文章发布时间等额外信息，查看起来不太直观。旧版UI如下图：

新的文章列表如图，右上角增加了文章排序，可以根据标题、发表时间、更新时间进行正序/倒序的排序。

文章列表里的元素也做了重新设计，加入了封面图、发表时间、阅读量等信息元素，细节方面，每个文章卡片我加入了一点点阴影效果，文章梗概的文字使用了小号字体与 text-muted 样式，更好地与标题区分开来。

导航栏

在前面的文章列表UI里，可以看到顶部的导航栏也换了，这个修改没法说比旧版更好，只能说为了自适应移动设备做出了一些妥协。原本的导航栏还有图标，有更丰富的视觉效果，但是对移动端的兼容比较有限，各个导航菜单没法隐藏到侧边栏里，会平铺占用大量空间；新版的就是普通的Bootstrap风格导航栏，平平无奇，但可以自适应得比较好。

自适应模式下的旧版导航栏

自适应模式下的新版导航栏

后台UI调整

管理后台是审美的重灾区

目前使用的这套管理后台，是基于我之前的一个 SpringCloud 项目的管理后台修改而来

因为历史问题，有一些比较奇怪和难看的样式，在这次更新中，我一并修改了

相比之前，现在的后台UI顺眼多了