聊聊博客主题的更新

两年前，我刚决定把博客迁移到 Hugo 时，因为找了许久都没有找到合适的主题，只好自己动手写了一个（项目地址：Cirrus）；在随后的两年中博客便一直使用着这套主题，这期间倒是也陆续发现了其它一些还不错的，不过我却没有什么更换的念头，因为在自己动手写了一个主题之后明白了一个道理：只有自己设计的东西才能真正贴合自己的需求。两年后的现在，看着我写的第一个主题，心中虽感慨万千，却也愈看愈觉得它「稚嫩」与「不成熟」，不由得泛起重新设计一版主题的念头。

一番思考之后，我首先明确了本次重新设计最核心的理念：对现有的内容做一些裁剪。两年前因为不懂设计，所以总是想把博客的页面布局塞得很满，无论组件是否有用只要我想得到都塞进去，实际上部分组件根本没必要展示，还有部分组件可以换另一种更好的方式展示。

这次重新设计的所有页面我都通过 Figma 画了原型图，然后对着原型图开始实现；相比之前在脑子里想布局然后转化成 CSS 再根据浏览器的实际效果调整，效率方面实在提高了太多。Figma 上手也比较方便，花了两个晚上跟着 B 站的视频操作了一下就基本掌握了初级的用法，设计一个静态博客足够用了。

原来的样式可以通过 Cloudflare Pages 的快照来对比查看。

布局的改变

博客的布局从原来的三栏变成了顶部导航 + 双栏：原先左侧的博客名称以及菜单信息挪到了顶部以减少空间占用，没啥用的博客副标题我也干脆直接去掉了。这样就有更多的空间来展示中间部分——也就是博客正文。

而菜单部分，我也略作了修改，首先删除了原先占位置的 ICON 图标，并且还删除了归档页面的链接，现在归档页面只有通过首页的查看更多文章的链接才能进入，这样在顶栏显示时会和谐一些。

随后我在谷歌分析查看了最近三个月每个页面的访问次数的统计，发现翻页的访问频率出乎我意料的低：第二页的访问量近三个月只有个位数，排名更在五十名开外，因此我决定把翻页的功能直接砍掉。

而将翻页砍掉之后，为了让首页展示更加和谐，我把文章占用的空间做了递进处理：最近一篇文章占用空间最大，并显示副标题以及摘要部分；剩余 4 篇近期的文章将摘要以及副标题隐藏，只展示标题以及日期（这或许能骗一部分浏览量？）；而更早的文章则在首页直接隐藏，只留一个归档页面的入口。

而右侧的布局也做了一些小调整，加上了文章篇数、总字数的统计，文章数也由原来的按年份统计改成了按类别统计，组件标题旁的 ICON 也移除了。

减少动画

之前的主题动画效果太多了，当时的我近乎炫技一般想给所有的交互都加上动画效果，并且同一类组件交互起来动画还不一样，使用起来就感觉很混乱。比如同为按钮：

1. 翻页按钮的动画是边框颜色从灰变黑；
2. 文章标题右侧的类别按钮则是背景的透明度变暗；
3. 标签按钮则是背景与字体的颜色互换；
4. 暗色模式 / 搜索按钮则只是单纯鼠标指针的变化；
5. ……

本次更新我也会将同类组件的交互显示效果趋于一致，我将原来一些标签组件、分类统计组件的按钮样式改为了超链接样式，因为它们从功能其实更接近于超链接——都是链接到其他页面。

这样按钮组件在形式风格、功能上就更统一：

1. 只在当前页面交互：给按钮加上 Border，Hover 时鼠标指针便成 Pointer，无额外动画。

同时我也将之前的一部分按钮变成了超链接的形式：比如文章 Card 中的类别。

而超链接的样式我也分为了 2 类：

1. 正文部分的链接：字体为超链接颜色，并且统一加上下划线装饰、Hover 时下划线的高度会变高；
2. 非正文部分的链接：字体为正常颜色，Hover 时字体颜色变成超链接的颜色，并加上下划线装饰。

这样交互起来的动画效果就看起来比较和谐了。

一些没啥用的优化

另外还有些比较细碎的优化，不值得拿出来单独讲，在这里列举一下：

1. 标题、日期，以及文章类别不再直接显示在文章封面上面：因为如果遇到某些浅色或者比较花的图片会显得文字有些难以辨认；
2. 文章详情页底部的前一篇、后一篇文章 Card 在 Hover 时的动画效果我也直接删了，改成了用超链接的第二类效果；
3. 摘要的最后一个字的位置显示为省略号改为用 SVG 图片来覆盖最后一个字实现，之前使用 webkit-line-clamp 的属性和 text justify 搭配在 Safari 上显示有 bug，省略号会和文字重合；
4. 右下角新增了一个回到顶部的按钮，它在所有页面都会显示，不过目前它是常驻的，我在研究页面滑动到顶部时隐藏按钮的方案时发现有些复杂，就暂时不做了；
5. 右上角的浅色 / 暗色模式切换的 ICON 现在会动态变化：处于浅色模式时显示月亮图标，表示点击会切换为深色模式；处于深色模式时显示为太阳图标，点击会切换为浅色模式；
6. 趁着 Google Analytics 要求用户从旧版 Universal 迁移，干脆去掉了 Google Analytics 的统计代码。

最后，博客主题虽然更新完成，不过今年只更新了 2 篇文章，希望后续我能将更多的兴趣放在博客的内容创作上来——我好像每次都这么说，也不知道能不能做到。