Vibe Coding了一个Hexo插件HTML站点地图扩展（hexo-sitemap-html)

(Updated: )
SEO,开发

hexo-sitemap-html插件发布记：一键生成Hexo可视化HTML站点地图，兼顾SEO与用户体验

基于Hexo API开发，全程采用Vibe Coding模式（Gemini 3 + 豆包 + Trace 辅助），仅提供核心开发思路并人工干预解决API兼容Bug，2小时完成从构思到npm发布的全流程。若排除版本兼容问题，纯功能实现仅需20分钟——如今简单工具类开发，已无需手写大量代码，AI辅助+少量人工校验即可高效产出可用成果😆。

这个插件已正式发布至npm仓库，欢迎直接安装使用：hexo-sitemap-html - npm 官方包

欢迎在GitHub上提交Issue反馈问题、提出优化建议，或点亮Star给予支持：hexo-sitemap-html - GitHub 源码仓库

开发初衷：Hexo可视化站点地图，兼顾SEO与用户体验

Hexo生态的站点地图插件多以 sitemap.xml 或 sitemap.txt 格式为主，这类格式的核心价值是服务搜索引擎爬虫（供Google Search Console、百度资源平台等站长工具提交，帮助爬虫快速发现站点所有可索引页面），但存在一个明显短板——对普通用户不友好，可读性极差。

  1. 对搜索引擎：除了XML格式的“爬虫导航”，HTML格式的站点地图可辅助爬虫理解站点架构，提升内链权重传递效率，尤其对长尾页面的收录有一定辅助作用；
  2. 对普通用户/站点运营者：HTML格式的站点地图可视化程度高，无需额外工具即可在浏览器中直接查看，既能帮助访客快速定位所需内容，也能让运营者直观校验站点页面是否完整、分类是否合理。

想起来SEO工具RankMath的站点地图设计——它同时提供两种格式：XML格式专供搜索引擎爬虫抓取，HTML格式面向用户和运营者。但在实际工作中，我发现很多用户混淆了二者的用途，甚至将HTML站点地图提交至Google Search Console（GSC），导致GSC无法识别并返回抓取错误。此前我在Google Search Console Community中，也多次为这类用户解答相关疑问。

AI辅助高效产出，版本兼容Bug成为唯一卡点

本次开发全程基于Hexo官方API文档，核心思路是“AI生成核心代码 + 人工把控业务逻辑 + 针对性解决兼容问题”。

核心流程：AI辅助实现快速落地

我仅向AI提供了以下核心开发需求，其余细节均由AI自主完善：

  • 支持Hexo两种生成方式：hexo generate 自动触发、hexo sitemap-html 独立命令触发；
  • 提供可配置的站点地图样式（简约/现代/丰富），满足不同用户审美需求；
  • 支持自动排除指定页面、nofollow属性配置；
  • 兼容Hexo 5.x+ 所有版本，生成的/sitemap.html文件可直接通过域名访问。

借助Gemini 3、豆包、Trace的辅助，核心代码很快就生成完成，包括数据读取、HTML拼接、文件写入、Hexo钩子注册等功能，基本实现了预期需求。

卡点解决：Hexo API更新导致的自定义命令兼容问题

开发过程中，唯一陷入循环的卡点是自定义命令注册与Hexo最新API不兼容。Trace最初生成的代码基于旧版Hexo API，导致执行hexo sitemap-html时出现报错，且Trace多次优化后仍坚信自己的代码正确（实时查询的API文档存在滞后）。

最终通过查阅Hexo官方最新API文档，人工干预修改了自定义命令的注册逻辑，同时补充了多层空值保护（避免站点无分类、无文章时出现Cannot read properties of undefined错误），最终解决了兼容问题，插件顺利运行并生成符合预期的HTML站点地图。

最后发布到npm

排除中途处理其他事务的时间，实际开发耗时仅2小时，其中大部分时间都用于解决API兼容Bug。若排除该问题，纯功能实现与优化仅需20分钟——这也让我深刻感受到，如今AI在工具类开发中的效率优势，开发者只需聚焦于核心业务逻辑和问题排查，无需再花费大量时间编写重复的底层代码。

插件核心功能：兼顾实用性、美观性与可配置性

hexo-sitemap-html插件的核心亮点在于“开箱即用、功能完善、高度可配置”，具体功能如下：

  1. 双生成命令，灵活便捷：支持hexo generate（整站生成时自动触发）和hexo sitemap-html（独立生成，可选-f强制覆盖）两种方式，满足不同使用场景；
  2. 三种预设样式，颜值在线：提供「简约」「现代」「丰富」三种布局样式，默认采用现代风，用户可在配置文件中自由切换，生成的站点地图适配移动端与桌面端；
  3. 实用配置项，满足个性化需求：支持自动排除指定页面、开启nofollow属性、注入主题导航栏，无需修改源码即可实现个性化定制；
  4. 高可读性结构，兼顾用户与爬虫：按「文章归档」「分类目录」「独立页面」三大模块整理内容，标注发布日期与文章数量，既方便用户查看，也利于爬虫理解站点架构；
  5. 无额外依赖，轻量高效：基于Hexo内置依赖与lodash、hexo-fs开发，安装后无需额外配置，不增加Hexo项目打包体积。

你可以直接访问我的站点地图查看实际效果：我的Hexo博客HTML站点地图

使用指南：3步生成专属HTML站点地图

步骤1：安装插件（Hexo项目根目录执行）

在你的Hexo博客根目录下，打开终端执行以下安装命令：

1
2
npm install hexo-sitemap-html --save
yarn add hexo-sitemap-html

步骤2：生成HTML站点地图

两种生成方式任选其一：

  1. 独立生成（仅生成站点地图，不影响其他文件）：
    1
    2
    3
    4
    5
    # 普通生成
    hexo sitemap-html

    # 强制覆盖已有sitemap.html文件
    hexo sitemap-html -f
  2. 整站生成（随整站编译自动生成，推荐日常使用）：
    1
    hexo clean && hexo generate

步骤3：访问与配置（可选）

  1. 访问站点地图：生成完成后，可通过「你的博客域名/sitemap.html」直接访问，例如https://example.com/sitemap.html；
  2. 个性化配置：若需修改默认配置（如切换样式、排除指定页面），可在Hexo根目录_config.yml文件中添加相关配置，详细配置说明请参考插件GitHub README文档。

如果您在使用过程中遇到问题，或有更好的优化建议，欢迎在GitHub仓库提交Issue，我会第一时间响应与处理。同时也欢迎各位开发者参与共建，一起让这款插件变得更加强大。

hexo-sitemap-html插件的开发过程让我再次感受到AI辅助开发的高效与便捷——它不仅能大幅提升开发效率，还能让开发者从重复的底层代码中解放出来，更专注于核心业务逻辑与产品价值的打磨。

对于Hexo博客用户而言，一款优质的HTML站点地图不仅能提升站点的用户体验，还能为SEO优化提供一定辅助。希望这款插件能为各位Hexo博客运营者带来帮助，也期待能收到更多社区朋友的反馈与支持。

最后，再次附上插件的npm地址与GitHub仓库地址，欢迎大家安装使用、点亮Star：