Mikusa Annual Issue 6

我对 AI 的使用一直相当朴素，无非是把它当成一个更聪明一点的搜索引擎：遇到不会的东西，就在网页上来回车轮战，让 AI 猜解决方案，再把答案手动搬回编辑器里慢慢调试，最后一点点把功能做出来。例如之前提到的《给博客代码框增加复制按钮》，就是这样一点一点折腾出来的。

彼时的 AI 于我而言，更像一个“贴心的老师”——它愿意告诉我答案，却不能直接帮我写作业。因此，我对博客的修改大多只能停留在小修小补的层面。涉及稍微复杂一些的东西，我就无能为力了。

直到最近，我接触到了支持 AI Agent 的 IDE。第一次尝试借助 Google Antigravity 内置的 Claude Opus 模型编写小工具，亲眼看着代码从零开始一点点搭起来，我才真正意识到，如今的 AI 编程工具和前几年已经不是一回事了。它不再只是帮你补全几行代码、修正几处语法错误，而是可以直接阅读、理解，甚至参与修改整个项目。对于我这种完全不懂编程的小白来说，这种体验多少有点魔幻。

于是，我也终于决定开始实施一项蓄谋已久的计划：翻新 VOID 主题。

更新 VOID 主题

如果你对这个 AI 适配的 VOID 主题感兴趣，可以访问 这里 下载主题压缩包并安装。

距离 VOID 上一个 3.5.1 版本发布，已经过去了五年多。其间，Typecho 先后经历了 1.2.1 的小版本更新和 1.3.0 的大版本更新，而旧版 VOID 早在 1.2.0 时期就已经有启用后白屏的问题。

所以这一次，我没有一上来就急着做兼容适配，而是先借助 Claude Opus 4.6，把这些年我自己陆续加在 VOID 上的小改动一点点迁了过去。 毕竟对我来说，这些东西比适配新版 Typecho 还要更紧迫一些。

而后，我才让 Claude Code 针对 Typecho 1.3 及 PHP 8.2 的升级作专项适配，解决主题白屏等一系列兼容性问题。这中间我充分利用了上班摸鱼的时间，断断续续修改了大约一周。

功能增强

在我使用 VOID 的这些年，基于个人需求添加或改进了许多功能。我一直在思考这些小东西的必要性，是否只有我自己才用得到。最终还是决定，既然这是我个人修改的主题，那么就应该优先考虑自己的需求。在不破坏原主题整体设计的前提下，我完全可以将这些功能整合进主题源码，并公之于众。

代码复制

代码框的复制按钮其实早就合并到官方 VOID 仓库中了，这次是让 AI 根据原生剪切板 API 做了优化。

原本是想让它抄一下 GitHub 的剪切板方案，但没能抄成功。

最后改成鼠标划过代码框才浮出复制按钮，复制成功的提示则还是放在弹窗上。

OwO 表情包

这一块我曾让 Z 酱帮忙提交了我一些新增的米哈游表情包。这次则是针对我自己真实的使用情况，对这些表情包做了一些增删。

其实常用的还是不多。

写到这我才想起来，如果新增的表情包太多，超出数量的分组会因为溢出而被隐藏。于是火速让 Codex 修了这个 bug，现在的表情包选框是这样的：

但测试的时候又发现，这个表情包框只会往下弹，如果是没有评论的文章，就会把底部都撑开。于是就让 AI 糊成了这样：

感觉实际效果还是有些不太对，等后续有想法了再作修改吧。

归档页增强

这就完全属于我自娱自乐的功能了。去年写总结的时候想看看今年总共写了多少字、哪些主题，觉得一篇篇手数好麻烦，就让 AI 糊了这么个功能。

现在，归档页支持年度文章发布统计，只需将鼠标划过年份，即可展示年度总字数与分类聚合信息；同时，在文章列表右侧增加了其关联的分类标签，实测超多分类也可以正常显示。

该功能不可关闭。

文章过时提示开关

VOID 会默认在文章发布 90 天后，提示其信息可能过时。

对于教程类或是强时效类的文章，这个提示很有必要。但若是日常类或其他不受时间影响的文章，就有些多余了。

于是，我在文章编辑页添加了一个开关，可按需展示内容是否过时。

新文章默认关闭过时提示。

主图来源

我的博客使用了大量来自 Pixiv、Twitter 和其他网站的图片。考虑到可能存在的风险，我曾使用 Copyright 插件将主图来源展示在文末。

但 VOID 的一大特色便是其主图，主图在主题的整体布局中具有十分重要的地位。那么，主图来源理应受到同等重视。

可我对这方面的设计毫无头绪。在询问 Gemini 后，它给出了下面 4 种方案。

如你所见，我选择的是最后一种。

设置也很简单。使用 markdown 或 HTML 格式填写主图来源，即可展示在文章顶部。

主图预览

严格来说，这个功能也有些鸡肋。但对我而言，它解决了一个很具体的问题：在正式发布前，确认主图在首页的展示效果。

Typecho 并不像 WordPress 那样提供完整的文章预览功能，所以我以前只能在本地另开一个测试博客，发布之后再查看实际呈现。这样的流程不仅低效，也很折腾。于是，我索性花了几天时间，借助 AI 把这个功能做了出来。

现在，VOID 支持在编辑页面预览首页封面卡片的实际效果，支持原 VOID 主题预设的三种首页主图样式，支持预览卡片的摘要随实际摘要变动。

卡片上方的文字描述可能还需要再稍微改改，但预览效果大体上是符合实际首页的。

评论交互增强

以前的评论其实也没什么大问题，只是层级一多，就看不出来回复顺序。

中间考虑过这么设计。但这样子的话，后续的回复会随着评论量增加越来越往右边挤。

我把目光移到了隔壁 B 站。

最后还是抄了一把叔叔的设计，为 VOID 的评论区做了这几点改动：

• 不再纠结层级问题，不管是谁回复谁，都按回复时间顺序排列
• 第一条回复、自己回复自己，均隐去 回复@xxx 的字样
• 将评论时间、赞踩按钮移动到了评论主体下方，回复按钮转移到踩按钮的右侧
• 默认折叠超过两条以上的评论

折叠效果如下图所示：

折叠时会有轻微的回弹，应该是个 bug，我问不出原因来，暂且搁置……

同时，我还调整了回复按钮的交互。点击 回复按钮 展开评论框时，回复按钮会自动变成 取消回复 按钮。

我本来想干掉右侧的 取消回复 按钮，但 AI 说应当保留，避免访客找不到回复按钮，就留着了。

字数统计

又一个鸡肋的功能，用于实时预估当前编辑内容的字数、图片数和标签数。

该功能依赖 VOID 插件，随插件启用生效。

兼容适配

关于 VOID 在 Typecho 1.2.0 等后续版本白屏的问题，AI 给出了几点主要原因：

• 继承签名对齐 (致命修复)：修复了 libs/Comments.php。Typecho 1.3 核心类引入了 PHP 强类型提示，主题原有的 ___children() 等重写方法因缺少 : array 或类型不匹配导致 Fatal Error (白屏)。
• Null 传参防御：PHP 8.1+ 严禁向系统函数（如 preg_match）传递 null。我们在libs/Utils.php (UA 处理) 和 libs/Contents.php (图片尺寸) 处添加了严谨的 null 保护。
• 调试开关：发现主题 functions.php 的 error_reporting(0) 会掩盖报错堆栈，适配阶段已建议通过控制台或手动调整显隐。

这一部分就太过硬核了，没有我能插嘴的余地，AI 说啥就是啥。

后台优化

这个想法，源于我在添加字数统计功能时的一次临时起意。

原本我并没有打算细化这一部分的样式，没想到 AI 在生成功能时，顺带把字数统计区域的视觉样式也设计了出来。实际效果意外地不错，于是我索性以此为起点，将整个 VOID 中涉及到的字段样式重新梳理并统一设计了一遍。

整体设计基本由 Gemini 主导。它建议我将 选项 改为滑块、将 是否 改为开关；而我则根据自己的理解，把文章类型中的 landscape 译作 封面文章，以便与旁边的 一般文章 在字面上形成对应。

我还调整了部分字段的展示逻辑。例如，只有在填写文章主图后，才会展开与主图相关的其他设置。

首页卡片预览也默认隐藏，只能手动展开查看。展开后还可以根据首页主图样式自由调整并预览实际效果。

体验优化

在把我需要的功能全部补齐之后，我又问 AI：VOID 还有哪些地方值得继续升级？它首先指出的是 PJAX 的问题。

PJAX 上一次更新是 2017 年，而今天的现代浏览器已经具备实现这类局部刷新的核心能力。于是，我让 AI 把主题里原本依赖 jquery.pjax 的插件式方案，重构成了一个基于浏览器原生能力实现的 VoidPjax。新的实现直接使用 fetch、DOMParser、history.pushState/popstate 和原生事件代理来完成页面局部跳转、容器替换与历史管理，同时保留 pjax:* 事件兼容层。这样不仅减少了对老旧插件的依赖，也让后续在脚本重跑、一次性脚本去重、Safari 兼容，以及评论区局部刷新这类细节场景上的控制更加从容。

也许应该直接干掉 PJAX，但我没什么好的想法让 AI 执行，改天再问问看。

此外，bigfoot 已经十几年没更新过了，我用 littlefoot 完整替换了 bigfoot，优化了脚注在暗色模式、触屏设备和 PJAX 场景下的体验；pangu.js 也一并更新到最新版本，并切换使用新版 API，减少脚注、数学公式附近的错误加空格问题；MathJax 也从 2.7.4 迁移到 4.1.1，并精简运行时使用的资源包。

数学公式我用得不多，实际使用中可能会存在其他未知的 bug。

jQuery 更新到了 3.7.1；Prism高亮插件更新到了 1.30.0；fancybox 大版本改动太大，更到了最后一个 3.5.7；Headroom 导航栏自动隐藏、tocbot 目录树等也一并更新到了最新版本。

其他优化则是在主题构建方面，例如：

• 移除 node-sass，切换到 Dart sass。
• 升级 Gulp 到 5.x，并同步更新相关依赖锁文件。
• 迁移 Sass 模块写法，转向 meta.load-css。
• 升级 gulp-sass、sass、del、gulp-autoprefixer、gulp-rev 等构建依赖。
• 升级 GitHub Actions 工作流与 CI 环境到 Node 20。
• 修复构建过程中错误扫描 node_modules 并将其内容误带入产物的问题。
• 调整 clean / move / md5 等构建任务实现，使新工具链下构建结果稳定。
• 迁移 ESLint 到新配置格式。

至此，VOID 主题的适配与升级，就告一段落了。完整的修改记录可以查看从 这个 开始的 commit。

更新 VOID 插件

如果你对这个 AI 适配的 VOID 插件感兴趣，可以访问 这里 下载插件压缩包并安装。

接下来是 VOID 主题配套插件的适配问题。改起来倒是方便，AI 三下五除二就糊好了。

但主要的问题是，旧版本解析评论 IP 与归属地使用的 17monipdb.dat IP库太过古老，我想更换一个支持 IPv6 的、数据更新更及时一些的数据库。AI 给出的推荐是 ip2region。

因此，现在 VOID 插件使用的 IP 数据库为 ip2region xdb，支持 IPv4 与 IPv6；UA 识别范围也更完整，后台互动页可以更准确地显示访客浏览器与系统信息。

当然，还包括后台编辑器新增的实时统计面板。可在文章及独立页面实时显示字数、图片数与标签数。

更新 ExSearch 插件

如果你对这个 AI 适配的 ExSearch 插件感兴趣，可以访问 这里 下载插件压缩包并安装。

既然 VOID 插件都适配了，索性把 ExSearch 插件也糊了一遍。

当前 ExSearch 插件已适配 Typecho 1.3，并将搜索前端改为原生实现，去除了运行时对 jQuery 的依赖。另优化了搜索界面的样式、适配了夜间模式，提升桌面与移动端的一致性。

更新 APlayer 插件

如果你对这个 AI 适配的 APlayer 插件感兴趣，可以访问 这里 下载插件压缩包并安装。

APlayer 在 Typecho 1.3 下直接失效了。我有时需要在文章内插入音乐，就也让 ChatGPT 完整适配了下。

顺便更新了 MetingJS。在新版本 MetingJS 的加持下，Aplayer 可以默认使用 <meting-js> 中 Custom Element 来渲染播放器。因此，在常见的 PJAX 场景中，新页面内容插入后会自动初始化播放器，旧节点移除时也会自动销毁，一般不需要再额外添加 loadMeting() 一类的重载函数。

最后

本来还想再写一写关于 Typecho-Plugin-PandaBangumi 与 Typecho-Plugin-Copyright 这两个插件的修改，前者用于展示番剧日历、卡片，后者用于在文末展示版权声明。可尝试让 AI 总结 PandaBangumi 的改动情况时（因为这个插件还是我一点点用网页糊出来的，改得比较乱），它说：

我顺手看到的几个后续注意点

• 番剧卡片样式被限制在 .yue .bgm-card 下，如果主题没有 .yue 这个容器类，卡片会功能正常但样式不完整。
• loadCalendar() 只取了第一个 .bgm-calendar，如果同一页放多个日历实例，后面的不会渲染 PandaBangumi.js。
• 卡片标题做了转义，但列表里的 item.name / item.name_cn 仍然直接拼进 HTML，卡片标签 tag.name 也没有转义；数据源通常可信，但严格说这块还可以再补一层 PandaBangumi.js。
• cURL 关闭了 SSL 证书校验，能减少环境问题，但安全性偏保守。

所以，这部分还得等后续继续让 AI 把这些问题修完，才能正式发布。

Copyright 插件则是我计划塞一堆声明样式，但方向没设计好，越糊越乱，也不能发出来……

所以，对主题与插件的改动记录，便到此为止了。写完这篇日志，我也该回头去填别的坑了，不然时间一长，我就要忘掉它们怎么写了。

下篇文章见！