🚀 Vichi Blog - 现代化全栈博客系统

Vichi Blog 是一个技术领先、用户体验卓越的现代全栈博客系统。采用最新的 Next.js 16 (App Router) 架构，结合 Sakura (樱花) 视觉主题，旨在打造一个既有极客感又不失美感的个人知识管理与展示平台。

🎯 项目定位

技术展示：采用最新的前端技术栈，展示现代全栈开发能力
个人博客：为开发者和内容创作者提供专业的博客平台
开源学习：作为开源项目，供开发者学习和参考
可定制化：支持主题切换和功能扩展，满足不同用户需求

✨ 核心特性

🎨 视觉动效

樱花飘落动效：动态樱花花瓣飘落，营造沉浸式体验
Glitch 故障文本特效：Hero 区域采用故障艺术风格标题
波浪形过渡动画：页面切换时的流畅波浪过渡效果
毛玻璃导航栏：沉浸式半透明导航栏设计
交错布局文章列表：左图右文与右图左文的交替展示

💻 极客体验

Mac 风格代码块：支持一键复制与多种语言高亮
全站吸底音乐播放器：基于 APlayer + MetingJS，支持主流平台歌单导入
响应式设计：完美适配桌面、平板和移动设备
深色/浅色模式：支持主题切换，保护用户视力

🛠️ 全栈能力

完整的后台管理系统：仪表盘、内容管理、用户管理、系统设置
多级评论系统：支持楼层回复和评论审核
全站搜索功能：支持标题、内容、摘要的全文搜索
媒体库管理：集成阿里云 OSS，支持图片拖拽上传

📋 功能模块

基础架构

核心栈：Next.js 16 + Drizzle ORM + PostgreSQL/SQLite + TailwindCSS v4
UI系统：Shadcn/ui + Framer Motion (樱花动效)
工程化：TypeScript 配置，环境变量管理，RBAC 权限校验中间件

身份认证

用户系统：注册/登录 (NextAuth)，RSA 加密传输，Bcrypt 存储
管理权限：管理员角色校验，路由保护，API 鉴权
安全机制：密码加密存储，会话管理，权限控制

后台管理

仪表盘：数据概览，侧边栏导航
内容管理：
- 文章管理 (Markdown + OSS 上传 + 分类标签)
- 分类/标签管理 (CRUD)
- 评论管理 (审核/删除)
- 友链/说说管理 (CRUD)
- 媒体库管理 (OSS 文件列表/删除)
- 关于我管理 (Markdown 实时同步)
系统设置：个人信息修改，SEO 配置

博客前台 (Sakura 风格)

视觉：樱花飘落动效，沉浸式毛玻璃导航栏，Hero 标题故障特效，Hero 动态视频背景
首页：Hero 区域 (打字机效果 + 波浪过渡)，文章列表交错布局，标签墙/分类墙
文章页：详情展示，目录导航 (TOC)，多级评论回复，Mac 风格代码块 (含复制按钮)
交互：归档轴，友链卡片，说说瀑布流/时间轴，全站搜索，全站吸底音乐播放器

🎵 音乐播放器配置指南

本项目集成了基于 APlayer 和 MetingJS 的全站吸底播放器。你可以通过修改 components/blog/music-player.tsx 来配置你喜欢的音乐。

1. 导入在线歌单 (推荐)

直接修改 <meting-js /> 组件的属性即可同步第三方平台的歌单：

网易云音乐：


html
<meting-js server="netease" type="playlist" id="2195046205" />

QQ 音乐：


html
<meting-js server="tencent" type="playlist" id="歌单ID" />

参数说明：

server: 音乐平台，可选 netease (网易云), tencent (腾讯), kugou (酷狗)
type: 资源类型，可选 playlist (歌单), song (单曲), album (专辑), artist (艺术家)
id: 对应的资源 ID（通常在网页版 URL 中可以找到）
fixed: 必须为 true 以保持吸底模式
theme: 播放器主题色（建议使用樱花粉 #ff4e6a）

2. 导入自定义 MP3 文件

如果你想播放特定的本地文件或外链 MP3，可以参考 APlayer 的原生配置方式。建议将 MP3 文件上传至项目的 阿里云 OSS 后获取链接填入：


typescript
// 在 music-player.tsx 中初始化 APlayer
const ap = new APlayer({
    container: document.getElementById('aplayer'),
    fixed: true,
    audio: [{
        name: '歌曲名称',
        artist: '艺术家',
        url: 'https://your-oss-domain.com/music.mp3', // OSS 或外链地址
        cover: '封面图地址',
        lrc: '歌词地址或文本'
    }]
});

🛠️ 技术栈

前端

框架: Next.js 16 (App Router) + React 19
样式: Tailwind CSS v4 + Framer Motion
UI组件: Shadcn/ui + Radix UI
动画: Framer Motion
Markdown: react-markdown + remark-gfm
音乐播放器: APlayer + MetingJS

后端

数据库: PostgreSQL / SQLite + Drizzle ORM
认证: NextAuth.js v4
加密: RSA + Bcrypt
存储: Aliyun OSS v6
API: Next.js API Routes

开发工具

语言: TypeScript 5.x
构建工具: Turbopack
代码质量: ESLint
数据库迁移: Drizzle Kit
包管理: npm

🚀 快速开始

1. 环境准备


bash
# 克隆项目
git clone <repository-url>
cd vichi-blog

# 安装依赖
npm install

2. 环境配置

复制 .env.example 并重命名为 .env.local，填入以下配置：


env
# 数据库连接
DATABASE_URL="postgresql://username:password@host:port/database"

# NextAuth 配置
NEXTAUTH_URL="http://localhost:3000"
NEXTAUTH_SECRET="your-secret-key"

# 阿里云 OSS 配置
ALIYUN_ACCESS_KEY_ID="your-access-key-id"
ALIYUN_ACCESS_KEY_SECRET="your-access-key-secret"
ALIYUN_OSS_BUCKET="your-bucket-name"
ALIYUN_OSS_REGION="oss-cn-hangzhou"
ALIYUN_OSS_UPLOAD_DIR="blog/"

3. 数据库初始化


bash
# 运行数据库迁移
npx drizzle-kit push

# 初始化管理员账户
npx tsx scripts/init-admin.ts

4. 启动开发服务器


bash
npm run dev

访问 http://localhost:3000 查看博客前台，http://localhost:3000/admin 进入后台管理。

📁 项目结构

vichi-blog/
├── app/                    # Next.js App Router
│   ├── (blog)/             # 博客前台页面
│   │   ├── about/          # 关于页面
│   │   ├── archives/       # 归档页面
│   │   ├── articles/       # 文章详情与列表
│   │   ├── categories/     # 分类页面
│   │   ├── friends/        # 友链页面
│   │   ├── privacy/        # 隐私政策
│   │   ├── profile/        # 个人资料
│   │   ├── tags/           # 标签页面
│   │   ├── talks/          # 说说页面
│   │   ├── terms/          # 使用条款
│   │   ├── layout.tsx      # 前台公共布局
│   │   └── page.tsx        # 首页
│   ├── admin/              # 后台管理页面
│   │   ├── about/          # 关于页面管理
│   │   ├── articles/       # 文章管理
│   │   ├── categories/     # 分类管理
│   │   ├── comments/       # 评论管理
│   │   ├── dashboard/      # 数据统计
│   │   ├── friends/        # 友链管理
│   │   ├── media/          # 媒体库
│   │   ├── settings/       # 系统设置
│   │   ├── tags/           # 标签管理
│   │   ├── talks/          # 说说管理
│   │   ├── users/          # 用户管理
│   │   └── layout.tsx      # 后台侧边栏布局
│   ├── api/                # API 路由
│   │   ├── admin/          # 后台管理接口
│   │   ├── auth/           # 认证相关接口
│   │   ├── upload/         # 文件上传接口
│   │   ├── vichi/          # 前台公开接口
│   │   └── visit/          # 访问统计接口
│   ├── login/              # 登录页面
│   ├── register/           # 注册页面
│   ├── favicon.ico         # 网站图标
│   ├── globals.css         # 全局样式
│   └── layout.tsx          # 根布局
├── components/             # React 组件
│   ├── admin/              # 后台管理组件
│   ├── blog/               # 博客前台组件
│   ├── ui/                 # 通用 UI 组件
│   ├── mode-toggle.tsx     # 主题切换组件
│   ├── session-provider.tsx # 会话提供器
│   └── theme-provider.tsx  # 主题提供器
├── lib/                    # 工具函数和配置
│   ├── db/                 # 数据库配置
│   │   ├── index.ts
│   │   ├── relations.ts
│   │   └── schema.ts
│   ├── auth.ts             # NextAuth 配置
│   ├── oss.ts              # 阿里云 OSS 封装
│   ├── permission.ts       # 权限管理
│   ├── rsa-keys.ts         # RSA 密钥管理
│   ├── types.ts            # 类型定义
│   └── utils.ts            # 工具函数
├── scripts/                # 脚本文件
│   ├── check-db.ts         # 数据库检查
│   └── init-admin.ts       # 初始化管理员账户
├── public/                 # 静态资源
├── drizzle/                # 数据库迁移文件
├── .gitignore              # Git 忽略文件
├── LICENSE                 # 许可证文件
├── README.md               # 项目说明
├── components.json         # Shadcn UI 配置
├── drizzle.config.ts       # Drizzle ORM 配置
├── eslint.config.mjs       # ESLint 配置
├── middleware.ts           # Next.js 中间件
├── next.config.ts          # Next.js 配置
├── package.json            # 项目依赖
├── postcss.config.mjs      # PostCSS 配置
└── tsconfig.json           # TypeScript 配置

🔧 开发指南

添加新文章

登录后台管理 (http://localhost:3000/admin)
进入 "文章管理" → "新建文章"
使用 Markdown 编辑器编写内容
设置分类、标签、封面图等信息
发布文章

自定义主题

修改 app/globals.css 中的 CSS 变量
调整 components/theme-provider.tsx 中的主题配置
更新 components/blog/sakura-petals.tsx 中的樱花效果参数
修改 components/blog/music-player.tsx 中的音乐播放器配置

配置音乐播放器

编辑 components/blog/music-player.tsx 文件
配置 MetingJS 参数，支持导入网易云、QQ音乐等平台的歌单
或直接配置 APlayer 原生参数，使用自定义 MP3 文件

数据库管理

数据库迁移: npx drizzle-kit push
数据库检查: npx tsx scripts/check-db.ts
初始化管理员: npx tsx scripts/init-admin.ts

代码质量

ESLint 检查: npm run lint
TypeScript 检查: npx tsc --noEmit

🚀 部署建议

Vercel 部署（推荐）

连接 GitHub 仓库到 Vercel
配置环境变量（参考 .env.example）
一键部署，自动配置 CDN 和 SSL

Docker 部署

构建 Docker 镜像
配置容器环境变量
启动容器，映射端口

自托管服务器

配置 Node.js 18+ 环境
安装 PostgreSQL 数据库
配置 Nginx 反向代理
部署应用，配置环境变量
启动服务，配置开机自启

环境变量配置