好长时间没有大改个人主页了，现在借着AI也终于是有机会把以前那丑不拉几的UI改掉了。

    这次基本上我自己只敲了不到 1% 的代码，就完成了站点的焕然一新,我负责哐哐提需求报bug，AI只管解决就是了，他在副屏解决代码问题，我在主屏猛猛看番。感谢某国产AGENT软件每日免费额度！

我博客的历史

    既然是一次大的UI更新，那么先介绍一下老的设计，作为那版样式的最后纪念吧（尽管我还留有备份的说）。

    一切的一切始于2022年3月28日，14:24。那时候开始正式的构思整个博客系统。起初也想着去用一些开源的框架，比如说那时候大名鼎鼎的 WordPress。不过鉴于自己的技术和博客更改自由度的考虑，还是毅然决然地选择了从零到一的手工搭建，理想是美好的，现实残酷的，因为那时候虽然已经学会了前端的 Vue 和后端的 Spring Boot，在熟练度和设计思想上，却还相差甚远，导致整个博客设计过程中会遇到各种各样的小问题（参考博客早期的建站文章），尽管都一一解决了。如果重来一次的话，如果让我回到那个时间点，我可能会选择某个主流的开源框架直接搭建。但是，话虽如此，如今 AI 的发展让我逐渐对手搓博客，有了更大的信心，因为自己最薄弱的 UI 设计短板被弥补了。

    下面是当初设计博客时，各种奇思妙想。在设计整个博客之前，参考了各种各样的其他人的博客设计样式。最终，融合了各个博客的特点和自己的想法，做出了饱含自己特色的版本。

https://1drv.ms/o/c/3530c0b964d178f0/IgDweNFkucAwIIA1PwQAAAAAAXyt_ICcMCfGWwVITJtJ8nk?e=6fzR5U

    整个博客从2022年到现在，一共换了三台服务器，一直在平稳的运行着，在数据上的重视程度，远远大于博客的设计，比如，每天都会备份一下数据库数据，代码多云仓推送，图片不仅在图床上存储，每天还会定时从图床上下载备份到服务器本地，事实证明，这一切是值得的，毕竟，这记录的是自己人生中的点点滴滴，网站坏了无所谓，数据不能丢！

    在上一个大版本中，整个 UI 都是偏卡片式的极简风，并不是因为我喜欢这样，而是因为我竭尽全力只能设计成这样，就算绞尽脑汁把各个模块设计成不同的样式，都已经费了我九牛二虎之力了。

    如果不记得我之前的页面长啥样了（没有使用AI的版本），可以参考我之前录制的视频(音量有点大，注意调小)。

    整个后端的设计其实是非常简单的，并没有我一开始想象的那么复杂。相比于企业内部真实的业务场景，这种博客的后端其实只是简单的增删改查CRUD而已，在数据量起来之前，甚至连索引都不需要加，都能够很快的访问。稍微加点一二级缓存，Redis 缓存，浏览器缓存，就能够让访问速度得到质的飞跃。也得益于当初选择的是 Java 这个跨平台语言，在我第二次服务器的切换，也就是 Windows 系统和 Linux 的系统的切换之间，基本没有任何的代价，稍微改了一下斜杠和反斜杠的写法，将一些配置路径改成了 Linux 系统下的路径，就顺利跑成功了。

新UI,新体验！

    在我使用 AI 更换博客主题之前，我从来不敢想象，能变成今天的这个模样。动画是如此的好看，卡片是如此的赏心悦目。

    首先就是这个表情包系统，原本想要嵌入在我自己的富文本编辑器、评论区，因为各个框架组件之间的不兼容性，导致设计样式非常麻烦，经常会因为各个情况显示的乱成一片。如果是我自己设计，那么我不仅要考虑到，PC 端，还要考虑到手机端；嵌入到副文本编辑器中，还需要阅读富文本编辑器的一些源码，去扩充一些插件（虽然说已经尝试过扩充了一个黑条，并且顺利成功了）。如今，我只和 AI 简单的聊了我的需求，他便开始去阅读我的富文本编辑器的源码、使用说明，以及我当前这个网站设计的文档，三下五除二的，便设计出了这样一个兼容性良好的表情包系统，当然，这个表情包系列的原图是我阿叶Ayeez这dump下来到自己图床上的www。

    接着是评论模块，因为动态页面的评论、博客页面的评论和友链页面的评论需求各不一样。所以，都需要在一定共性的基础上，有一些特性。如果是自己设计，哼哧哼哧，可能需要大半天。而 AI 只需要简单的吃一点 tokens，便帮我解决了。

    相册页面的效果展示，以及上下张图片的切换，都是使用 AI 解决的。

    之前友链页依托于 bug 才显示正常，导致友链页一直不敢修改样式。如今也可以大大方方的修改样式了，而不影响整个主题框架。

    之前的番剧页面（左图）更是没法看，现在的设计（右图）总是让我想要多停留几分钟观摩一下自己曾看过的各个番剧。

    所以，有时候一个博客的主题，不仅仅是对外的一种知识、生活分享，更会影响到自己看回看博客、写新文章的兴趣。

本次建站的BUG修复与优化

    说了那么多虚的，来点实际的改良点分享。

埋点异步执行

    之前的埋点接口都是同步执行的，必须等到后端写入库了这个埋点，才放掉这个连接。然而，仔细想了想，如果埋点失败了几个，其实也无所谓，只不过是在个人的展示上面可能略微的有点差异，比如说某篇博客少了一点浏览量而已，更何况，现在的数据量基本上也不会出现这种失败的情况。所以，所有的买点接口，全部都直接异步响应，前端快速的结束掉连接。

    虽然实际测下来，并没有一点快www

    本来把打算把博客啊、动态啊、日常番剧、友链等等的链接接口全部做 Redis 缓存，不过，看着这寥寥无几的访问量，还是暂且搁置了，先不增加代码逻辑的复杂度了。

    /* 埋点自增走异步线程池：接口立即返回，Redis 慢/重试时不再占住请求线程
       （HTTP/1.1 同域并发连接有限，埋点挂住会拖累页面数据请求）。
       池满时 CallerRunsPolicy 退化回调用线程执行，计数不丢失。 */
    @Async("asyncThreadPoolTaskExecutor")
    @Override
    public void increaseBlogVisit() {
        redisTemplate.opsForValue().increment("vBlog");
    }

编辑器添新表情包

    之前的富文本编辑器，表情包只添加了几个，。都是一些非常大的表情，，一个表情占四行文字，岂可休？可供选择的表情更多了，想要传达的感情，也更加的活灵活现了。

    当然，这主要归功于 AI。不然这个插件展示样式的兼容性，太难写了！

头像展示更可靠

    众所周知，Gravator 是国际上的一个头像网站，但是，在国内的访问不一定可靠。

    所以，我一开始选择的是 Cravator，它主要采用的是这个邮箱账号的头像。不过，渐渐的发现，貌似也不是很可靠。有的邮箱它并不能够正确的展示它的头像，但是在 Gravatar 中却能展示。所以还需要一个 Gravatar 的国内镜像站，即gravatar.loli.net 。但是这个镜像站有着比较长的缓存，有时候头像没加载出来404，会显示成默认的头像，并且还会缓存一段时间，这导致体验非常的糟糕。

    故而，最终采用的方案是：先使用 Cravator 加载头像，并且如果说没找到头像，那么以 404 返回，如果图片返回404，则重新加载镜像站的头像。这样，要不然是 Cravator 能够加载头像，要不然就是镜像站的头像。

cn.cravatar.com/avatar/[hash]?d=404
  ||
\ || /
  \/
gravatar.loli.net/avatar/[hash]

动态回复跳转更明确

    因为动态页面是从上至下的懒加载,原本只是一些简单的卡片陈列，附加了一个评论功能而已。

    如果一个用户对于一个很久以前的动态进行了评论，原先邮件里的快速跳转链接只是默认的跳转到动态页，不会跳转到具体回复的那一条动态。这就导致，根本不知道访客回复的是什么时候的动态了，如果要对他的回复进行回复，更不知道要懒加载多少页才能加载出来。

    所以让 AI 帮我进行了个设计，但是，一开始 AI 的设计竟然是不断的懒加载到特定的动态为止，这明显是不合理的，不仅会占用大量的无效的网络资源请求，还会导致页面越来越卡顿。

    重新设计了一下动态的页面，新增了一个子路由，可以访问到特定的一个动态，这样，如果是从邮件跳转的，那么可以直接跳转到这个子路由中，即只展示特定的被回复的动态，而非展示这个懒加载页面。

恢复音乐模块

    音乐模块一直用的是 APlayer 加 MetingJS，但是近日，貌似这个 MetingJS 的接口一直失联，所以让 AI 帮我重新找了一个接口。

api="https://api.injahow.cn/meting/?server=:server&type=:type&id=:id&r=:r"

    更换了接口之后，就顺利的能重新连上网易云音乐了。

优化番剧页面

    因为近日的疯狂追番，使得正在看、待看和未看列表空前增长。每次加载番剧页面时，会去下载大量的bangumi封面，使得页面些许抽搐卡顿。

    所以现在只展示正在看的番剧的封面图。其他类别的，则按需加载，并且五颜六色的，表示各个不同的类别。侧边栏，除了添加了我的评分筛选外，还添加了一个指引，引导访客，可以将鼠标悬停在番剧条目上，查看未显示的番剧封面。访客能不能看到这个引导另说。

滚动条糖果样式

    让AI模仿 Krryblog 的滚动条，做了一个糖果滚动条，这样在滚动阅读时候更加带感。

    这里就不截图了，看看右边滚动条就知道效果了。

邮局变更

    之前一直用的一个公益的邮局发送通知邮件，但是，最近发现经常会吞邮件。来到邮箱源头，才发现是共享了一个上游源。导致发送邮件频频被阻。所以，换回了 QQ 邮箱的 SMTP 服务。现在的邮箱通知基本恢复正常。

未来可能会做什么？

    其实网站从一年前就基本稳定了，现在让 UI 设计也更加的稳定了。后续基本上不会有什么太大的变化了，最多是一些修修改改。

    不过，如果说要一些构想，还是有不少的。下面列举出来一些我的构想。

1. 文章日历：可以查看每天写的动态博客，日常数量，放在一个日历的组件中。每有一条或一篇文章，就在该日期周围画一个点，不同颜色代表不同含义。悬停可以预览数量标题，点击可以到聚合页查看这天的博客日常动态。缓存整个日历数据结构，在 Redis。
2. 前端改成NUXT替代现有的 SSR 页面，减少维护量。
3. 博客是否需要通过互动来增加友链排名？（倾向于不用）
4. 博客 AI Agent 助手，可以询问这个助手，回答关于博客内部以及博客以外的各种内容。

结束。