# turingflow-blog-001

个人作品集/博客网站模板，适用于设计师、开发者、自由职业者展示作品和服务。

## 技术栈

- React 19 + Vite 7
- Tailwind CSS 4
- React Router DOM 7
- Lucide React (图标库)

## 快速开始

```bash
pnpm install
pnpm run dev
```

## 目录结构

```text
src/
├── App.jsx              # 应用入口，包含路由配置
├── main.jsx             # React 挂载点
├── index.css            # 全局样式 (Tailwind)
├── components/          # 可复用组件
│   ├── NavBar.jsx       # 导航栏
│   ├── Footer.jsx       # 页脚
│   ├── Button.jsx       # 按钮组件
│   ├── AboutCard.jsx    # 关于卡片
│   ├── ProjectCards.jsx # 项目卡片列表
│   ├── Testimonials.jsx # 客户评价
│   ├── Faq.jsx          # 常见问题
│   └── ...              # 其他组件
├── pages/               # 页面组件
│   ├── Home.jsx         # 首页
│   ├── About.jsx        # 关于页面
│   ├── Services.jsx     # 服务页面
│   ├── Portfolio.jsx    # 作品集列表
│   ├── ProductDetail.jsx# 作品详情
│   ├── Blog.jsx         # 博客列表
│   ├── BlogDetail.jsx   # 博客详情
│   └── Contact.jsx      # 联系页面
├── data/                # 静态数据 (JSON)
│   ├── menu.json        # 导航菜单配置
│   ├── projects.json    # 作品集数据
│   ├── blog.json        # 博客文章数据
│   ├── testimonials.json# 客户评价数据
│   ├── brands.json      # 合作品牌数据
│   ├── certifications.json # 资质认证数据
│   ├── faq.json         # 常见问题数据
│   └── work.json        # 工作经历数据
└── lib/                 # 工具库
    └── Head.jsx         # 页面头部管理
```

## 路由配置

| 路径 | 页面 | 说明 |
|------|------|------|
| `/` | Home | 首页 |
| `/about` | About | 关于我 |
| `/services` | Services | 服务介绍 |
| `/portfolio` | Portfolio | 作品集列表 |
| `/portfolio/:slug` | ProductDetail | 作品详情 |
| `/blog` | Blog | 博客列表 |
| `/blog/:slug` | BlogDetail | 博客详情 |
| `/contact` | Contact | 联系方式 |

## 数据结构

### 导航菜单 (data/menu.json)

```json
[
  { "label": "首页", "path": "/" },
  { "label": "关于", "path": "/about" },
  { "label": "服务", "path": "/services" }
]
```

### 项目数据 (data/projects.json)

```json
[
  {
    "id": 1,
    "slug": "project-name",
    "title": "项目标题",
    "description": "项目描述",
    "image": "/images/project.jpg",
    "category": "Web Design",
    "tags": ["React", "Tailwind"]
  }
]
```

### 博客数据 (data/blog.json)

```json
[
  {
    "id": 1,
    "slug": "article-slug",
    "title": "文章标题",
    "excerpt": "文章摘要",
    "content": "文章正文内容...",
    "image": "/images/blog.jpg",
    "date": "2024-01-15",
    "author": "作者名",
    "tags": ["设计", "开发"]
  }
]
```

## 常见修改任务

### 修改网站信息

1. 编辑 `index.html` 中的 `<title>` 和 meta 标签
2. 修改 `src/components/NavBar.jsx` 中的 Logo 和网站名称
3. 修改 `src/components/Footer.jsx` 中的版权信息

### 修改导航菜单

编辑 `src/data/menu.json`，添加或删除菜单项

### 添加新页面

1. 在 `src/pages/` 创建新页面组件
2. 在 `src/App.jsx` 的 Routes 中添加路由

### 修改样式主题

编辑 `src/index.css` 中的 CSS 变量或 Tailwind 配置

### 添加作品/博客

编辑 `src/data/projects.json` 或 `src/data/blog.json`

## 布局说明

- `PageShell` 组件统一控制页面最大宽度 (`max-w-7xl`)
- 响应式断点：`lg:px-10` (大屏增加内边距)
- 所有页面共享 NavBar 和 Footer

## 图片资源

- 存放在 `public/` 目录
- 引用路径：`/images/xxx.jpg`