一个 YAML 文件驱动的个人导航页，Fork → 编辑 → 部署，没有数据库，没有后台
- YAML 配置 — 所有内容集中在
src/config.yaml，改完即生效 - 零数据库 — 纯静态站点，不依赖任何后端服务
- 3000+ 图标 — Lucide + Simple Icons 自动按需生成，无需手动管理
- 三套主题 — Light / Dark / Ocean，玻璃拟态 UI
- 内置编辑器 — 访问
/edit直接在浏览器中修改配置 - 搜索 — 实时过滤
点击按钮会自动 Fork 本仓库并跳转到对应平台进行部署。
- Fork 本项目 — 点击右上角 Fork 按钮，复制仓库到你的 GitHub 账号
- 修改配置 — 编辑
src/config.yaml，填入你的个人信息和导航链接 - 连接部署平台 — 在 Cloudflare Pages / Vercel / Netlify 中导入你的 Fork 仓库
- 等待自动部署 — 平台检测到代码变更会自动构建，完成后即可通过分配的域名访问
- 绑定自定义域名（可选） — 在部署平台设置中添加你的域名，解析到对应 CNAME
后续更新只需修改 config.yaml 并 Push，平台会自动重新部署。也可访问 /edit 路径使用内置编辑器在线修改。
构建产物输出到 out/（Next.js 静态导出），可直接部署到任何静态托管平台。
| 平台 | 说明 |
|---|---|
| Cloudflare Pages | 使用 pages_build_output_dir = "out"，不要在 wrangler.toml 中添加 Workers 专用的 [assets] |
| Vercel | Next.js 原生支持，零配置 |
| Netlify | 构建命令 npm run build，发布目录 out |
git clone https://github.com/imzhoukunqiang/compass.git
cd compass && npm install
npm run dev打开 http://localhost:3000，开发服务器会监听 config.yaml 变更并自动重新生成图标。
编辑 src/config.yaml 即可自定义全部内容：
profile:
name: Compass
avatar: "icon:navigation"
description: Navigate Your World
bio: 快速访问常用网站和工具
settings:
theme: dark # light | dark | ocean
showSearch: true
categories:
- id: daily
name: Daily
icon: Calendar
color: "#3b82f6"
links:
- id: github
name: GitHub
url: https://github.com
icon: github
description: 代码托管平台| 类型 | 来源 | 命名 | 示例 |
|---|---|---|---|
| 通用 | Lucide | PascalCase | Calendar, Mail, Wrench |
| 品牌 | Simple Icons | 小写 | github, vercel, youtube |
图标从 config.yaml 自动提取生成到 icons-manifest.ts，无需手动维护。
src/
├── config.yaml # 唯一配置文件
├── app/
│ ├── page.tsx # 主页（服务端读取 YAML）
│ ├── components/ # UI 组件
│ ├── contexts/ # 客户端状态
│ ├── themes/ # 主题预设
│ ├── types/ # 类型定义
│ ├── globals.css # 全局样式
│ └── edit/ # 可视化编辑
└── data/
└── icons-manifest.ts # 自动生成（勿手动编辑）
修改 config.yaml → 提交 → 平台自动构建部署。也可通过 /edit 页面在线编辑后导出 YAML。
Next.js 14 · React 18 · TypeScript · Tailwind CSS · Framer Motion · Lucide · Simple Icons