这篇文章为原创文章 | 封面画师：冴島一茶
前言
历时13天，我的个人主页v1.4版本终于更新完毕其实更新时间可以更短一点的（笑），趁着这时刚更新完还有点印象，就干脆把它记录下来吧，毕竟所谓博客就是用来记录的啊。
关于更新
其实这次的更新应该被划到1.3版本的（2025年12月6日更新），但中途又迎来了博主的期末考试，无奈之下，更新的任务只能postpone了，到了寒假才能有空建设博客，不过1.3版本的更新内容也差不多了，把其余的更新内容划出来单独成立一个版本也没问题。
这次的更新更像是一次售后更新，相较于前3个版本的更新，这次的更新比较明显的就是让文章的内容更丰富了，增加了许多了短代码，但总的页面看不出有太多变化。更多的是对前3个版本的售后处理：优化了项目的结构，把文章内容和代码文件分离开来，这样在后续测试的时候修改文章内容或者修改代码都可以做到互不影响（短代码还是有的），将笔记软件接入博客，作为博客文章的文本编辑器这样就可以做到跨平台写文章了，而且还能控制文章的发布其实你现在看的这篇文章就是用笔记软件写的，就当是测试了（让我感到意外的是它对Markdown语法契合度还挺高，这样就不用担心语法问题了；删除了无用或多余的代码，把控制全局样式的custom.scss文件中的样式做一个分类，比如把控制短代码的样式再单独拿一个文件装起来，然后引入到custom.scss；修复了音乐播放器组件控件缺失的BUG，美化了回到顶部的样式……总之就是类似这样的售后工作。但这是相当于这个发布文章的主页来说，更新时间长其中一个很主要的原因就是又为博客写了一个主页，接下来我将以此为分界将更新纪事分为"建设主页"和"更新博客"来说明。
建设主页
由此访问，这个想法在1.3版本的时候就有了，契机是在逛萌国成员的主页时，偶然会刷到几个博主的博客是有主页的，而且有了主页以后，如果未来有其他与博客无关的其他页面时也可以做一个导航页来使用，但既然叫主页，那它一定要符合主页最基本的功能：指引和展示，于是设计时我从两个方面开始考虑：页面风格、页面功能。
页面风格
由于喜欢唯美风，再加上长期使用的浏览器起始页——青柠起始页（好用，强推！）的原因又参考了博主恋玲花的主页布局，于是博客的主页设计就这样产生了：
引用一些偏唯美画师的作品作为主页背景。
主要组件居中布局，从上到下依次为：主页的logo、主页名、欢迎标语、博客状态、随机的一言以及进入博客的按钮。
使用毛玻璃作为"进入主页"和博客状态信息的组件背景（还是很喜欢毛玻璃的设计）。
博客状态的呼吸灯效果。
页面功能
毕竟主页是用来展示的，所以一些必要的功能还是有的，而且还要做到有特点，所以在逛了许多博主的主页之后我决定加入以下主要功能：
背景以及伴随特效的昼夜切换：在白天和夜晚背景图片是不一样的，其伴随的特效也不同，在白天是樱花飘落的效果，在夜晚则是仿萤火虫明灭在背景上随机位置的闪烁（仍有优化空间）。
随机的一言效果：引用了相关的API，若API出现意外，也可先使用本地预先存储好的一言内容，且点击一言时底部会显示出处，默认不显示。
网易云外链播放器：在页面引入了音乐播放器，在桌面端时居于页面右下角，在移动端时，则与其他主要组件一致居于页面中间，未来的想法是每次进入做到随机的歌曲展示，而不是现在的单一歌曲。
博客状态显示：有的时候博客可能会因为网络或者服务器原因导致无法访问，但在不知情的情况访问也会浪费时间于是就设计了一个博客状态的显示，且顺带做了延迟信息（仍有优化空间）。
页面的动态交互：在桌面端滑动鼠标，背景会出现轻微的偏移，模拟出空间的立体感。通用的部分就是点击页面任意位置都有水波纹效果，这是根据主页名称"雨"的意象得来，就像雨滴落在了一个平静的湖面上。
当然在开始实现的时候并不顺利，起初的页面有3个，页面底部的"关于此页"“版权声明"都是两个独立的页面，点击时都有页面的跳转，但发现效果不是特别好，因为是托管在cloudflare上，每次的来回跳转也会频繁的触发它的防御机制，这样的体验也不好，特别是网络状态更糟的时候。于是后来就把三个页面整合在一起，另外两个页面就使用弹窗显示而不是单独的再写一个页面。而且这样的弹窗还能复用，如果要增加需要弹窗显示的信息时只需修改它的内容即可而不需要单独再写一个函数或页面去实现。但这并不是最头疼的问题，让我头痛的是网易云外链播放器的错位问题，每次的重新布局都会有意想不到的BUG：因为在移动端要居中显示，可能是我在移动端没有给其他组件微调的原因，导致刚开始是在测试这个功能时会出现播放器剧中显示但它会被顶到页面顶部的情况，亦或者是播放器虽然居中显示了，但页面的底部信息却被顶到顶部的情况，还有让人哭笑不得的情况：在移动端播放器成功局中但点击播放器按钮后却在屏幕上"反复横跳”（在桌面端和移动端的位置来回移动）导致，当你想按下暂停播放都不行。要恶补弹性布局了QAQ可能是布局顺序上的原因，相较于博客状态显示，网易云音乐播放器功能更早加入到主页的布局，于是就出现了解决的老毛病卷土重来的情况，不过好在这次已经吸取问题所在，所以解决得也快。在解决了这两个问题之后我的主页就基本完工了。
更新博客
实际上，建设主页的同时更新博客的任务也没落下，在更新的这段时间里，有一部分是双线交替进行的。博客的更新内容在另外的文章里有提到这里就不做过多赘述（详见文章《更新日志04》）。相较于建设主页，这次的博客更新就没那么繁琐了，再加上已经有了前三次的更新经验，所以并没有碰到太多的阻碍。首先就是音乐播放器的问题了，音乐播放器在1.1版本加入但是到1.3版本的时候又在右下角加了一个私信按钮，这加进去本来也没什么，但在移动端原生的播放器展开后的部分控件会被私信按钮遮挡于是在1.3版本就着手对原生的播放器进行改动，改成类似私信按钮的效果通过点击按钮呼出，但修改后发现了控件缺失问题，在1.4版本着手修复时查阅了这个组件的文档之后发现只要将展开的后的容器强制扩大就能解决，而原本的控件也不是消失了而是因为装它的容器太小，导致展开后它自动隐藏了部分控件。然后就是对回到顶部按钮做了美化，之前版本的回到顶部按钮是用一个svg图片作为交互按钮位于页面的左下角，在页面下拉到一定程度时才会显现而且还是桌面端特有，在移动端看长文章就很不方便，这次在修复音乐播放器的问题时顺带将它的样式也改成成与音乐播放器一致且增加了按钮内的滑动进度显示，且取消了桌面端的独占并修改了位置，将它置于音乐播放器按钮的右边与它同行。既然移动端有了回到顶部按钮，那为何不更近一步，让移动端的文章阅读也有目录功能呢？在默认的主题样式里移动端是没有目录的，于是就参考了 ifantic老师的博客装修文章Hugo-stackの美化 II，为移动端的文章页面增加了目录按钮并稍微修改了一下样式让它与我的博客风格相匹配。
在更新的途中也发生了一点小插曲，那就是评论系统的数据库服务商LeanCloud在一年以后就要停止服务了，虽然还有一年时间，但出于个人的习惯还是想提早解决这个问题，于是更新的工作暂时停下，开始搭配评论系统的使用文档寻找合适的替代数据库，经历了一番折腾，最后也是顺利配置成功了。实际上花了一整个从中午到下午的时间，这是可以说的吗（
再者就是更新日志在中没提到的部分了，对文章资源的优化了，对于文章中的文本内容优化在本文的前面已做简单说明，这里就不多描述，需要提到就是对图片资源的优化，将图片资源使用图床进行管理，相较于将图片存放在本地，图床通常配合CDN。图片会存储在遍布全球的节点上，用户访问时会从距离最近的节点获取图片，减少部署压力，对于未来博文增多导致访问速度减慢的情况是一个非常好的性能优化方案。
最后就是感谢我的朋友@Max帮忙绘制了主页的Logo的，真的非常感谢！
结语
在目前的开发经历中，这次的更新经历让我收获颇丰，虽然做出的效果没法与那些运营了很长时间博客的老师们相比，但从中学习并捣鼓的过程还是让我感到充实和快乐的。更新博客的过程中总会冒出一些有意思的想法，然后就会说干就干，常常会忘记时间，有时也会觉得时间过得很快，眨眼间时间已经过去两周了，这里对被我婉拒游戏开黑的朋友们致歉在这个过程有忙碌半天都不知道问题出在哪的挫败感，也有在这之后成功解决或一遍就基本实现功能的成就感，总的来说为于自己感兴趣的事务而忙碌并不讨厌，就像《我的选择》中的一段话：
人的一生，总该有些坚持。