Next.js 动漫风格博客系统

一个充满动漫元素的现代化个人博客系统，采用最新的 Next.js 16 和 React 19 技术栈构建。

🎨 项目特色

动漫风格界面：粉色主题，流星动画，充满少女心的视觉设计
响应式布局：完美适配桌面端和移动端
流畅动画：基于 Framer Motion 的丝滑交互体验
Markdown 支持：完整的文章编写和渲染能力
代码高亮：支持多种编程语言的语法高亮显示

🚀 技术栈

核心框架

Next.js 16.0.7：采用最新的 App Router 架构和 Turbopack 构建工具
React 19.2.1：最新的 React 版本，支持服务端组件
TypeScript：完整的类型支持，提升开发体验

UI 与样式

Tailwind CSS 3.4：原子化 CSS 框架，快速构建界面
Framer Motion 11：强大的动画库，实现流畅的页面交互
响应式设计：移动端友好的自适应布局

内容处理

gray-matter：解析 Markdown 文件的 Front Matter
remark & remark-html：Markdown 转 HTML
remark-gfm：GitHub 风格的 Markdown 扩展
rehype-highlight：代码语法高亮

工具库

date-fns：现代化的日期处理库

📦 功能模块

1. 首页动画

50 颗星星的流动动画
5 颗流星划过效果
渐变背景和霓虹文字特效

2. 博客文章系统

Markdown 文章编写
文章列表展示（带随机名言）
文章详情页面
代码高亮显示
标签分类

3. 侧边栏功能

左侧边栏：

个人头像（支持网络图片）
用户信息展示
社交链接

右侧边栏：

动漫日历显示
图片轮播展示
相册集合

4. 导航系统

首页
博客列表
相册展示
关于页面
流畅的页面切换动画

🛠️ 使用方法

安装依赖

npm install

开发环境运行

npm run dev

访问 http://localhost:3000 查看效果。

生产环境构建

npm run build
npm start

✍️ 添加文章

在 posts/ 目录下创建 .md 文件：

---
title: "文章标题"
date: "2025-12-09"
tags: ["标签1", "标签2"]
excerpt: "文章简介"
author: "作者名"
---

# 文章内容

这里是正文内容...

Front Matter 字段说明

title: 文章标题（必填）
date: 发布日期，格式 YYYY-MM-DD（必填）
tags: 标签数组（必填）
excerpt: 文章摘要（必填）
author: 作者名称（必填）

⚙️ 配置文件

`data/config.json` - 基础配置

{
  "userInfo": {
    "name": "你的名字",
    "bio": "个人简介",
    "avatar": "头像图片 URL",
    "github": "GitHub 链接",
    "email": "邮箱地址"
  }
}

`data/quotes.json` - 名言配置

存储首页和文章列表展示的随机名言。

`data/carousel.json` - 轮播图配置

配置右侧边栏的图片轮播内容。

`data/albums.json` - 相册配置

配置相册页面的图片集合。

🌐 图片配置

项目支持外部图片链接，需在 next.config.mjs 中配置允许的域名：

images: {
  remotePatterns: [
    {
      protocol: 'https',
      hostname: 'your-image-host.com',
    },
  ],
}

🎯 项目亮点

性能优化：
- 使用 Next.js 16 的 Turbopack 超快构建
- 服务端组件减少客户端 JavaScript
- 图片自动优化
开发体验：
- TypeScript 完整类型支持
- 热模块替换（HMR）
- 清晰的项目结构
用户体验：
- 流畅的页面切换动画
- 响应式设计适配多端
- 代码块语法高亮
- 可爱的动漫风格 UI
可扩展性：
- 模块化组件设计
- 配置文件分离
- 易于添加新功能

📂 项目结构

├── app/                    # Next.js App Router 页面
│   ├── layout.tsx         # 根布局
│   ├── page.tsx           # 首页（流星动画）
│   ├── home/              # 博客列表
│   ├── post/[id]/         # 文章详情
│   ├── albums/            # 相册页面
│   └── about/             # 关于页面
├── components/            # React 组件
│   ├── Sidebar.tsx        # 左侧边栏
│   ├── RightSidebar.tsx   # 右侧边栏
│   ├── PostList.tsx       # 文章列表
│   └── ...
├── data/                  # 配置文件
│   ├── config.json        # 基础配置
│   ├── quotes.json        # 名言
│   ├── carousel.json      # 轮播图
│   └── albums.json        # 相册
├── lib/                   # 工具函数
│   └── posts.ts           # 文章处理
├── posts/                 # Markdown 文章
├── styles/                # 全局样式
└── public/                # 静态资源

🔧 技术细节

性能优化

预渲染星星和流星位置，避免 SSR/CSR 不一致
使用 useEffect 延迟加载客户端组件
图片懒加载和自动格式转换

兼容性处理

修复 React 19 hydration 错误
处理 Next.js 16 参数异步化
配置图片远程域名白名单

📝 更新日志

v0.1.0 (2025-12-09)

✅ 升级到 Next.js 16.0.7 和 React 19.2.1
✅ 修复所有 hydration 错误
✅ 优化动画性能
✅ 添加图标配置
✅ 支持网络图片头像

💡 开发建议

添加文章：直接在 posts/ 目录创建 .md 文件即可
修改配置：编辑 data/ 目录下的 JSON 文件
自定义样式：修改 Tailwind 配置或组件内的 className
添加功能：在 components/ 创建新组件并引入

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📄 许可证

MIT License

Enjoy coding! 🎉

Next.js 动漫风格博客系统

Next.js 动漫风格博客系统

🎨 项目特色

🚀 技术栈

核心框架

UI 与样式

内容处理

工具库

📦 功能模块

1. 首页动画

2. 博客文章系统

3. 侧边栏功能

4. 导航系统

🛠️ 使用方法

安装依赖

开发环境运行

生产环境构建

✍️ 添加文章

Front Matter 字段说明

⚙️ 配置文件

data/config.json - 基础配置

data/quotes.json - 名言配置

data/carousel.json - 轮播图配置

data/albums.json - 相册配置

🌐 图片配置

🎯 项目亮点

📂 项目结构

🔧 技术细节

性能优化

兼容性处理

📝 更新日志

v0.1.0 (2025-12-09)

💡 开发建议

🤝 贡献

📄 许可证

`data/config.json` - 基础配置

`data/quotes.json` - 名言配置

`data/carousel.json` - 轮播图配置

`data/albums.json` - 相册配置