TimeAmber
剪藏#剪藏#奇怪先生的笔记

BinNav-静态导航有后台，免费部署EdgeOne Pages或Cloudflare Pages

2026 年 2 月 27 日 约 1 分钟
分享Twitter / XTelegram微博
BinNav-静态导航有后台，免费部署EdgeOne Pages或Cloudflare Pages 封面

BinNav-静态导航有后台，免费部署EdgeOne Pages或Cloudflare Pages

一个现代化的网站导航页面，支持可视化管理后台、智能图标获取、拖拽排序、自动申请提交和邮件发送功能和自动部署更新。部署至EdgeOne Pages无需服务器或者Cloudflare Pages。

项目预览

原项目地址：https://github.com/sindricn/BinNav_Public

原项目样式：

Notion image

Notion image

修改后的样式：

Notion image

基于个人自用修改，仅供学习参考！

在原来项目的基础上使用AI修改： 1.1

  • • 添加自定义背景，半透明效果

  • • 添加居中布局，返回最顶层

  • • 添加自定义图标，自定义页脚 1.2

  • • 适配Cloudflare Pages 1.3

  • • 添加二次确认卡片

  • • 添加RSS sitemap索引 1.4

  • • AI优化了整体的构建和加载速度

  • • 添加背景api图片过渡

EdgeOne Pages部署

手动部署

    1. 下载压缩包BinNav_Public.zip https://wwbtv.lanzout.com/b0pnf424j 密码:am09
    1. 👉 创建一个项目到你自己账号下,解压出压缩包上传项目
    1. 登录EdgeOne，创建项目选择你创建后的仓库
    1. 添加环境变量并部署 Cloudflare Pages 流程一样 也可以直接在Pages创建项目，上传压缩包即可

⚙️ 环境变量配置

基础配置：项目可以零配置运行，但为了完整功能体验，建议配置以下环境变量：

ADMIN_PASSWORD 管理后台登录密码 否 admin 未设置时使用默认密码
GITHUB_TOKEN GitHub Personal Access Token 否 - 未设置时无法自动保存配置到GitHub
GITHUB_REPO GitHub仓库名（格式：用户名/仓库名） 否 - 未设置时无法自动保存配置到GitHub
RESEND_API_KEY Resend API Key，用于邮件服务 否 - 未设置时无法发送邮件通知
ADMIN_EMAIL 管理员邮箱，接收新站点提交通知 否 - 未设置时无法接收邮件通知
RESEND_DOMAIN Resend发送域名（仅域名部分） 否 - 未设置时无法发送邮件通知

功能说明：

  • • 基础功能：无需任何配置即可正常使用导航和管理后台

  • • 自动保存：需要配置 GITHUB_TOKEN 和 GITHUB_REPO

  • • 邮件通知：需要配置 RESEND_API_KEY、ADMIN_EMAIL 和 RESEND_DOMAIN

管理后台登录：

  • • 用户名：无需用户名，仅需密码

  • • 默认密码：admin（建议生产环境修改）

  • • 访问地址：/admin

GitHub Token 创建步骤：

    1. 访问 GitHub Settings > Tokens
    1. 点击 "Generate new token (classic)"
    1. 选择 repo 权限
    1. 复制生成的 token

✉️ Resend 邮件功能配置指南

BinNav 集成了 Resend 的邮件发送能力，用户可在前端页面填写反馈，自动发送邮件至指定邮箱。你只需完成以下三步，即可启用该功能：

✅ 步骤一：注册 Resend 账号

🔑 步骤二：创建 API Key

  • • 登录后，点击左侧菜单栏 API Keys

  • • 点击右上角 Create API Key

  • • 输入名称（如 BinNav Key），点击生成

  • • 复制生成的 key（如 re_xxxxxxxxxxxxxxxxx）并保存备用

🌐 步骤三：添加并验证发件域名（可使用免费二级域名）

  • • 左侧菜单进入 Domains → 点击 Add Domain

  • • 输入你的域名（如 yourdomain.com），或使用 Resend 提供的免费二级域名

  • • 按照提示添加 DNS 记录以完成验证

本地开发

JAVASCRIPT
# 1. 下载压缩包
https://wwbtv.lanzout.com/b0pnf424j
密码:am09 # 2. 安装依赖
npm install # 3. 启动开发服务器
npm run dev

访问地址：

原文地址: https://mp.weixin.qq.com/s?__biz=Mzk2NDUwNjY0OA==&mid=2247483742&idx=1&sn=c0f981f479e5b1cc09e3f3c194d7cdb3&chksm=c56fe350d1c96004c40fa7e4829c114a00c1fa27d014be4ee19dd04dcac9b32fa5b9ecb6f1ad&mpshare=1&scene=1&srcid=02278hlfoyra2Xsuk6ah3mzP&sharer_shareinfo=fdb190674f6a9de0d790ddc5ffb5a09d&sharer_shareinfo_first=fdb190674f6a9de0d790ddc5ffb5a09d#rd

相关文章