博客升级：导航栏新增'工具'菜单与图床服务

本次升级#

这次给博客加了个导航菜单：「工具」 > 「图床」。点开后通过新的标签页打开图床服务（https://gofor.hyperphp.com），不在站内跳转。

新增的菜单放在「文章」和「关于」之间，这样层级关系比较清晰：

• 主页 — 首页
• 文章 ▶ — 归档、分类、标签、系列
• 工具 ▶ — 图床（外链新窗口打开）
• 关于我 — 关于页面

为什么加图床#

图床是写博客时的刚需。写文章要配图，图床来解决：

1. 外链托管，不用把图片塞进博客仓库
2. 图片压缩与 CDN，博客页面的加载速度不拖后腿
3. 统一管理，以后所有文章的图片上传后都能直接引用

这个图床是一个基于 PHP 的单文件 S3 兼容存储端点（php-s3-lite），适配常见的 Hosting 环境，目标是轻量部署、直接能用。

技术方案#

博客用的是 Astro + 自定义 Firefly 主题，导航菜单数据在 src/config/navBarConfig.ts 里维护：

1
links.push({
2
  name: "工具",
3
  url: "#",
4
  icon: "material-symbols:build-outline",
5
  children: [
6
    {
7
      name: "图床",
8
      url: "https://gofor.hyperphp.com",
9
      external: true,
10
      icon: "material-symbols:image-outline",
11
    },
12
  ],
13
});

一个细节：子菜单只有一个时，框架默认会把单个子菜单 塌陷 成顶级链接。但外链菜单不能塌，否则「工具」菜单就少了一层，所以我改了一下 resolveNavMenuLinks：

1
if (filteredChildren.length === 1 && !filteredChildren[0].external) {
2
  return filteredChildren[0];
3
}

这样「工具 > 图床」就能正常展开成下拉，而「关于 > 关于我」的语义保持不变。

多语言#

新增的菜单文字同步补到了所有语言包：

部署流程#

博客的 CI/CD 很简单：

1. 修改源码 -> 推送到 GitHub（SSH 被禁，所以通过 GitHub API 的 Git Data 接口实现，不走 git push）
2. Cloudflare Pages 监听到推送，自动 pnpm run build，生成 dist
3. 构建成功后静态网站自动上架

本次升级过程中踩了一个坑：第一次推送时错误地把文件内容 base64 编码了，导致远端文件乱码，Pages 构建失败。发现后重新以原始文本推送，部署恢复成功。

总结#

这次升级的主要改动是加了「工具」菜单和图床入口。图床服务刚上线，后续我会继续优化，比如增加更多上传功能和更好的 CDN 加速。

如果你有什么有趣的工具想让我加到菜单里，欢迎在评论区告诉我。