这次改的是一个很小，但看着很别扭的地方：Butterfly 首页文章卡片里，tags 默认跟日期、分类挤在同一行。信息是对的，视觉上却有点吵。

我原本只是想在首页显示文章 tag。打开 post_meta.page.tags 以后，第一眼就发现问题：日期、更新日期、分类、tag 全堆在标题下面，像把文章详情页的元信息直接搬到了首页列表。首页是让人扫一眼文章的地方，不适合塞太多碎片。

起因

Butterfly 的配置项很直接。在 _config.butterfly.yml 里把首页 tags 打开：

1
2
3
post_meta:
  page:
    tags: true

主题会在首页文章卡片的 .article-meta-wrap 里渲染 tags。这个位置本来放日期和分类还行，继续追加 tag 就显得拖沓了。分类已经告诉读者文章属于哪个大方向，tag 更像补充索引，应该低一层，放在摘要后面更自然。

我还顺手把 date_type 调成了 both。既然首页已经显示元信息，我想让创建日期和更新日期都能看见。这个需求跟 tags 位置调整是同一次小改动，所以一起提交了。

为什么不只靠 CSS

最省事的做法是写几行 CSS，把 .article-meta.tags 改成块级元素，或者用定位把它压到下一行。这个办法能糊住表面，但我不太喜欢。

原因很简单：它仍然待在 .article-meta-wrap 里。DOM 结构上，tag 还是日期和分类的一部分，只是被 CSS 摆到了别处。后面如果换首页布局、移动端换行、主题改 class，问题很容易重新冒出来。

另一条路是改 Butterfly 的 Pug 模板。这个更干净，但不能这么做。本站的 Butterfly 是从 npm 安装的，主题文件在 node_modules/hexo-theme-butterfly/ 下。直接改那里，下次依赖重装或者升级就没了，也很难回头查是谁改的。

所以最后还是走本站一直在用的方式：主题本体不动，自定义逻辑放到 scripts/，样式放到 source/css/custom.css。

实际做法

这次新增了 scripts/index-post-tags.js。它注册了一个 after_render:html 过滤器，在 Hexo 把页面 HTML 渲染出来以后再处理首页文章列表。

脚本先从 hexo.locals.get('posts') 里拿到每篇文章的 tags，然后建立一个文章链接到 tag 列表的映射。这样做是为了避免从已经生成的 HTML 里反向猜 tag。HTML 只是要被调整的结果，真正可靠的数据还是 Hexo 的文章模型。

处理页面时，脚本只盯着 #recent-posts。它找到每个 .recent-post-info，再通过 .article-title 的链接匹配回文章数据。匹配成功后做两件事：

  • 移除主题默认输出在 .article-meta-wrap 里的 .article-meta.tags。
  • 新建 .article-index-tags，插到 .content 后面。

如果某篇文章没有 tags，就跳过。万一某个列表项没有 .content，脚本会退一步插到 meta 后面；再退一步才追加到 .recent-post-info 末尾。这个 fallback 不复杂，但能避免以后某篇特殊文章把生成流程打断。

HTML 解析用的是 htmlparser2、domhandler、domutils 和 dom-serializer。这些已经在当前依赖树里，不需要额外装包。为了这么一个小布局调整再加一个新依赖，我觉得不值。

样式

样式只做了轻量处理。新的 .article-index-tags 是一个可换行的 flex 容器，tag 本身是浅蓝色的小 pill。它比正文小一点，颜色也压低一点，避免抢标题和摘要的注意力。

我还给它设了 max-height: 2.4em 和 overflow: hidden。这不是为了藏信息，而是给首页列表留一个上限。文章如果真的挂了很多 tags，首页也不应该被它撑得太长。详情页、标签页、搜索入口都还在，首页只需要给一个提示。

暗色模式也补了一条边框和背景色。这里没有做复杂适配，保持能看清、不突兀就够了。

验证

改完之后跑了一遍站点流程：

1
2
3
npm run clean
npm run build
npm run preview:start

构建通过后，我又检查了生成后的 public/index.html。首篇文章的 tags 是 AI、Agent、Software Engineering，它们已经出现在 .article-index-tags 里，不再混在 .article-meta-wrap 那一行。

最后提交成：

1
feat: 优化首页文章标签展示

说到底，它只是一件博客维护小事。功能不大，但首页确实清爽了些。主题调整很多时候就是这样：每天都会看到，越看越硌眼，最后花半小时把它磨平。