https://github.com/yukito0209/my-personal-docs
一个基于 Next.js 15 和 Fumadocs UI 进行了绝赞爆改的个人网站。
https://github.com/yukito0209/my-personal-docs
fumadocs mdx nextjs typescript website
Last synced: about 16 hours ago
JSON representation
一个基于 Next.js 15 和 Fumadocs UI 进行了绝赞爆改的个人网站。
- Host: GitHub
- URL: https://github.com/yukito0209/my-personal-docs
- Owner: yukito0209
- License: mit
- Created: 2025-04-29T11:44:56.000Z (5 months ago)
- Default Branch: master
- Last Pushed: 2025-05-06T16:53:13.000Z (5 months ago)
- Last Synced: 2025-05-07T20:55:41.325Z (5 months ago)
- Topics: fumadocs, mdx, nextjs, typescript, website
- Language: TypeScript
- Homepage: http://yukitoqaq.art
- Size: 150 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Yukito の 复式高层
[English](./README_EN.md) | 简体中文
这是我的个人网站项目，使用 Next.js 和 Fumadocs UI 构建的现代化个人主页和文档系统。你也可以用它作为一个框架，构建自己的个人网站。
## 🌟 功能特点
- 响应式设计的个人主页，展示个人信息和教育经历
- 基于 Fumadocs 的文档系统，支持 MDX 格式与搜索
- 定制化本地音乐播放器，支持专辑封面显示
- 瀑布流布局的相册画廊
- 支持浅色/深色模式切换，并带有平滑过渡动画
- 全局应用霞鹜文楷 (LXGW WenKai) 字体，提升阅读体验
- 多处采用毛玻璃 (Frosted Glass) UI 效果，增强视觉层次感
- 基于 Bangumi API 的「每日新番放送」和「我的追番」列表
## 🛠️ 技术栈
- **Next.js 15.3.1** - React 应用框架
- **Fumadocs UI 15.2.12 & MDX 11.6.1** - 文档系统核心
- **TailwindCSS 4.1.4** - 原子化 CSS 框架
- **TypeScript 5.8.3** - 强类型 JavaScript 超集
- **Lucide React 0.503.0** - 图标库
- **Simple Icons** - 品牌 SVG 图标库
- **React Context API** - 用于状态管理（如主题、音乐播放器）
## 📦 项目结构
```
my-personal-docs/
├── app/ # Next.js 应用目录
│ ├── (home)/ # 主页相关组件
│ ├── api/ # API 路由
│ ├── docs/ # 文档系统
│ ├── gallery/ # 相册功能
│ └── components/ # 共享组件
├── content/ # 内容文件
│ └── docs/ # 文档内容
├── public/ # 静态资源
│ ├── music/ # 音乐文件
│ ├── photos/ # 图片文件
│ └── logos/ # Logo 文件
├── lib/ # 工具函数和配置
└── .source/ # 源文件目录
```
## 🚀 快速开始
### 环境要求
- **Node.js 20.0 或更高版本**
- **npm**
### 安装
```bash
# 克隆项目
git clone https://github.com/yukito0209/my-personal-docs.git
# 进入项目目录
cd my-personal-docs
# 安装依赖
npm install
```
### 开发
```bash
# 启动开发服务器
npm run dev
```
### 构建
```bash
# 构建生产版本
npm run build
```
## 🔧 配置说明
### 音乐播放器
将音乐文件放置在 `public/music` 目录下，支持的格式：
- MP3
- WAV
- OGG
- FLAC
音乐文件不易过大，避免网页播放加载时间过长。
### 相册
将图片文件放置在 `public/photos` 目录下，建议进行适当的图片压缩以提升加载性能。
推荐使用 [Squoosh](https://squoosh.app/) 将图片压缩为 webp 格式。
### 文档
文档使用 MDX 格式，放置在 `content/docs` 目录下。
具体使用方法请参考：https://fumadocs.dev/docs/mdx
## 📄 许可证
[MIT License](https://github.com/yukito0209/my-personal-docs/blob/master/LICENSE)
## 🤝 特别鸣谢
本项目的成功实现离不开以下项目/服务商的支持，**在此向他们表示衷心感谢！**
- [雨云 (Rainyun)](https://www.rainyun.com/YUKITO_) - 新一代云服务器提供商
- [Fumadocs](https://github.com/fuma-nama/fumadocs) - 使用 Next.js 构建文档网站的实用框架
- [LXGW WenKai / 霞鹜文楷](https://github.com/lxgw/LxgwWenKai) - 优雅美观的开源字体
- [lxgw-wenkai-webfont](https://github.com/chawyehsu/lxgw-wenkai-webfont) - 霞骛文楷的 npm 网页字体包
- [Squoosh](https://github.com/GoogleChromeLabs/squoosh?tab=readme-ov-file) - 通过多种格式减小图像文件大小的图像压缩 web app
- [Lucide](https://github.com/lucide-icons/lucide) - 包含 1k+ SVG 文件的开源图标库
- [Simple Icons](https://github.com/simple-icons/simple-icons) - 包含 3.2k+ 流行品牌 SVG 图标的开源图标库
欢迎提交 Issue 和 Pull Request 来帮助改进项目！如果它对你有所帮助，**请 star 这个 repo**，非常感谢！
## ✨ 主要功能
### 📝 文档管理
- 基于 MDX 的文档系统
- 支持 LaTeX 数学公式和代码高亮
- 自动生成目录和导航
### 🎵 音乐播放器
- 支持多格式音频文件
- 黑胶唱片视觉效果
- 歌曲信息自动提取
### 💬 留言板系统
- GitHub OAuth 登录认证
- 留言发布、编辑、删除功能
- 回复系统和点赞功能
- 点赞用户头像显示
- Markdown 内容支持
- 实时交互界面
### 🤖 AI 助手
- 多个 AI 助手切换
- 智能对话和代码分析
- 拖拽调整窗口大小
### 🖼️ 相册展示
- 响应式图片网格
- 图片预览和缩放
- 自动适配暗色模式