返回首页

对 v2c 进行了一次前端的重构

0x0

自从 2019 年把博客迁移到 Typecho,再到 2020 年用 React 自己写了博客的前端进行了前后端分离后,我的博客前端就几乎没怎么动过了。期间其实也多次想开始重构,但总是因为工作忙、或者没啥动力等原因(借口)拖延下来。想想都已经几年过去了,前端技术更新换代得飞快,刚好恰逢一个没啥事儿干的中秋假期,终于还是下定决心动手整一整。

最早搭建这个博客的时候,正值我还处于铁杆软粉的阶段,对 Windows UWP 应用的 UI 风格情有独钟,尤其是 Outlook 客户端的设计深得我心。所以当时为了追求这种简约清爽的视觉风格,我使用了 react-uwp 的 UI 库。这个库完美还原了 UWP 的感觉,不得不说效果挺好,自己也挺满意的。不过,现在我已经不算铁杆软粉了(说多了都 TM 是泪),但说实话,博客这个风格我还是蛮顺眼的,所以暂时也不打算大改 UI。

0x1

回过头来看看,最早写这个博客前端的时候,完全没有考虑 SEO。那时候觉得大部分搜索引擎的蜘蛛已经能抓取单页应用了,就没有去研究全站静态化的问题。但随着时间推移,这次重构我决定使用 Next.js 来开发,并且把所有页面都静态化输出,也就是所谓的 SSG(Static Site Generation)。这样不仅能提高 SEO 友好度,还能提升加载速度,让用户体验更加流畅(虽然大概也没几个用户????)。

这次重构并非一帆风顺,最大的障碍来自 react-uwp。这个项目年久失修并且它在很多地方依赖于浏览器的 window 对象,导致无法支持 SSR 或 SSG。于是,我试着自己修改这个库想办法让它支持静态输出,但几次尝试后发现,改动起来要么很麻烦,要么效果不理想。最后,索性放弃继续用现成的 UI 库,决定照着原来的样子,自己从头开始重写这些组件。

经过两三天的埋头苦干终于完成了这次前端重构。在保留原有风格的基础上,我将原来的客户端渲染方式改成了静态站点生成(SSG),每篇文章、每个页面都生成静态 HTML。还顺便对全站进行了 SEO 的优化,添加了 Open GraphTwitter Card 的支持(现在分享博客的任一页面到支持的地方都会自动生成卡片啦 ✿✿ヽ(°▽°)ノ✿)。为了照顾我快瞎了的双眼还顺便添加了暗黑模式。另外整个部署流程也自动化了,基于 GitHub Actions 实现了自动化编译和部署,可以说是麻雀虽小五脏俱全。

虽然不再用 react-uwp 这个项目,但还是要感谢它陪伴了我的博客这么多年。如果有同学也对这种风格感兴趣,可以留言索取源码。

至于未来会不会继续折腾这个博客,Who TM Know 呢,我感觉已经足够好用了,也许等我未来看腻了 UWP 的风格再说吧(逃