📸 相册系统 - 快速参考

🎯 核心改动

项目	说明
✅ `gallery.html`	新建相册主页面
✅ `_sass/_gallery.scss`	新建相册样式
✅ `_data/photos.json`	新建照片数据文件
✅ `_data/navigation.yml`	添加Gallery导航
✅ `assets/styles.scss`	引入gallery样式
✅ `/img/photos/`	新建照片目录

📝 照片数据格式

{
  "id": 1,
  "title": "标题",
  "category": "风景|城市|人文|历史",
  "location": "地点",
  "latitude": 40.4319,
  "longitude": 116.0073,
  "description": "描述",
  "image": "/img/photos/photo.jpg",
  "date": "2024-05-15",
  "notes": "留言"
}

🚀 三步快速开始

将照片放在 /img/photos/ 目录
编辑 _data/photos.json 添加照片信息
访问 /gallery 查看相册

📍 获取地理坐标

工具	步骤
Google Maps	搜索 → 右键 → 复制坐标
高德地图	搜索 → 查询特征 → 查看坐标
OpenStreetMap	搜索 → 点击地点 → 查看坐标

格式：纬度, 经度 （例：40.4319, 116.0073）

🏷️ 分类（必须选一个）

分类	颜色
🏔️ 风景	#7cb342 绿色
🏙️ 城市	#42a5f5 蓝色
👥 人文	#ff6b9d 红色
🏛️ 历史	#e63946 深红

⌨️ 快捷键

按键	功能
`←`	上一张
`→`	下一张
`ESC`	关闭

🗺️ 两种地图方案

Leaflet（推荐）

✅ 免费开源
✅ 无需API
✅ 开箱即用

Google Maps（备选）

✅ 更精准
✅ 街景支持
⚠️ 需要API密钥

点击地图右上角按钮切换。

📸 照片尺寸建议

属性	推荐
宽高比	1:1（方形）
分辨率	1200×1200px+
文件大小	<200KB
格式	JPG 优先

📱 响应式布局

🖥️ 桌面 (>1200px)
   ┌─────────┬──────────┐
   │ 地图    │ 照片网格 │
   │         │ 筛选器   │
   └─────────┴──────────┘

📱 平板 (480-1200px)
   ┌──────────────┐
   │ 地图         │
   ├──────────────┤
   │ 筛选器       │
   ├──────────────┤
   │ 照片网格     │
   └──────────────┘

📱 手机 (<480px)
   ┌────────┐
   │ 地图   │
   ├────────┤
   │ 筛选   │
   ├────────┤
   │2列网格 │
   └────────┘

🔍 搜索字段

搜索会匹配：

照片标题
地点名称
照片描述

实时生效，无需提交。

📊 完整功能列表

✅ 照片网格展示
✅ 地图地点标记
✅ 搜索功能
✅ 分类筛选
✅ 大图预览
✅ 快捷导航
✅ 响应式设计
✅ 深色模式
✅ 键盘导航
✅ 移动适配

🎨 样式特点

🌈 果味配色系统
🎯 高级过渡动画
✨ 悬停效果
🌙 完整深色模式
📱 完全响应式

📁 文件位置速查

相册主页：     /gallery/
照片数据：     _data/photos.json
照片文件夹：   img/photos/
相册样式：     _sass/_gallery.scss
导航配置：     _data/navigation.yml
主样式：       assets/styles.scss

🔧 常用修改

修改每行显示数量

_sass/_gallery.scss

grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
// 改变 280px

修改地图中心

gallery.html

map = L.map('map').setView([35, 105], 4);
//                          纬度 经度 缩放

添加新分类

_data/photos.json 的 category 字段 gallery.html 的筛选按钮

📚 详细文档

GALLERY_GUIDE.md - 完整使用指南
img/photos/README.md - 照片目录说明
_data/photos.json - 照片数据示例

✨ 特色功能

地点关联

每个照片都关联地理坐标，在地图上显示标记点。点击地图标记可预览对应照片。

分类筛选

支持按分类快速筛选：风景、城市、人文、历史。可同时进行搜索和筛选。

大图预览

点击照片查看大图，可用方向键导航。 ESC 或点击外部关闭。

深色模式

完整适配系统深色模式，自动切换样式。

🌟 高级提示

批量导入：使用 Python 脚本自动生成 JSON
Exif 提取：从照片自动提取 GPS 坐标
集成其他功能：在博客文章中链接相册
时间轴：可创建按时间排序的相册

🎯 下一步

准备照片（1200×1200px，<200KB）
获取地理坐标
编辑 _data/photos.json
访问 /gallery 查看

现在就开始你的相册之旅吧！ 🌍📸✨