现在位置: 首页 / 网建应用 / 正文

VidNav 免费开源的视频&网址导航系统

VidNav 是一个基于 Next.js 15 构建的现代化导航管理平台，集成了视频导航和网址导航两大核心功能。专为内容收藏、分类和管理而设计，通过 GitHub 作为数据存储后端，提供安全、可靠的导航数据管理体验。

双核心功能

🎬 视频导航

专注于视频内容的收藏和组织，支持 Bilibili 和 YouTube 平台的视频管理。

🔖 网址导航

全面的网站书签管理系统，帮助你收藏和整理常用网站、在线工具和资源。

核心亮点

    多平台视频支持：完美支持 Bilibili 和 YouTube 视频播放
    网址导航管理：收藏和管理你的常用网站和在线工具
    分类管理：灵活的分类和子分类系统，支持无限层级
    现代化界面：基于 Radix UI 和 Tailwind CSS 的精美界面
    GitHub 认证：基于 NextAuth.js 的安全登录
    响应式设计：完美适配桌面端和移动端
    主题切换：支持深色/浅色主题
    智能图标：自动获取网站 Favicon 和视频封面
    高性能：支持 Cloudflare Pages 边缘部署

核心特性

视频管理功能

    视频分类：支持多级分类和子分类，灵活组织视频内容
    视频配置：自动识别 Bilibili 和 YouTube 视频链接，提取视频信息
    封面管理：支持自定义上传视频封面图片
    内嵌播放：支持在站内直接播放 Bilibili 和 YouTube 视频
    详细信息：为每个视频添加标题、描述等详细信息
    拖拽排序：通过拖拽轻松调整视频和分类的顺序

网址导航功能

    网站收藏：快速收藏和管理你喜欢的网站
    分类组织：创建主分类和子分类，无限层级的目录结构
    智能图标：自动获取网站 Favicon，也可手动上传
    详细描述：为每个网站添加标题、描述等信息
    快速搜索：通过关键词快速定位网站
    一键访问：点击即可跳转到目标网站
    标签管理：使用图标和标签更好地组织内容
    拖拽排序：自由调整网站和分类的显示顺序

管理后台功能

    统一管理：视频和网址统一的后台管理系统
    ➕ 快速添加： 

      视频：粘贴视频链接即可添加 Bilibili 或 YouTube 视频
      网址：输入 URL 自动获取网站信息

    编辑功能：
    修改标题、描述、图标
    调整分类归属
    上传自定义封面/图标
    分类管理：创建、编辑、删除分类和子分类
    可视化编辑：Monaco Editor 支持 JSON 数据直接编辑
    智能搜索：快速定位内容和分类
    图标选择：集成 Lucide Icons 图标库

技术特性

    现代技术栈：Next.js 15 + React 18 + TypeScript
    UI 组件库：Radix UI + shadcn/ui
    图标系统：Lucide React 图标库
    状态管理：React Query 数据获取和缓存
    表单处理：React Hook Form + Zod 验证
    数据存储：GitHub 仓库作为数据后端
    身份认证：NextAuth.js v5 OAuth 认证

🛠️ 技术架构

技术栈 版本 用途
Next.js 15.5.7 React 全栈框架
React 18.2.0 用户界面库
TypeScript 5.1.6 类型安全的 JavaScript
Tailwind CSS 4.1.12 原子化 CSS 框架
NextAuth.js 5.0.0-beta.25 身份认证解决方案
Radix UI Latest 无障碍 UI 组件库
Lucide React 0.462.0 现代图标库
React Query 5.62.2 数据获取和状态管理
React Hook Form 7.53.2 表单处理
Zod 3.25.76 数据验证
Monaco Editor 0.52.2 代码编辑器

使用指南

视频导航使用

添加视频

    登录管理后台 /admin/videos
    点击"添加视频分类"或在现有分类中"添加视频"
    粘贴 Bilibili 或 YouTube 视频链接
    系统会自动识别视频平台并提取信息
    添加标题、描述、上传封面（可选）
    保存视频

视频链接支持

Bilibili:

    标准链接：https://www.bilibili.com/video/BVxxxxxxxxx

YouTube:

    标准链接：https://www.youtube.com/watch?v=xxxxxxxxxxx
    短链接：https://youtu.be/xxxxxxxxxxx

视频分类管理

    在管理后台创建主分类和子分类
    使用拖拽功能调整分类顺序
    为分类选择合适的图标（Lucide 图标）
    启用/禁用分类显示

网址导航使用

添加网站

    登录管理后台 /admin/navigation
    点击"添加导航分类"或在现有分类中"添加网站"
    输入网站 URL
    系统会自动获取：

      网站标题
      网站描述
      网站 Favicon 图标

    可以手动修改标题、描述
    可以上传自定义图标
    保存网站

网址分类管理

    创建分类：

      在管理后台点击"添加导航分类"
      输入分类名称和描述
      从 Lucide Icons 中选择合适的图标
      保存分类

    创建子分类：

      在主分类下添加子分类
      支持无限层级的分类结构
      每个子分类都可以有自己的图标和描述

    调整顺序：

      使用拖拽功能调整分类和网站的显示顺序
      支持跨分类拖拽

    批量管理：

      使用 Monaco Editor 直接编辑 JSON 数据
      支持批量导入和导出

通用功能

图标管理

Lucide Icons：

    项目集成了完整的 Lucide 图标库
    可用图标：Home, Star, BookOpen, Brain, Code 等
    访问 lucide.dev 查看所有可用图标

自定义图标：

    支持上传 PNG、SVG、WebP 等格式
    建议尺寸：256x256 像素
    自动优化和压缩

搜索功能

    在首页使用搜索框
    支持搜索：

      网站/视频标题
      描述内容
      分类名称

    实时搜索结果展示

故障排除

常见问题

认证失败

    检查 GITHUB_CLIENT_ID 和 GITHUB_CLIENT_SECRET 是否正确
    确认回调 URL 配置正确：http://localhost:3000/api/auth/callback/github

数据加载失败

    验证 GitHub 仓库配置（GITHUB_OWNER、GITHUB_REPO、GITHUB_BRANCH）
    检查仓库访问权限
    确认数据文件格式正确

视频无法播放

    检查视频链接是否有效
    确认 videoConfig 配置正确
    Bilibili 视频需要正确的 bvid、aid、cid
    YouTube 视频需要正确的视频 ID

构建失败

    检查 Node.js 版本（需要 20.0+）
    清理依赖：rm -rf node_modules pnpm-lock.yaml && pnpm install
    检查环境变量配置

贡献指南

我们欢迎所有形式的贡献！

    Fork 项目
    创建功能分支：git checkout -b feature/amazing-feature
    提交更改：git commit -m 'Add amazing feature'
    推送分支：git push origin feature/amazing-feature
    创建 Pull Request

📄 许可证

本项目基于 MIT License 开源协议。

致谢

    Next.js - 强大的 React 框架
    Tailwind CSS - 优秀的 CSS 框架
    Radix UI - 无障碍组件库
    shadcn/ui - 精美的 UI 组件
    Cloudflare Pages - 可靠的部署平台
    所有为项目做出贡献的开发者

⭐ 如果这个项目对你有帮助，请给我们一个 Star！

项目地址：https://github.com/tianyaxiang/vidnav

演示地址：https://vid.newkit.site/

转自：https://mp.weixin.qq.com/s/iBfJIvbF7sk7djhh0--_nQ