🖼️ 博客相册系统 - 完整指南

功能概览

你的博客现在有了一个功能强大的相册系统！

✨ 主要特性

特性	说明
📸 照片网格	响应式图片网格展示
🗺️ 地图展示	Leaflet 开源地图 + Google Maps 备选
🔍 搜索功能	按标题、地点、描述搜索
🏷️ 分类筛选	风景、城市、人文、历史四大类
🖼️ 大图预览	点击查看大图 + 快捷导航
📝 详细信息	日期、地点、坐标、留言
🌍 谷歌地球联动	地图标记点显示对应照片

快速开始（3步）

1️⃣ 准备照片

将你的照片放在 /img/photos/ 目录

推荐规格：

尺寸：1200×1200px（方形）
格式：JPG（<200KB）

2️⃣ 获取地理坐标

使用 Google Maps 或高德地图获取照片地点的经纬度

示例：

北京长城：40.4319, 116.0073
上海外滩：31.2304, 121.4737

3️⃣ 编辑照片数据

编辑 _data/photos.json 添加照片信息：

{
  "id": 7,
  "title": "你的照片标题",
  "category": "风景",
  "location": "地点名称",
  "latitude": 40.4319,
  "longitude": 116.0073,
  "description": "照片的详细描述",
  "image": "/img/photos/your-photo.jpg",
  "date": "2024-05-15",
  "notes": "你的留言或提示"
}

完成！🎉 访问 /gallery 查看你的相册。

📋 数据格式详解

完整的照片对象

{
  "id": 1,                                    // 唯一ID，从1开始递增
  "title": "北京长城",                        // 照片标题
  "category": "风景",                         // 分类：风景/城市/人文/历史
  "location": "北京",                         // 地点名称
  "latitude": 40.4319,                       // 纬度（北半球为正数）
  "longitude": 116.0073,                     // 经度（东半球为正数）
  "description": "壮观的长城风景，俯瞰群山", // 详细描述
  "image": "/img/photos/beijing-great-wall.jpg", // 图片路径
  "date": "2024-05-15",                      // 拍摄日期（YYYY-MM-DD）
  "notes": "清晨去的，人比较少，天气晴朗"    // 留言/提示
}

字段说明

字段	类型	必需	说明
`id`	数字	✓	唯一标识，决定导航顺序
`title`	字符串	✓	照片的标题
`category`	字符串	✓	必须是：风景/城市/人文/历史
`location`	字符串	✓	地点名称
`latitude`	数字	✓	纬度（-90 ~ 90）
`longitude`	数字	✓	经度（-180 ~ 180）
`description`	字符串	✓	照片描述
`image`	字符串	✓	图片文件路径
`date`	字符串	✓	日期（格式：YYYY-MM-DD）
`notes`	字符串	✓	留言或提示信息

🗺️ 地图功能

Leaflet 地图（默认）

优点：开源免费，无需 API 密钥，立即可用
数据源：OpenStreetMap
功能：标记点显示、弹窗预览、缩放平移

Google Maps（备选）

优点：官方地图，更精准，街景支持
需求：需要 Google Maps API 密钥
配置：在 gallery.html 中替换 API 密钥

切换到 Google Maps

获取 API 密钥：https://console.cloud.google.com
在 gallery.html 中找到地图初始化代码
替换为 Google Maps API 调用
点击地图中的 “📍 Google” 按钮

🎨 分类和颜色

四大分类

分类	表情	颜色	用途
风景	🏔️	#7cb342（绿色）	山水、自然风景
城市	🏙️	#42a5f5（蓝色）	城市街景、建筑
人文	👥	#ff6b9d（红色）	文化、传统建筑
历史	🏛️	#e63946（深红）	古迹、历史建筑

自定义分类

想要更多分类？编辑 gallery.html 中的筛选按钮：

<button class="filter-btn" data-category="新分类">🎨 新分类</button>

然后在 _data/photos.json 中使用这个新分类。

🔍 搜索功能

搜索框会在以下字段中搜索：

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

搜索实时生效，无需提交表单。

示例：

搜索 “长城” → 找到所有标题或描述包含”长城”的照片
搜索 “北京” → 找到所有地点为北京的照片

⌨️ 快捷键

在大图预览模式中：

快捷键	功能
`←` 左箭头	上一张
`→` 右箭头	下一张
`ESC`	关闭预览

📱 响应式设计

屏幕	布局
💻 桌面（>1200px）	地图左 + 控制中 + 照片网格右
📱 平板（480-1200px）	地图上 + 控制中 + 照片网格下
📱 手机（<480px）	全部堆叠，照片 2 列网格

🛠️ 高级配置

修改地图中心点

编辑 gallery.html 中的地图初始化：

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

修改分类颜色

编辑 gallery.html 中的 getColorByCategory 函数：

function getColorByCategory(category) {
  const colors = {
    '风景': '#7cb342',
    '城市': '#42a5f5',
    '人文': '#ff6b9d',
    '历史': '#e63946'
  };
  return colors[category] || '#ffd700';
}

修改每行显示数量

编辑 _sass/_gallery.scss：

.photos-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  // 改变 280px 来调整卡片宽度
}

🌐 获取地理坐标

方法 1：Google Maps（推荐）

打开 https://maps.google.com
搜索地点
右键点击地点 → 复制显示的坐标
坐标格式：40.4319, 116.0073

方法 2：高德地图

打开 https://amap.com
搜索地点
点击左侧”查询特征” → 点击地点
弹出窗口显示坐标

方法 3：OpenStreetMap

打开 https://openstreetmap.org
搜索地点或点击地图
左侧显示坐标
点击坐标可查看详情

📸 批量导入照片

如果你有很多照片，可以使用这个 Python 脚本自动生成 JSON：

import json
import os
from datetime import datetime

photos = []
photo_dir = "img/photos"

for i, filename in enumerate(os.listdir(photo_dir), 1):
    if filename.endswith(('.jpg', '.png', '.webp')):
        photos.append({
            "id": i,
            "title": filename.replace(os.path.splitext(filename)[1], ""),
            "category": "风景",
            "location": "待填写",
            "latitude": 0.0,
            "longitude": 0.0,
            "description": "待填写",
            "image": f"/{photo_dir}/{filename}",
            "date": datetime.now().strftime("%Y-%m-%d"),
            "notes": "待填写"
        })

with open('_data/photos.json', 'w', encoding='utf-8') as f:
    json.dump({"photos": photos}, f, ensure_ascii=False, indent=2)

🚀 性能优化

图片优化

压缩图片：使用 TinyPNG、Squoosh 等工具
格式选择：JPG（照片）> PNG（截图）> WebP（现代浏览器）
大小目标：<200KB per image

加载优化

地图使用 CDN 加载 Leaflet
照片使用懒加载（可选）
JSON 数据静态生成

⚠️ 常见问题

Q: 地图不显示？

A: 检查网络连接，确保 Leaflet CDN 能访问。清除浏览器缓存后重试。

Q: 照片显示模糊？

A: 提高图片分辨率，推荐至少 1200×1200px。

Q: 无法找到地点坐标？

A: 使用 Google Maps 或高德地图搜索确切地址，然后获取坐标。

Q: 想用自己的地图？

A: 编辑 gallery.html 替换 Leaflet 为其他地图库（Mapbox、Cesium 等）。

Q: 如何显示更多信息？

A: 在 _data/photos.json 添加新字段，然后在 gallery.html 模态框中渲染。

📚 文件结构

blog/
├── gallery.html                    # 相册主页面
├── _data/
│   └── photos.json                # 照片数据
├── _sass/
│   └── _gallery.scss              # 相册样式
├── img/
│   └── photos/                    # 照片目录
│       ├── photo1.jpg
│       ├── photo2.jpg
│       └── README.md
└── assets/
    └── styles.scss                # 主样式（已包含gallery）

🎯 下一步

✅ 创建 /img/photos/ 目录
✅ 准备你的照片（推荐 1200×1200px）
✅ 编辑 _data/photos.json 添加照片信息
✅ 访问 /gallery 查看相册
✅ 分享你的旅行照片！

🌟 高级玩法

连接 Exif 数据

如果照片有 Exif 数据（GPS 信息），可以自动提取坐标：

使用工具：piexif、Pillow 等可以自动从照片提取元数据。

与其他功能整合

在博客文章中链接到相册
在首页展示最新照片
创建照片时间轴

分享功能

可以添加社交分享按钮，让访客分享你的照片。

现在就开始上传你的旅行照片吧！ 🌍📸✨