# StartPage

**Repository Path**: tonmyn/start-page

## Basic Information

- **Project Name**: StartPage
- **Description**: 基于 EdgeOne Pages + Edge Functions + KV 存储 构建的零服务器导航主页，支持多搜索引擎、分类导航、后台数据管理。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2026-06-11
- **Last Updated**: 2026-08-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 🧭 EdgeOne 导航主页

基于 **EdgeOne Pages + Edge Functions + KV 存储** 构建的零服务器导航主页，支持多搜索引擎、分类导航、后台数据管理。

## ✨ 功能特性

- 🔍 **多搜索引擎支持** - 百度、Google、必应、DuckDuckGo、GitHub、知乎、Bilibili 一键切换
- 📂 **分类导航** - 支持自定义分类和链接，卡片式布局
- ⚡ **Edge Functions 后端** - 无需服务器，边缘节点运行 JavaScript
- 💾 **KV 存储** - 数据持久化存储在 EdgeOne KV 中
- 🌐 **全球加速** - 依托 EdgeOne 全球边缘节点，访问速度极快
- 🌙 **暗色模式** - 自动适配系统暗色模式
- 📱 **响应式设计** - 完美适配手机、平板、电脑

## 📁 项目结构

```
.
├── edge-functions/
│   └── api/
│       ├── nav/
│       │   └── index.js      # 导航数据 API（GET/POST）
│       ├── search/
│       │   └── index.js      # 搜索引擎 API
│       ├── private/
│       │   └── index.js      # 隐私链接 API
│       ├── bing/
│       │   └── index.js      # Bing 壁纸 API
│       └── groups/
│           └── index.js      # 分组文件加载 API
├── src/
│   ├── icons/                # 本地图标文件夹
│   │   ├── baidu.svg
│   │   ├── github.svg
│   │   └── bilibili.svg
│   ├── group/                # 分组链接文件夹
│   │   ├── 01_搜索引擎.json
│   │   ├── 02_开发工具.json
│   │   └── 03_设计资源.json
│   └── index.html            # 前端页面
├── edgeone.json              # EdgeOne 路由和缓存配置
├── package.json              # 项目配置
└── README.md                 # 本文件
```

## 🚀 部署步骤

### 1. 创建 KV 存储命名空间

1. 登录 [EdgeOne 控制台](https://console.cloud.tencent.com/edgeone)
2. 左侧导航栏选择 **KV 存储**
3. 点击 **创建命名空间**
4. 填写名称：`nav_data`
5. 选择存储区域：**全球分布式**
6. 点击确定

### 2. 绑定 GitHub 仓库

1. 在 EdgeOne Pages 控制台，点击 **绑定 GitHub**
2. 授权 EdgeOne 访问你的 GitHub 仓库
3. 点击 **创建项目** → **从已有仓库导入**
4. 选择本项目仓库

### 3. 配置构建参数

| 配置项 | 值 |
|--------|-----|
| 构建命令 | `npm run build` |
| 输出目录 | `src` |
| 部署分支 | `main` |

### 4. 关联 KV 存储

1. 进入项目设置
2. 找到 **KV 存储绑定**
3. 选择刚才创建的 `nav_data` 命名空间
4. 绑定变量名填写：`nav_data`

### 5. 部署静态资源

点击 **开始部署**，等待静态资源部署完成。

### 6. 部署边缘函数（Edge Functions）

本项目包含多个边缘函数 API，需要在 EdgeOne 控制台单独部署：

#### 6.1 启用边缘函数

1. 进入项目详情页
2. 点击左侧 **边缘函数**
3. 点击 **创建函数**
4. 选择区域：**全球分布式**
5. 函数名称：`nav-api`
6. 描述：`导航主页 API 函数`
7. 运行环境：**Node.js 18.x**
8. 复制以下代码到函数编辑器：

```javascript
// 主函数入口
export async function fetch(request, env) {
  const url = new URL(request.url);
  const path = url.pathname;

  // 路由分发
  if (path.startsWith('/api/groups')) {
    const { default: handler } = await import('./groups/index.js');
    return handler.fetch(request, env);
  }
  if (path.startsWith('/api/search-config')) {
    const { default: handler } = await import('./search-config/index.js');
    return handler.fetch(request, env);
  }
  if (path.startsWith('/api/private')) {
    const { default: handler } = await import('./private/index.js');
    return handler.fetch(request, env);
  }
  if (path.startsWith('/api/bing')) {
    const { default: handler } = await import('./bing/index.js');
    return handler.fetch(request, env);
  }
  
  return new Response('Not Found', { status: 404 });
}
```

#### 6.2 创建子函数

在函数编辑器中创建以下文件（通过"添加文件"按钮）：

**groups/index.js**
```javascript
// 读取 src/group/*.json 文件
export async function fetch(request, env) {
  // 实现分组数据读取逻辑
}
```

**search-config/index.js**
```javascript
// 读取搜索引擎配置
export async function fetch(request, env) {
  // 实现搜索引擎配置读取逻辑
}
```

**private/index.js**
```javascript
// 隐私链接 API，使用 KV 存储
export async function fetch(request, env) {
  const kv = env.nav_data;
  // 实现隐私链接的设置、验证和获取
}
```

**bing/index.js**
```javascript
// Bing 壁纸 API
export async function fetch(request, env) {
  // 实现 Bing 壁纸代理逻辑
}
```

#### 6.3 绑定 KV 存储

1. 进入函数详情页
2. 点击 **设置** → **环境变量**
3. 添加变量：
   - 名称：`nav_data`
   - 值：选择之前创建的 KV 命名空间
4. 点击 **保存**

#### 6.4 配置触发路由

1. 进入函数详情页
2. 点击 **触发管理**
3. 点击 **添加触发路径**
4. 配置：
   - 触发路径：`/api/*`
   - 请求方法：**全部**
   - 缓存配置：**不缓存**（API 需要实时数据）

### 7. 配置自定义域名（可选）

1. 在项目设置中点击 **添加域名**
2. 输入你的域名（如 `home.example.com`）
3. 按提示添加 DNS 记录
4. 等待 SSL 证书自动签发

### 8. 验证部署

部署完成后访问你的域名，检查：
- ✅ 主页是否正常加载
- ✅ 导航分组是否显示
- ✅ 搜索引擎切换是否正常
- ✅ 隐私链接功能是否可用（如已配置）

## 🔧 自定义导航数据

### 图标路径格式

导航链接的 `icon` 字段支持三种格式：

| 格式 | 示例 | 说明 |
|------|------|------|
| 远程 URL | `https://www.baidu.com/favicon.ico` | 从远程服务器加载图标 |
| 本地文件名 | `baidu.svg` | 从 `src/icons/` 文件夹加载 |
| 绝对路径 | `/icons/baidu.svg` | 完整的本地路径 |

### 方式一：通过 API 修改（推荐）

```bash
# 更新导航数据
curl -X POST https://你的域名/api/nav \
  -H "Content-Type: application/json" \
  -d '{
    "categories": [
      { "id": "search", "name": "搜索引擎", "icon": "🔍" }
    ],
    "links": [
      { "id": 1, "categoryId": "search", "title": "百度", "url": "https://www.baidu.com", "desc": "百度一下", "icon": "baidu.svg" },
      { "id": 2, "categoryId": "search", "title": "Google", "url": "https://www.google.com", "desc": "谷歌搜索", "icon": "https://www.google.com/favicon.ico" }
    ]
  }'
```

### 方式二：添加本地图标

1. 将图标文件（推荐 SVG 格式）放入 `src/icons/` 文件夹
2. 在导航数据中使用文件名作为 icon 值，例如：`"icon": "my-icon.svg"`

### 方式三：直接修改代码

编辑 `edge-functions/api/nav/index.js` 中的 `getDefaultNavData()` 函数，然后重新部署。

### 方式四：通过 EdgeOne CLI

```bash
# 安装 CLI
npm install -g edgeone

# 登录
edgeone login

# 本地开发
edgeone pages dev

# 部署
edgeone pages deploy
```

## 📝 API 接口

| 接口 | 方法 | 说明 |
|------|------|------|
| `/api/nav` | GET | 获取导航数据 |
| `/api/nav` | POST | 更新导航数据 |
| `/api/search?q=关键词&engine=baidu` | GET | 获取搜索跳转 URL |
| `/api/search` | GET | 获取搜索引擎列表 |
| `/api/private` | GET | 检查是否存在隐私链接 |
| `/api/private` | POST | 设置/验证隐私链接密码 |

## 🔐 隐私链接功能

隐私链接数据存储在 KV 中，不在代码仓库中，即使仓库公开也不会泄露。

### 设置隐私链接

```bash
curl -X POST https://你的域名/api/private \
  -H "Content-Type: application/json" \
  -d '{
    "action": "set",
    "password": "你的密码",
    "privateLinks": [
      { "title": "私人网盘", "url": "https://example.com/private", "desc": "仅自己可见", "icon": "🔐" },
      { "title": "工作后台", "url": "https://work.example.com", "desc": "工作系统", "icon": "💼" }
    ]
  }'
```

### 修改隐私链接

再次调用上面的接口即可更新密码和链接。

### 功能特点

- 密码和链接数据存储在 **EdgeOne KV** 中
- 仓库代码中**不包含**任何隐私链接
- 输入正确密码后才能查看隐私链接
- 界面会显示"🔒 隐私链接"区域（锁定状态）
- 解锁后显示为"🔓 隐私链接"区域（已解锁状态）

## 📂 分组链接文件

可以通过在 `src/group/` 文件夹中创建 JSON 文件来管理导航分组。

### 文件命名规则

文件名格式：`序号_分组名.json`

| 序号 | 文件名示例 | 分组名称 |
|------|-----------|---------|
| 01 | `01_搜索引擎.json` | 搜索引擎 |
| 02 | `02_开发工具.json` | 开发工具 |
| 03 | `03_设计资源.json` | 设计资源 |

**序号规则**：
- 按数字升序排列
- 支持两位数（01-99）
- 缺少序号默认为 99
- 重复序号时，后读取的覆盖前一个

### 文件格式

```json
{
  "name": "分组名称",
  "icon": "🔍",
  "links": {
    "https://www.example.com": "图标路径或URL",
    "https://www.baidu.com": "baidu.svg",
    "https://www.google.com": "https://www.google.com/favicon.ico"
  }
}
```

### 图标路径规则

| 格式 | 示例 | 说明 |
|------|------|------|
| 本地文件名 | `baidu.svg` | 从 `src/icons/` 加载 |
| 远程 URL | `https://xxx/favicon.ico` | 从远程加载 |

### 添加新分组

1. 在 `src/group/` 文件夹创建新文件，如 `05_生活服务.json`
2. 按上述格式编写内容
3. 提交代码并重新部署

### 优先级说明

系统按以下顺序加载导航数据：

1. `src/data/*.json` 分组文件（优先）
2. `/api/nav` API（备用）
3. 前端默认数据（兜底）

## 🎨 自定义样式

编辑 `src/index.html` 中的 CSS 变量：

```css
:root {
  --primary: #3b82f6;        /* 主题色 */
  --bg: #f8fafc;             /* 背景色 */
  --card-bg: #ffffff;        /* 卡片背景 */
  --text: #1e293b;           /* 文字颜色 */
  --radius: 12px;            /* 圆角大小 */
}
```

## 📄 License

MIT License