# Gallery 配置驱动系统

## ✨ 已完成的改造

### 新增文件结构

```
gallery/
├── src/
│   ├── data/
│   │   └── gallery-config.js      ← 核心配置文件（所有图片路径在这里）
│   ├── components/
│   │   └── sections/
│   │       ├── HeroSection.astro   ← 首屏大图组件
│   │       ├── FullBleedSection.astro  ← 全屏单图组件
│   │       ├── QuadGridSection.astro   ← 四宫格组件
│   │       ├── DualSection.astro       ← 双栏组件
│   │       └── GridSection.astro       ← 网格布局组件
│   └── pages/
│       └── index.astro             ← 主页（动态渲染）
└── public/
    └── media/                      ← 所有图片资源存放处
```

## 🚀 快速开始

### 1. 复制图片到项目

```bash
cd /Users/sinlee/Documents/git-repos/gallery
chmod +x copy-photos.sh
./copy-photos.sh
```

### 2. 启动开发服务器

```bash
pnpm dev
```

然后访问 `http://localhost:4321`

## 📸 当前图片布局

根据你的图片命名，我已经这样组织了内容：

1. **首屏** - 四人合照 (`0123_1.JPG`)
2. **全屏单图** - 另一张合照 (`0123_2.JPG`)
3. **四宫格** - 0号人物的四张照片 (`0_1` 到 `0_4`)
4. **双栏** - 23号合照 + 1号单人
5. **网格** - 2号和3号的照片
6. **全屏结尾** - 0号照片

## 🎨 如何修改布局

### 只需编辑一个文件：`src/data/gallery-config.js`

#### 示例 1：修改首屏图片

```javascript
hero: {
  image: '/media/0123_2.JPG',  // 改成其他图片
  title: '新的标题',
  subtitle: '新的副标题'
}
```

#### 示例 2：添加新的四宫格

在 `sections` 数组中添加：

```javascript
{
  type: 'quad-grid',
  title: '新的四宫格',
  images: [
    '/media/1_1.JPG',
    '/media/2_1.JPG',
    '/media/2_2.JPG',
    '/media/3_1.JPG'
  ]
}
```

#### 示例 3：添加双栏布局

```javascript
{
  type: 'dual',
  cards: [
    {
      image: '/media/0_1.JPG',
      title: '左边标题',
      description: '左边描述'
    },
    {
      image: '/media/1_1.JPG',
      title: '右边标题',
      description: '右边描述'
    }
  ]
}
```

## 📦 支持的布局类型

- `hero` - 首屏大图
- `full-bleed` - 全屏单图（支持 left/right/center 对齐）
- `quad-grid` - 四宫格（2x2）
- `dual` - 双栏布局
- `grid` - 灵活网格（支持 large 和 normal 尺寸）

## 🔄 部署到 VPS

修改完成后：

```bash
git add .
git commit -m "更新 gallery 配置"
git push
```

自动部署会触发，几秒后就能在 `https://show.leexxx.com` 看到更新！

## 💡 提示

- **图片路径**：相对于 `public/` 目录，所以 `/media/xxx.jpg` 对应 `public/media/xxx.jpg`
- **图片格式**：支持 JPG, PNG, WebP
- **添加图片**：只需把新图片放到 `public/media/` 然后在配置文件中引用即可
- **调整顺序**：在 `sections` 数组中调整顺序即可改变页面布局顺序

## 🎯 图片命名规则（你的照片）

- `0_X.JPG` - 0号人物的照片
- `1_X.JPG` - 1号人物的照片
- `2_X.JPG` - 2号人物的照片
- `3_X.JPG` - 3号人物的照片
- `0123_X.JPG` - 四人合照
- `23_X.JPG` - 2号和3号的合照

你可以根据这些照片自由组织任何布局！