# 光阴副本-个人博客前端（React版本）

**Repository Path**: adnaan/blog

## Basic Information

- **Project Name**: 光阴副本-个人博客前端（React版本）
- **Description**: 光阴副本博客项目基于 React + TypeScript 构建，用于记录个人学习过程及心得。前端利用组件化开发与 TypeScript 静态类型检查，搭配 React Router、Redux 等实现高效交互与状态管理。项目具备笔记 - 简短的学习笔记和心得，时光 - 按时间线展示的内容记录，思考 - 深度思考和观点分享，关于 - 个人介绍和联系方式等功能，致力于打造便捷的技术分享交流平台。
- **Primary Language**: TypeScript
- **License**: MPL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 6
- **Forks**: 1
- **Created**: 2025-04-17
- **Last Updated**: 2025-07-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: React, Nodejs, TypeScript

## README

# 个人博客项目

一个现代化、响应式的个人博客网站，具有优雅的设计和流畅的用户体验。

## 运行效果

![输入图片说明](public/image1.png)
![输入图片说明](public/image2.png)
![输入图片说明](public/image3.png)
![输入图片说明](public/image4.png)
![输入图片说明](public/image5.png)

## 项目特点

- 🎨 **美观的UI设计** - 精心设计的界面，提供舒适的视觉体验
- 🌓 **深色/浅色主题** - 支持自动和手动切换主题模式
- 📱 **全响应式布局** - 完美适配从手机到桌面的各种设备
- 🚀 **流畅的过渡动画** - 使用Framer Motion实现平滑的页面过渡和交互效果
- 📝 **丰富的内容展示** - 支持文章分类、笔记、时间线和思考等多种内容形式
- 🧑‍💻 **开发者友好** - 包含专门的代码展示页面和开发者字体配置

## 技术栈

- **前端框架**: React
- **路由**: React Router
- **样式**: Emotion (CSS-in-JS)
- **动画**: Framer Motion
- **图标**: React Icons

## 页面结构

- **首页** - 展示最新内容和博客概览
- **文章** - 按主题分类的文章集合
- **手记** - 简短的学习笔记和心得
- **关于** - 个人介绍和联系方式
- **项目** - 技术项目展示
- **开发者字体** - 专为开发者优化的代码字体展示

## 组件特色

### 导航系统

- 响应式导航栏，在移动设备上自动转换为抽屉菜单
- 基于当前路由的活跃状态视觉反馈
- 下拉菜单支持多级导航

### 主题系统

- 基于CSS变量的主题定制
- 支持浅色/深色模式切换
- 平滑的主题切换过渡效果

### 代码展示

- 支持语法高亮的代码块
- 复制代码功能
- 行号显示
- 使用专业开发者字体栈

## 安装与使用

1. 克隆仓库
```bash
git clone https://gitee.com/adnaan/blog.git
cd blog
```

2. 安装依赖
```bash
npm install
```

3. 启动开发服务器
```bash
npm run dev
```

4. 构建生产版本
```bash
npm run build
```

## 自定义配置

### 主题配置

主题颜色和其他视觉元素可以在全局CSS变量中配置。主要变量包括：

- `--bg-primary`: 主背景色
- `--text-primary`: 主文本颜色
- `--text-secondary`: 次要文本颜色
- `--accent-color`: 强调色
- `--border-color`: 边框颜色
- `--font-code`: 代码字体栈

### 开发者字体配置

代码字体优先级：
```
OperatorMonoSSmLig Nerd Font, Cascadia Code PL, FantasqueSansMono Nerd Font, 
operator mono, JetBrainsMono, Fira code Retina, Fira code, Consolas, Monaco, 
Hannotate SC, monospace, -apple-system
```

## 贡献

欢迎提交问题和拉取请求来改进这个项目，创作不易，感谢大家点点Star支持。

## 许可

MPL