给博客加了3个小功能，折腾了一整晚，差点没保住发际线

上周六晚上，我蹲在电脑前，盯着屏幕上的报错日志，嘴里念叨着一句话——为什么我当初要手贱写博客。

事情是这样的。我的个人博客用的是Hexo，主题是自己魔改的NexT，托管在Vercel上。本来跑得好好的，每天几十个IP访问，大部分还是我自己。但最近我发现几个痛点，忍了很久，终于决定动手。

痛点一：文章底部光秃秃的，看完就完了，连个”上一篇/下一篇”都没有。痛点二：评论区用的是Utterances，加载慢不说，还得跳转GitHub授权，用户流失率目测99%。痛点三：搜索功能用的是本地JSON索引，文章一多，搜索卡得跟PPT似的。

三个问题，一次性解决。我给自己下了死命令——今晚必须搞定。

先说第一个，前后文导航。这个其实最简单，NexT主题自带了`prev`和`next`参数，但我一直没开。找到主题配置文件`_config.yml`，把`post_navigation`从`false`改成`true`。重启Hexo服务器，文章底部果然出现了”← 上一篇”和”下一篇 →”的链接。但是问题来了——链接的文字是文章标题，如果标题太长，会把布局撑变形。

我翻了下主题的`post.swig`模板，发现导航部分的class是`post-nav-item`。直接加了一段CSS：

“`css
.post-nav-item a {
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
“`

顺便把字体调小了一号，从16px降到14px。搞定。前后花了10分钟，算是热身。

第二个，评论区。Utterances确实好用，但它依赖GitHub Issues API，国内访问速度堪忧。我试过Giscus，原理差不多，但基于GitHub Discussions，加载速度稍微好一点。关键是它不需要用户授权，直接评论就行，门槛低了一大截。

安装步骤不复杂。先去GitHub上创建一个公开仓库，专门放评论数据。然后在Giscus官网配置一下，选择仓库，设置映射方式（我选了”页面URL”），语言选中文，主题选light。它会给出一段嵌入代码，复制下来。

回到Hexo主题，找到`comments.swig`文件，把原来的Utterances脚本替换成Giscus的代码。注意要保留判断条件——只在文章页显示评论区，首页和标签页不要加载。我加了这样一段条件判断：

“`javascript
<% if (page.comments && page.type === 'post') { %>

<% } %>
“`

部署上去，清空缓存，刷新页面。评论区加载出来了，速度明显比Utterances快，而且不需要跳转授权。用户直接输入昵称和邮箱就能评论，或者用GitHub账号登录也行。满意。

第三个，搜索优化。这玩意最坑。Hexo默认的搜索插件是`hexo-generator-searchdb`，它会生成一个`search.xml`文件，前端用JavaScript遍历这个文件做模糊匹配。文章少的时候还行，我写了80多篇之后，搜索”Vue”要卡2-3秒才能出结果。

我查了下，社区推荐的方案是用`hexo-algolia`或者`hexo-local-search`。Algolia是第三方服务，免费版有10万条记录的限额，但需要申请API Key，还得配置同步脚本。太麻烦。我选了`hexo-local-search`，它直接用JavaScript在浏览器端做搜索，但用了更高效的索引方式。

先卸载旧的搜索插件：

“`bash
npm uninstall hexo-generator-searchdb –save
“`

安装新的：

“`bash
npm install hexo-generator-search –save
“`

然后在主题配置里，把搜索类型从`xml`改成`local`，再把搜索路径改成`/search/`。注意，这里有个坑——`hexo-generator-search`默认生成的搜索文件是`search.json`，但我的主题硬编码了`search.xml`的路径。找了半天，发现主题的`search.swig`模板里写死了`/search.xml`，改成`/search.json`才行。

改完之后，重新生成静态文件，启动本地服务测试。搜索”JavaScript”，这次秒出结果，没有任何延迟。看了一下`search.json`文件，结构优化了很多，只存储了标题、路径、摘要和关键词，不像之前把全文都扔进去。

三个功能都搞完了，一看时间，凌晨1点47分。部署到Vercel，刷了两次，页面正常。正打算关电脑睡觉，突然发现一个诡异的问题——文章页面的评论区位置出现了双份。一个Giscus，一个Utterances。检查代码，发现之前为了测试，在`comments.swig`里同时保留了两种评论系统的代码，忘记删了Utterances的部分。赶紧注释掉，重新部署。

再刷新，正常了。

第二天白天，我观察了一下统计数据。评论区加载时间从原来的平均3.2秒降到了0.8秒，搜索响应时间从2.5秒降到了0.3秒。前后文导航的点击率大概有12%，虽然不高，但至少用户体验完整了。

踩坑总结三点。

第一，改主题之前一定要备份。我改了`comments.swig`忘了备份，中间改崩了想回滚，只能去GitHub翻历史版本。幸亏有版本控制，不然得重写。

第二，调试搜索功能的时候，Hexo的缓存坑了我两次。每次改完配置，必须执行`hexo clean`清除缓存，否则旧配置还在生效。我第一次没清缓存，改了半天搜索都没反应，以为是代码写错了。

第三，Vercel部署有个小技巧——如果你用的是Free Plan，每次部署都会重新构建，构建时间大概30秒到1分钟。频繁部署会消耗构建时长额度。建议把多个改动合并成一次部署，别像我一样改了三个功能部署了四次，额度快用完了。

折腾完这三个小功能，收获就是——写博客这事，有时候不是为了给谁看，就是自己跟自己较劲。看到页面上的小细节被一点点打磨好，那种满足感，比发一篇文章涨了10个粉丝还爽。

---

📎 延伸阅读

看完这篇，如果你想：

• 直接拿工具 → 回复”13“，我把跨境获客工具包发给你
• 系统学习 → 点击菜单”AI训练营”，从0开始跑通AI变现