gallery/GALLERY-README.md

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. 复制图片到项目

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

2. 启动开发服务器

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：修改首屏图片

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

示例 2：添加新的四宫格

在 sections 数组中添加：

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

示例 3：添加双栏布局

{
  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

修改完成后：

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号的合照

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