博客迁移记
在过去的四个月里,我一直在折腾我的个人博客,从最初的Hexo,到Hugo,最后迁移到了Astro。作为大四的计算机学生,竟然花费了这么多时间在个人博客上,不过也算是学习了不少关于部署、前端资源优化的知识。
起因是看到了前端大佬antfu的个人博客,觉得贯彻了极简风格的设计理念,非常棒。于是我在网上寻找有没有人做过对应的主题模板,终于在astro上发现了antfu-style-theme。这位应该也是中国的一位女前端程序员,lin-stephanie,非常厉害。
一个小issue的提出#
Bug description When I click the theme switch button on the menu bar, I experience a flashing screen issue in both Chrome and Safari browsers (which I frequently use). This issue also appears on astro-antfustyle-theme.vercel.app, not just on my deployed site.
I hope this issue can be resolved. It may be possible to optimize the transition animation when reloading the page, similar to how the Astro Pure theme’s menu bar (Astro Pure Theme) has a smooth transition!
在折腾博客的themeSwitch功能时,我发现了一个小问题:当切换主题时,页面会闪烁一下,然后才应用新的主题。于是我在lin-stephanie的仓库中提了一个issue,描述了这个问题,并附上了复现步骤和截图,这是这个issue#45的链接。
作为后端开发学习者,很多前端的知识我并不熟悉,但根据描述来说应该是浏览器的View Transition API在不同版本上的兼容性问题。详情可以见Chrome的这个文章。
在后续的版本修复中,lin-stephanie也立刻修复了这个bug。再次感谢她对此主题做出的贡献。
迁移到Astro的感受#
astro的优势非常明显:自定义everything
显然,astro主题可以写mdx文件,这种格式支持在markdown里写JSX,也就是React的function component。这样我就可以在博客里插入一些交互式的组件,比如自定义展示颜色,非常方便。
另外,astro的构建速度也非常快,生成的静态文件体积小,加载速度快。对于SEO也有很好的支持,内置了很多优化功能。
目前我的个人博客还集成了评论组件waline,friend-circle-lite,洪墨AI摘要组件等。自定义丰富了不少内容,目前来说基本已经完善了,字体用的是LXGW Wenkai,很棒的中文轻衬线字体。
很多时候对于Typescript的类型使用eslint出错时,我经常使用claude code,接入清华大学的GLM 4.6,很快就能解决问题。用AI有一个问题,那就是它目前还是经常忘记上下文,并且费用太贵了,最重要的是,我认为AI并不能带来知识上的提升,因为AI解决的问题你是不会记住的,下一次遇到相同的问题,你还是得问AI,这就失去了学习的意义。
因此,我提倡程序员朋友们少用AI工具。古法编程是必要的learning skills。
lin-stephanie