颜值即正义！BinNav 深度解析：可视化后台+自动部署的“终极导航站”

在过去，修改静态导航站需要“改代码 -> 提交 -> 构建”。而 BinNav 彻底改变了游戏规则：你只需要在后台点点鼠标，剩下的提交和部署，它自己会去跟 GitHub 沟通。

---

🌟 核心特性合集

1. 现代化视觉交互

• 响应式设计：不仅在 PC 端惊艳，在移动端也拥有完美的卡片布局和侧边栏。
• 毛玻璃效果：符合 2026 年主流审美，支持流畅的动画过渡。
• 智能图标系统：自动获取网站 Favicon，支持多种回退方案，再也不用手动找图标了。
• AI 增强视觉（来自 1.4 版）：添加了背景 API 图片过渡和半透明磨砂效果，氛围感十足。

2. 强大的可视化后台 (/admin)

• 拖拽排序：网站和分类都能通过鼠标直接拖拽调整顺序。
• 待审核管理：支持用户提交申请，管理员在后台一键过审，极具社区互动性。
• 一键保存：点击保存后，配置自动同步到 GitHub，无需触碰任何 Git 命令。

---

🏗️ 环境变量配置手册 (核心必看)

这是 BinNav 能够“跑起来”的灵魂。请在部署平台（EdgeOne 或 Cloudflare）中务必配齐：

变量名	描述	默认值	作用强度
ADMIN_PASSWORD	后台登录密码	admin	高（建议必改，保护资产安全）
GITHUB_TOKEN	GitHub 个人令牌	–	极高（不配则无法在后台保存修改）
GITHUB_REPO	仓库名 (格式: 用户/仓库)	–	极高（指定数据同步的终点）
RESEND_API_KEY	Resend API Key	–	中（用于接收用户提交通知）
ADMIN_EMAIL	接收通知的邮箱	–	中（配合 Resend 使用）

---

📦 部署指南：两种主流方案

方案 A：Tencent EdgeOne (国内推荐 🇨🇳)

得益于 EdgeOne 的赞助，该方案在国内访问速度极快，且有免费套餐。

1. Fork 仓库：先将项目 Fork 到你的 GitHub 账号。
2. 创建项目：登录 EdgeOne，选择 Pages 项目，关联刚 Fork 的仓库。
3. 注入变量：在环境变量设置中填入 GITHUB_TOKEN 等信息。
4. 部署成功：EdgeOne Functions API 会让后台响应速度提升约 80%。

方案 B：Cloudflare Pages (全球通用 🌐)

适合海外用户或纯 IPv6 环境。

1. 上传/关联：直接上传压缩包或关联 GitHub 仓库。
2. 构建指令：npm run build，输出目录为 dist。
3. 域名绑定：CF 自动提供 SSL，支持 WebSocket，配合 AI 1.2 版适配非常完美。

---

🛠️ 进阶：如何获取你的 GitHub Token？

很多新手卡在这里，小编带你“盲操”：

1. 打开 GitHub Settings > Tokens (Classic)。
2. 点击 Generate new token (classic)。
3. 名字随意（如 BinNav-Sync），过期时间设为无限制。
4. 勾选权限：务必勾选 repo 全项（这是修改文件的权限）。
5. 复制那一串 ghp_ 开头的字符，存入环境变量。

---

📝 小编复盘与避坑指南

💡 小编提醒：

• 保存延迟：由于静态站的特性，你在后台点击“保存”后，GitHub 会触发一次 Action 构建。这意味着修改不是实时生效的，通常需要等待 1-2 分钟。
• 本地备份：如果由于网络原因 GitHub Token 失效，后台支持“下载配置文件”，你可以手动把配置文件下载下来覆盖仓库里的数据。
• 安全第一：默认密码 admin 必须改掉，否则你的导航站可能变成别人的推广位！

---

🔗 项目资源速查

资源类别	链接 / 路径
源码参考	sindricn/BinNav_Public
管理后台	你的域名/admin
默认密码	admin
技术栈	Vue 3 + Vite + Tailwind CSS

小编结语：BinNav 是那种“部署一次，受用一年”的项目。它极简但功能闭环，非常适合作为个人自媒体、技术博主或者团队内部的资源入口。