Yukito の 复式高层

English | 简体中文

这是我的个人网站项目，使用 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

安装

# 克隆项目
git clone https://github.com/yukito0209/my-personal-docs.git

# 进入项目目录
cd my-personal-docs

# 安装依赖
npm install

开发

# 启动开发服务器
npm run dev

构建

# 构建生产版本
npm run build

🔧 配置说明

音乐播放器

将音乐文件放置在 public/music 目录下，支持的格式：

• MP3
• WAV
• OGG
• FLAC

音乐文件不易过大，避免网页播放加载时间过长。

相册

将图片文件放置在 public/photos 目录下，建议进行适当的图片压缩以提升加载性能。

推荐使用 Squoosh 将图片压缩为 webp 格式。

文档

文档使用 MDX 格式，放置在 content/docs 目录下。

具体使用方法请参考：https://fumadocs.dev/docs/mdx

📄 许可证

MIT License

🤝 特别鸣谢

本项目的成功实现离不开以下项目/服务商的支持，在此向他们表示衷心感谢！

• 雨云 (Rainyun) - 新一代云服务器提供商
• Fumadocs - 使用 Next.js 构建文档网站的实用框架
• LXGW WenKai / 霞鹜文楷 - 优雅美观的开源字体
• lxgw-wenkai-webfont - 霞骛文楷的 npm 网页字体包
• Squoosh - 通过多种格式减小图像文件大小的图像压缩 web app
• Lucide - 包含 1k+ SVG 文件的开源图标库
• Simple Icons - 包含 3.2k+ 流行品牌 SVG 图标的开源图标库

欢迎提交 Issue 和 Pull Request 来帮助改进项目！如果它对你有所帮助，请 star 这个 repo，非常感谢！