仿iCloud 风格响应式导航页面源码

前言

这个一个仿iCloud的完整的导航网站带后台管理。可直接部署到Cloudflare Workers 上，数据存储到KV里面。无需其他依赖，所有功能都已实现。

效果演示

演示地址：https://dh.777171.xyz/

已实现的功能

1. 完整的导航网站功能：

   • 响应式设计，支持 PC、平板、手机
   • 外网/内网切换功能
   • 搜索功能（默认使用 Google 搜索）
   • 站点图标展示

2. 后台管理系统：

   • 管理员登录验证
   • 网站基本信息配置
   • 外网站点管理
   • 内网站点管理
   • 搜索引擎管理

3. 数据存储：

   • 使用 Cloudflare KV 存储配置
   • 默认配置作为备份

部署说明

1. 创建 Cloudflare Workers

1. 登录 Cloudflare 控制台
2. 进入 Workers 和 Pages
3. 创建新 Worker
4. 复制上面的代码到编辑器

2. 绑定 KV 命名空间

1. 在 Workers 设置中，找到 KV 命名空间绑定
2. 添加新绑定：
   • 变量名称：NAV_CONFIG
   • KV 命名空间：选择现有或创建新的（名称为 NAV_CONFIG）

3. 设置环境变量

1. 在 Workers 设置中，找到环境变量
2. 添加变量：
   • 名称：ADMIN_PASSWORD
   • 值：设置你的管理员密码

4. 部署和测试

1. 保存并部署 Worker
2. 访问你的 Worker 域名
3. 后台管理地址：https://你的worker域名/admin
4. 登录密码：环境变量设置的 ADMIN_PASSWORD 或默认 admin123

使用建议

1. 安全性：

   • 务必设置 ADMIN_PASSWORD 环境变量
   • 不要使用默认密码
   • 定期更换密码

2. 配置管理：

   • 首次访问会自动创建默认配置
   • 通过后台管理界面修改所有设置
   • 配置会自动保存到 KV

3. 自定义：

   • 可以修改 DEFAULT_CONFIG 中的默认值
   • CSS 样式可以根据需要调整
   • 响应式断点可以根据实际需求调整

这个代码可以直接部署到 Cloudflare Workers，无需其他依赖，所有功能都已实现。