82 lines
1.7 KiB
Markdown
82 lines
1.7 KiB
Markdown
# 🌄 风景照片功能使用指南
|
||
|
||
## 快速开始
|
||
|
||
### 1. 添加风景照片
|
||
|
||
将风景照片放到 `public/media/` 目录，按照命名规则命名：
|
||
```bash
|
||
public/media/
|
||
├── 5_1_1.JPG # 纯自然风景，第1组，第1张
|
||
├── 5_1_2.JPG # 纯自然风景，第1组，第2张
|
||
├── 6_1_1.jpeg # 非自然风景，第1组，第1张
|
||
└── 7_1_1.jpeg # 植物，第1组，第1张
|
||
```
|
||
|
||
### 2. 更新照片列表
|
||
```bash
|
||
npm run scan-photos
|
||
```
|
||
|
||
### 3. 在配置中启用
|
||
|
||
编辑 `src/data/gallery-config.js`：
|
||
```javascript
|
||
{
|
||
type: 'scenery',
|
||
enabled: true,
|
||
title: '风景掠影',
|
||
description: '记录自然之美，定格时光瞬间',
|
||
categories: ['nature', 'urban', 'plants', 'animals'],
|
||
groupCount: 2,
|
||
random: true
|
||
}
|
||
```
|
||
|
||
## 命名规则
|
||
|
||
### 格式
|
||
```
|
||
[类型]_[组号]_[序号].[扩展名]
|
||
```
|
||
|
||
- **类型**：5=自然风景, 6=城市风景, 7=植物, 8=动物
|
||
- **组号**：相同数字代表关联照片
|
||
- **序号**：组内排序
|
||
|
||
### 示例
|
||
```
|
||
5_1_1.JPG ← 第1组自然风景第1张
|
||
5_1_2.JPG ← 第1组自然风景第2张（与上一张相关）
|
||
5_2_1.JPG ← 第2组自然风景第1张（独立场景）
|
||
```
|
||
|
||
## 配置选项
|
||
```javascript
|
||
{
|
||
enabled: true, // 开关控制
|
||
categories: ['nature'], // 类别过滤
|
||
groupCount: 2, // 显示几组
|
||
random: true // 是否随机
|
||
}
|
||
```
|
||
|
||
## 布局效果
|
||
|
||
- 1张：居中大图
|
||
- 2张：左右平铺
|
||
- 3张：一大两小
|
||
- 4张：田字格
|
||
- 5+张：瀑布流
|
||
|
||
## 常见问题
|
||
|
||
**Q: 如何添加新照片？**
|
||
A: 放到 `public/media/`，运行 `npm run scan-photos`
|
||
|
||
**Q: 可以临时关闭吗？**
|
||
A: 设置 `enabled: false`
|
||
|
||
**Q: 支持哪些格式？**
|
||
A: JPG, JPEG, PNG, WebP
|