183 lines
4.5 KiB
Markdown
183 lines
4.5 KiB
Markdown
# 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: '右边描述'
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
#### 示例 4：添加风景照片展示（新功能！）
|
||
|
||
```javascript
|
||
{
|
||
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
|
||
|
||
修改完成后：
|
||
|
||
```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号的合照
|
||
|
||
### 风景照片（新增）
|
||
- `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张
|
||
```
|
||
|
||
你可以根据这些照片自由组织任何布局！
|