Fuwari足够美观优秀,为什么要重构?
在重构前我就考虑过这个问题了,毫无疑问Fuwari确实是我用过的比较好用的现代化的博客主题了~~(意义不明的大段形容词)~~,颜值不错,而且得益于Swup页切动画,Fuwari的动画也足够丝滑。
但问题是,我的目标不仅仅局限于使用原版Fuwari进行博客创作,因此势必要进行大量的魔改,而这一改就出问题了。如果作为一个纯静态的博客其实魔改起来还算好,毕竟Astro是一个默认 SSG 的框架(这么说好像不是很准确),而我则加了很多不属于传统静态的东西,比如说 Bangumi 界面,还有动态(对接了自建的 Memos)。这些东西如果用纯 SSG 实现就不是很雅观了,数据只能在构建时写入,做不到实时更新。虽说 Fuwari 也支持 SSR,可以实现服务端实时渲染,但在 Swup 页切动画的加持下,SSR 的 JavaScript 逻辑和事件监听器写起来极其混乱,而且这玩意还很容易和 Swup 打架。Swup 这东西好看是好看,但写起来纯纯坐牢。
于是在一步步魔改下,我的项目就变成了一坨屎山。虽然确实能跑,但总是会有奇奇妙妙的小bug(直到原博客项目归档,部分界面闪烁的问题仍未完全修复),而且变得特别重,打开 dev 测试要等好几分钟,内存占用还巨大。那么是时候该画上句号了。
归档 & 立项
首先先对原项目进行了归档,接着开了个新仓库 REBLOG 来记录重构后的博客。其实最开始也考虑过 Svelte,我之前的个人导航页就是拿 Svelte 写的,但个人感觉 Vue 的生态更成熟些,于是就选用 Vue 了。
首先把原博客的文章复制过来,然后开始开发。由于我本人比较青睐于 Material Design 3 的设计语言,遂采用 MD3 风格进行创作。
然后先需要对文章的元数据进行处理。Fuwari 采用的是 Markdown 文档存储文章,所以只需要内建一个 Markdown 解析器,对原文章 --- 框起来的元数据进行解析,再呈现到前端界面上就行了。
接下来就是不断的优化、测试、上线了。现在新版的博客保留了原版的大部分内容,后续还会持续优化。
一些变动
原来用的是自建 Memos,其实用着还行,但原版依赖 Docker 部署,于是我干脆直接用 Cloudflare Worker 重写了一个动态功能并做好路由,图片放到 R2 顺便还能白嫖 CF 的流量,现在已经取代了原有的 Memos 动态。
另外评论也换回到了 Giscus,顺便做了个深浅主题切换的功能。
上线
做好之后就是上线了。原来主页的分路切换暂时下线,后续会直接进行分流处理。直接在 Cloudflare 新建一个 Worker 并配置路由(用了第三方 CDN),再到 CDN 提供商把 CNAME 指向新的 Worker 域名就行了。
接下来再去 Google 和必应重新提交一下站点地图。顺带一提,原 Fuwari 生成的 sitemap.xml 提交到 Google Search Console 和必应站长平台后,不知道是因为我魔改了还是怎么回事,一直未被正常处理,提交后迟迟没有索引。
至此,重构任务就算是完成了。

