个人博客网站 (React + Tailwind CSS)

一个现代化、响应式的个人博客网站实现，基于 React 和 Tailwind CSS 构建，具有优雅的 UI 设计和流畅的用户体验。

注意：以上图片仅在项目运行时可以正常显示。请执行 npm start 启动项目后查看。

目录

• 功能特点
• 技术栈
• 项目结构
• 安装和运行
• 构建生产版本
• 自定义配置
• 图片替换指南
• 浏览器支持
• 许可证

功能特点

• 📱 响应式设计 - 完美适配移动端、平板和桌面设备
• 🖱️ 动态导航栏 - 滚动时自动调整样式
• 🌟 特色文章展示区 - 突出优质内容
• 🃏 文章卡片布局 - 带有精美的悬停动画效果
• 🔖 分类导航系统 - 方便内容浏览
• 👤 作者信息展示 - 包含社交链接
• 📧 邮件订阅功能 - 便于用户获取更新
• 🚀 平滑滚动 - 回到顶部功能

技术栈

• 前端框架: React 19
• 路由管理: React Router v7
• 样式解决方案: Tailwind CSS 3
• 构建工具: Create React App
• 测试套件:
  • @testing-library/react
  • @testing-library/jest-dom
• 开发规范: ESLint + Prettier

项目结构

src/
├── components/          # 可复用组件
│   ├── layout/          # 布局组件
│   │   ├── Navbar.jsx   # 导航栏
│   │   ├── Footer.jsx   # 页脚
│   │   └── Sidebar.jsx  # 侧边栏
│   ├── posts/           # 文章相关组件
│   │   ├── FeaturedPost.jsx  # 特色文章
│   │   ├── PostCard.jsx      # 文章卡片
│   │   └── PostList.jsx      # 文章列表
│   └── common/          # 通用组件
│       └── SubscribeForm.jsx # 订阅表单
├── pages/               # 页面组件
│   ├── Home.jsx         # 首页
│   ├── PostDetail.jsx   # 文章详情页
│   ├── About.jsx        # 关于页面
│   ├── Contact.jsx      # 联系页面
│   └── NotFound.jsx     # 404页面
├── utils/               # 工具函数和数据
│   └── data.js          # 静态数据
├── App.js               # 根组件
└── index.js             # 入口文件

安装和运行

1. 克隆项目到本地：

   git clone <项目地址>

2. 进入项目目录：

   cd my-blog

3. 安装依赖：

   npm install
   # 或者使用 yarn
   yarn install

4. 启动开发服务器：

   npm start
   # 或者使用 yarn
   yarn start

5. 在浏览器中访问 http://localhost:3000 查看网站

构建生产版本

运行以下命令构建生产版本：

npm run build
# 或者使用 yarn
yarn build

构建后的文件将位于 build/ 目录中，可以部署到任何静态网站托管服务上。

自定义配置

配置文件	用途
tailwind.config.js	Tailwind CSS 配置
postcss.config.js	PostCSS 配置
src/index.css	全局样式
src/utils/data.js	静态数据

图片替换指南

1. 参考 IMAGE_REPLACEMENT_GUIDE.md 文件中的详细说明
2. 准备符合要求的图片文件
3. 将图片文件放入 public/imgs/ 目录中
4. 替换同名文件以更新网站中的图片

浏览器支持

项目支持所有现代浏览器，包括：

• Chrome (最新2个版本)
• Firefox (最新2个版本)
• Safari (最新2个版本)
• Edge (最新2个版本)