博客装修记录

今天到了学校，还有一天才开学，正好闲着没事把博客之前拖了好久的功能的功能给加上了，顺便优化了一下性能。不得不说，还是学校里面效率高，寒假在家里真的是太懒了，啥也不想干😵

新功能

字数统计和阅读时间

给文章添加了字数统计和预计阅读时间计算的信息。这个本来准备自己实现的，问了一下 Gemini，发现有现成的库，只需要从新写一个 remark 插件就可以了，这样就省去一大堆麻烦事。在 AI 的帮助下，也是分分钟就修改好了。

文章分类

实现了之前一直想要做的文章分类功能。

由于 Astro 的路由限制，如果需要在归档页面对分类进行过滤，就需要单独为分类标签再写一个路由，最后生成类似 /archive/category/xxx 的页面，这显然是有点麻烦了。但是前段时间浏览 fuwari 这个博客的时候，发现归档里面居然可以直接使用 /archive/?category=xxx 的方式来过滤分类标签。翻看了仓库发现是使用 Svelte 组件实现归档页面，从而可以动态获取路由的参数信息。这确实是一个不错的选择，大大减少了工程了复杂度。于是在参考这个设计的情况下，我也把归档页面使用 Svelte 重构了一下，这样之后也方便添加其他的过滤参数，比如 tag。

目前我只添加了分类 Category，且每篇文章只支持单个分类（在我的理解里，文章的分类只有一个，但是标签 Tag 可以有很多）。目前还在考虑需不需要添加标签属性。这个博客设计的出发点就是简洁，引入标签就需要从新设计排版，增加使用负担；可能还会带来视觉上的繁杂，破坏了原有的简洁。我认为博客的核心在于内容，精美的外观，没有内容支撑也只是好看的皮囊；之前见过太多搭建完，只保留了博客原始的内容，没有自己的文章的博客。不过话说回来，是标签确实也很好用，有时候会发现单个分类不太方便。等之后找到了合适的解决方法再加入吧…

由于加了新的内容，原本的布局已经不适用了，于是又优化了许多细节的地方，最后看起来总算是舒服了一点，交互方式也比较合理。不过还是有很多地方需要慢慢修改，之后去借鉴借鉴其他优秀的博客设计。

性能优化

之前就看见好多网站在 PageSpeed 这个网站上跑分测试，今天网页把我的网站放上去试了一下，没想到好几项都是黄的。虽然说这个不能完全代表用户体验，但是可以提供一点参考。于是我按照网页测试的结果，对网站进行了一些优化，包括脚本导入的方式，SEO ，UI 等等，最后也算是全部绿色了。最后的测试结果放在下面：

未来的计划

• 网站的配色还是之前随便选的，一直不是很满意，也没有找到合适的；并且配色的使用也没有很统一
• 从新设计归档页面的交互。现在需要通过分类过滤文章需要前往文章页面或者首页的标签按钮才行，不能直接在归档页面选择分类进行过滤；目前的想法是在归档页面的右边实现一个和目录效果类似的分类列表，点击后便可以对文章进行过滤
• 优化首页的交互。目前从首页的文章卡片访问文章，只能点击标题或者图片，虽然我加入了箭头做引导，但是感觉还是有点不友好，不过目前也没啥好的想法
• 优化移动端的使用体验，修改顶部导航栏的弹窗样式（目前想法是做一个侧边或者顶部弹出的菜单），左下角添加简单的功能按钮（回到顶部、评论等）
• 支持更丰富的 Markdown 语法

最后放点截图，存档一下当前的博客外观：