重构博客²

重构博客²

重启

时隔三年,终于给博客来了次大翻新。上次那篇文章“博客重置”说是失踪一年,结果一晃三年就过去了。
也是因为太久没写,这次先是准备了一堆零零碎碎的想法,然后调整顺序再组合起来,所以这篇文章读起来可能会有些奇怪。

这段时间,可以说整个博客是荒废的。比如说博客系统用的是 Vercel,域名是 .vercel.app,结果就是在国内难以访问。这次进后台看到版本已经落后太多了,索性重新建一个,然后再把给绑定我自己的域名,访问起来速度快多了。

框架

这次整个重构了整个博客的框架,虽说是基于 Ezal,但实际 Ezal 留存下来的就只有 Markdown 渲染器,而且这个渲染器中的许多代码也发生了改变。
之前在写渲染器的时候,遇到过一个正则表达式卡了好几分钟,最后的解决方法是加了一个?变成非贪婪匹配,这里推荐两个在线工具,这段时间通过这两个工具辅助写正则表达式,节省了不少调试的时间。

前一个主要是可视化,后一个可以看到详细的匹配过程,对于优化正则的效率是挺有帮助的。

这次放弃了 PWA、ServerWorker 这些优化手段了,毕竟这些技术主要是优化二次访问的速度的,如果是路人第一次访问,不如减小各种资源的大小来得实在。

当然,相比之前的版本,这次总算是实装了图片优化,也就是提前读取图片尺寸以及计算整体颜色,再把这些信息加在<img>中,这样一来在图片未加载时,会有一个色块作为占位符,并且可以避免布局偏移,之前的有很严重的布局偏移问题。
另外,在前段时间还学到了用<picture>来实现多格式图片 fallback,目前的效果是首选 avif 格式,其次 webp,最后用 png 或 jpg 打底,而这些图片都不需要我手动准备,我只需要准备 png 或 jpg 格式的图片,在构建时会自动创建其他两种格式的图片,以及生成一个原格式的优化版本。

外观

博客的外观一直是让我头疼的难题,这段时间看了许多博客,大部分博客都是用的已有的主题,已有的主题还是有好看的,但是我总是感觉差点意思,有些过于“常规”了,不过新的这套我也感觉有些过于“常规”的地方,比如说文章列表,可惜一直没有好的想法。唯一感觉比较好的就只剩下主页的Logo和动画了。
或许是我太看重文件大小了?许多好看但复杂的效果我都直接 pass 了,主要是怕加载时间太长了。所以在整个博客的外观在达到我满意的程度还有很长的路要走。

不过,也有一些确实不错的效果,但我至今没有行动。
比如在一年多以前我就发现的,Vercel Blog 中的图片都有暗色和亮色两个版本,根据配色自动切换,但是想想这样的话就要准备两倍的图片,只能以后再说了。

后续

在完成框架重构的过程中,我也将过去的文章重新整理了一遍,看着看着感觉不太行,排版也不咋样,但是全部重新写工作量又太大,没办法,只能做一些小修小补。

其他几个页面也想要调整一波,比如“库”这个页面,虽然有点想法,但是还不够清晰,只得先搁置了。