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: '右边描述'
    }
  ]
}

示例 4：添加风景照片展示（新功能！）

{
  type: 'scenery',
  enabled: true,  // 开关控制
  title: '风景搅影',
  description: '记录自然之美',
  categories: ['nature', 'urban', 'plants', 'animals'],  // 要展示的类别
  groupCount: 2,   // 展示几个照片组
  random: true     // 是否随机选择
}

风景类别说明：

• nature - 纯自然风景 (5_x_x.JPG)
• urban - 非自然风景/城市 (6_x_x.JPG)
• plants - 植物 (7_x_x.JPG)
• animals - 动物 (8_x_x.JPG)

📦 支持的布局类型

• hero - 首屏大图
• full-bleed - 全屏单图（支持 left/right/center 对齐）
• quad-grid - 四宫格（2x2）
• dual - 双栏布局
• grid - 灵活网格（支持 large 和 normal 尺寸）
• scenery - 风景照片展示（新增！支持随机选择和分类过滤）

🔄 部署到 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号的合照

风景照片（新增）

• 5_Y_Z.JPG - 纯自然风景
• 6_Y_Z.JPG - 非自然风景（建筑、城市等）
• 7_Y_Z.JPG - 植物
• 8_Y_Z.JPG - 动物

编号说明：

• 第一位：类型（5/6/7/8）
• 第二位（Y）：关联组号，相同数字代表有关联的照片
• 第三位（Z）：顺序编号

示例：

5_1_1.JPG  ← 纯自然风景，第1组，第1张
5_1_2.JPG  ← 纯自然风景，第1组，第2张（与上一张相关）
5_2_1.JPG  ← 纯自然风景，第2组，第1张（独立场景）
6_1_1.JPG  ← 非自然风景，第1组，第1张

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