### [颜值即正义！BinNav 深度解析：可视化后台+自动部署的“终极导航站”](https://www.qiqiwa.com/article/424)

**Published:** 2026-03-04T13:04:39

**Author:** Hello

**Excerpt:** 在过去，修改静态导航站需要“改代码 -> 提交 -> 构建”。而 BinNav 彻底改变了游戏规则：你只需要在后台点点鼠标，剩下的提交和部署，它自己会去跟 GitHub 沟通。 🌟 核心特性合集 1. 现代化视觉交互 2. 强大的可视化后台

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

**页面展示**

![](https://www.qiqiwa.com/wp-content/uploads/2026/03/cfa575bf9620260304204544.png)

![](https://www.qiqiwa.com/wp-content/uploads/2026/03/2cc3663dec20260304204544.png)

[](https://github.com/sindricn/BinNav_Public#%E9%A6%96%E9%A1%B5%E5%B1%95%E7%A4%BA)

[](https://github.com/sindricn/BinNav_Public#%E7%AE%A1%E7%90%86%E5%90%8E%E5%8F%B0)

* * *

## 🌟 核心特性合集

### 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)](https://github.com/settings/tokens)。
2.  点击 **Generate new token (classic)**。
3.  名字随意（如 `BinNav-Sync`），**过期时间设为无限制**。
4.  **勾选权限**：务必勾选 **`repo`** 全项（这是修改文件的权限）。
5.  复制那一串 `ghp_` 开头的字符，存入环境变量。

* * *

## 📝 小编复盘与避坑指南

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

* * *

## 🔗 项目资源速查

| **资源类别** | **链接 / 路径** |
| --- | --- |
| **源码参考** | [sindricn/BinNav\_Public](https://github.com/sindricn/BinNav_Public) |
| **管理后台** | `你的域名/admin` |
| **默认密码** | `admin` |
| **技术栈** | Vue 3 + Vite + Tailwind CSS |

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

**Tags:** 开源项目

**Categories:** 项目笔记

---