Cloudflare Workers 搭建个人导航站带后台管理完整教程

用 Cloudflare Workers + KV 存储，零成本搭建一个带可视化后台的个人导航站，支持多级目录、密码保护和数据持久化。

前言

本文将带你使用 Cloudflare Workers + KV 存储，搭建一个功能完整的个人导航站，包含首页导航、4 个子目录、可视化后台管理系统。

核心特点：

• ✅ 完全免费（Cloudflare 免费额度）
• ✅ 数据持久化存储（KV）
• ✅ 可视化后台管理
• ✅ 支持页面密码保护
• ✅ 开箱即用

效果演示： https://nav.hiir.cn/

一、准备工作

二、创建 KV 命名空间

1. 登录 Cloudflare Dashboard
2. 左侧菜单点击 Workers & Pages → KV
3. 点击 创建命名空间
4. 名称填写：NAV_DH，点击创建

三、创建 Worker 并绑定 KV

3.1 创建 Worker

1. 点击 Workers & Pages → 创建应用程序
2. 选择 创建 Worker，输入名称（如 my-nav）
3. 点击 部署

3.2 绑定 KV

1. 进入 Worker 详情页 → 设置 选项卡
2. KV 命名空间绑定 → 添加绑定
   • 变量名称：NAV_DH
   • KV 命名空间：选择刚才创建的
3. 点击 保存

3.3 设置管理员密码

在 环境变量 中添加：

勾选 加密，点击 保存。

四、完整 Worker 代码

代码较长，见原文附件。将代码粘贴到 Worker 编辑器中并部署即可。

五、初始化 KV 数据

5.1 进入 KV

Workers & Pages → KV → 点击 NAV_DH

5.2 添加数据

点击 添加条目：

• 键：site_config
• 值：粘贴以下 JSON

{
  "title": "我的导航",
  "subtitle": "My Navigation",
  "logo_icon": "home",
  "hitokoto": true,
  "search": true,
  "startDate": "2026-09-06",
  "global_password_enabled": false,
  "global_password": "admin",
  "global_password_hint": "请输入访问密码",
  "global_password_error": "密码错误，请重试",
  "page_passwords": {
    "home": { "enabled": false, "password": "", "hint": "", "error": "" },
    "bookmarks": { "enabled": false, "password": "", "hint": "", "error": "" },
    "files": { "enabled": false, "password": "", "hint": "", "error": "" },
    "ai-tools": { "enabled": false, "password": "", "hint": "", "error": "" },
    "free-resources": { "enabled": false, "password": "", "hint": "", "error": "" }
  },
  "search_engine": [
    { "name": "谷 歌", "template": "https://www.google.com/search?q=$s" },
    { "name": "百 度", "template": "https://www.baidu.com/s?wd=$s" },
    { "name": "必 应", "template": "https://www.bing.com/search?q=$s" },
    { "name": "搜 狗", "template": "https://www.sogou.com/web?query=$s" }
  ],
  "sub_sites": [
    { "id": "bookmarks", "name": "网络书签", "icon": "bookmark", "path": "/bookmarks", "lists": [] },
    { "id": "files", "name": "私人文件", "icon": "folder", "path": "/files", "lists": [] },
    { "id": "ai-tools", "name": "AI工具", "icon": "robot", "path": "/ai-tools", "lists": [] },
    { "id": "free-resources", "name": "免费资源", "icon": "gift", "path": "/free-resources", "lists": [] }
  ],
  "lists": [
    { "name": "常用导航", "icon": "home", "list": [] }
  ]
}

点击 保存。

六、访问你的导航站

后台默认密码：admin123（或你在环境变量中设置的密码）

七、自定义指南

修改网站标题

在后台管理页面直接修改，或编辑 KV 中 site_config 的 title 字段。

添加首页链接

在后台管理页面添加，或编辑 KV 中 lists 数组，向对应分组的 list 中添加条目。

为子站配置访问密码

编辑 KV 中 page_passwords 对应子站的 enabled、password、hint、error 字段。

常用图标

图标库参考：https://semantic-ui.com/elements/icon.html

八、常见问题

九、总结

技术栈：

• Cloudflare Workers（Serverless 计算）
• Cloudflare KV（数据存储）
• Semantic UI（前端样式）

功能清单：

• ✅ 首页导航 + 多搜索引擎
• ✅ 4 个子目录（书签、文件、AI 工具、免费资源）
• ✅ 可视化后台管理
• ✅ 全局/独立页面密码保护
• ✅ 数据持久化存储
• ✅ 响应式设计

现在就开始搭建属于你自己的导航站吧！🚀

最后附上完整的workers代码