重启
时隔三年，终于给博客来了次大翻新。上次那篇文章“博客重置”说是失踪一年，结果一晃三年就过去了。
也是因为太久没写，这次先是准备了一堆零零碎碎的想法，然后调整顺序再组合起来，所以这篇文章读起来可能会有些奇怪。
这段时间，可以说整个博客是荒废的。比如说博客系统用的是 Vercel，域名是 .vercel.app，结果就是在国内难以访问。这次进后台看到版本已经落后太多了，索性重新建一个，然后再把给绑定我自己的域名，访问起来速度快多了。
框架
这次整个重构了整个博客的框架，虽说是基于 Ezal，但实际 Ezal 留存下来的就只有 Markdown 渲染器，而且这个渲染器中的许多代码也发生了改变。
之前在写渲染器的时候，遇到过一个正则表达式卡了好几分钟，最后的解决方法是加了一个?变成非贪婪匹配，这里推荐两个在线工具，这段时间通过这两个工具辅助写正则表达式，节省了不少调试的时间。
前一个主要是可视化，后一个可以看到详细的匹配过程，对于优化正则的效率是挺有帮助的。
这次放弃了 PWA、ServerWorker 这些优化手段了，毕竟这些技术主要是优化二次访问的速度的，如果是路人第一次访问，不如减小各种资源的大小来得实在。
当然，相比之前的版本，这次总算是实装了图片优化，也就是提前读取图片尺寸以及计算整体颜色，再把这些信息加在<img>中，这样一来在图片未加载时，会有一个色块作为占位符，并且可以避免布局偏移，之前的有很严重的布局偏移问题。
另外，在前段时间还学到了用<picture>来实现多格式图片 fallback，目前的效果是首选 avif 格式，其次 webp，最后用 png 或 jpg 打底，而这些图片都不需要我手动准备，我只需要准备 png 或 jpg 格式的图片，在构建时会自动创建其他两种格式的图片，以及生成一个原格式的优化版本。
外观
博客的外观一直是让我头疼的难题，这段时间看了许多博客，大部分博客都是用的已有的主题，已有的主题还是有好看的，但是我总是感觉差点意思，有些过于“常规”了，不过新的这套我也感觉有些过于“常规”的地方，比如说文章列表，可惜一直没有好的想法。唯一感觉比较好的就只剩下主页的Logo和动画了。
或许是我太看重文件大小了？许多好看但复杂的效果我都直接 pass 了，主要是怕加载时间太长了。所以在整个博客的外观在达到我满意的程度还有很长的路要走。
不过，也有一些确实不错的效果，但我至今没有行动。
比如在一年多以前我就发现的，Vercel Blog 中的图片都有暗色和亮色两个版本，根据配色自动切换，但是想想这样的话就要准备两倍的图片，只能以后再说了。
后续
在完成框架重构的过程中，我也将过去的文章重新整理了一遍，看着看着感觉不太行，排版也不咋样，但是全部重新写工作量又太大，没办法，只能做一些小修小补。
其他几个页面也想要调整一波，比如“库”这个页面，虽然有点想法，但是还不够清晰，只得先搁置了。
2025 年 11 月 23 日更新
这半个多月的时间都在重构 ezal 框架，目前预览的性能已经相当不错了，就目前我的博客在保留图片缓存的情况下，构建一次平均 4 秒。这速度相比上一个版本实在好太多太多了。
另外还重新设计了自定义的 Markdown 语法，之前用的都是早期使用 Hexo 时遗留下来的 {% tag %} 语法，虽然这种语法容易扩展，但是写起来实在是比较费劲，现在标签块使用三个及以上的 : 来标记，折叠块则是 +，对于提示块，则是 !，按键就设计为了 {{key}}，目前还是不太满意的就是链接的语法，用的是 @ 来标记。
Markdown::: 标签 1
第一个标签的内容。
::: 标签 2
第二个标签的内容。
:::
+++ 展开查看详情
此处可以使用块级语法。
+++
!!! tip
提示信息。
!!!
Press {{ctrl}} {{shift}} {{del}} to do something...
@@
@ https://jonnys.top /favicon.png
欢迎来到 Jonny 的博客
Jonny's Blog
@@代码高亮方面，之前用的 prismjs + highlight.js，至于为什么这样组合，说起来也是搞笑，因为 prismjs 的高亮效果相比 highlight.js 好一些，但是前者不支持自动检测语言。
现在换成了 Shiki 来高亮，@vscode/vscode-languagedetection 来检测语言，不得不说效果好了非常多。
然后就是之前一直没有做的搜索功能现在也补上了，用的 pagefind 实现的，原因是它搜索不需要加载所有文章的内容，不过对于我的博客来说，似乎有点大材小用了。
另外就是 HTML 模版这一块，之前一直用的 pug，因为它的语法十分简洁，但它在写稍微复杂一些的条件和循环时就比较麻烦了，因为没有类型提示。因此我就想到了 TSX，搜了一下貌似没有搜到用 TSX 来做 HTML 模版的库，故而自行实现。
这实现过程说起来也是很简单，虽然我之前没写过 React，问了一下 AI，发现主要是要实现一个工厂函数，这就是运行时的部分；编译的部分用 esbuild 实现了，编译速度还是相当快的，最后再用 Function() 来执行编译后的代码，大部分功能就算是完成了。
不过用 TSX 来作为 HTML 模版的体验并没有达到我的预期，例如某些可能为 undefined 的类型，在不使用可选链的情况下 TS 并没有报错，也许是我的 TS 配置没写好？然后就是在写的过程中，Biome 时不时崩一次，搞得我老是得重启它才能格式化代码，所以说没有比写 Pug 舒服多少。