CloudNav-abcd部署教程 | TR Note 个人笔记

type

Post

status

Published

date

Feb 16, 2026

slug

cloudnav-abcd2

summary

本应用完全基于 Cloudflare Pages + KV 构建，无需服务器，永久免费。

category

部署教程

icon

password

网址

📋 简明部署步骤 (适合有经验用户)

Fork 项目: 点击右上角 Fork 按钮，将本项目克隆到您的 GitHub 账号。

创建 Pages 应用: 登录 Cloudflare Dashboard -> Workers & Pages -> 创建应用程序 -> Pages -> 连接到 Git -> 选择 CloudNav-abcd

配置构建:

框架预设: 无 (None)

构建命令: npm run build

创建数据库: 在 Workers & Pages -> KV 中创建一个新的命名空间，命名为 CLOUDNAV_DB

绑定变量:

进入 Pages 项目设置 -> 绑定 (Bindings) -> 添加 KV 命名空间 -> 变量名填 CLOUDNAV_KV，值选择刚才创建的 CLOUDNAV_DB

进入环境变量 (Environment variables) -> 添加变量 PASSWORD，值为您的访问密码。

部署: 重新部署项目即可。

📖 保姆级图文教程 (适合新手)

如果您是第一次使用 Cloudflare，请严格按照以下步骤操作。

第一步：点击创建应用程序

第二步：点击右下角 Get started

第三步：导入现有你已经 fork 的仓库

第四步：这里选你自己 fork 的仓库名称

第五步：按图中填写，其他默认

第六步：左侧找到 Workers KV 点击右侧新建

第七步：空间名称填写 CLOUDNAV_DB（建议复制）

第八步：绑定 KV 数据库

回到刚才的 pages 设置页面找到绑定-右侧下滑找到 kv 命名空间，变量名称填写 CLOUDNAV_KV（建议复制）

第九步：设置访问密码

设置中找到变量和机密-填入 PASSWORD（建议复制）下面的值填入你自己要设置的密码，这一步是你登录导航页需要的登录密码

第十步：添加自定义域名（可选项）

🎉 所有设置结束后，请务必到部署页面点击“重新部署” (Create New Deployment)，项目即可正常使用！

⚙️ 使用指南

1. Chrome 扩展程序 (推荐)

点击侧边栏左下角的 “设置” -> “扩展工具”。系统会自动根据您的域名生成 3 个文件代码 (manifest.json, popup.html, popup.js)。

在电脑新建文件夹，保存这 3 个文件。

打开 Chrome 扩展管理页 (chrome://extensions)。

开启右上角 “开发者模式”。

点击 “加载已解压的扩展程序”，选择刚才的文件夹。

以后浏览网页时，点击插件图标即可弹出窗口，选择分类并保存。

2. 配置 AI 服务

点击侧边栏底部的 “设置” -> “AI 设置”：

提供商: Google Gemini 或 OpenAI 兼容 (DeepSeek等)。

Key & Model: 输入 API Key 和模型名称。

一键补全: 点击底部的 “一键补全所有描述”，AI 将自动扫描所有无描述的链接并后台生成。

3. WebDAV 备份

点击侧边栏的 “备份” 图标，配置 WebDAV 信息 (如坚果云)，即可一键上传备份到云端。

4. 本地数据导出 (Local Data Export)

点击侧边栏的 “备份” 图标 -> “导出 HTML”。

生成的 HTML 文件完全兼容 Chrome、Edge、Firefox 等主流浏览器的导入格式。

如何导入到浏览器 (以 Chrome 为例):

打开 Chrome 浏览器，点击右上角菜单 -> 书签与清单 -> 书签管理器。

点击页面右上角的三个点图标 -> 导入书签。

选择刚才从云航下载的 HTML 文件即可恢复所有书签。

TRNote