一个纯前端的静态照片展示网站，支持分类筛选、灯箱预览、主题切换等功能。
- 照片分类管理 - 通过文件夹结构自动生成分类
- 分类筛选 - 点击标签快速筛选照片
- 灯箱预览 - 点击照片全屏查看，支持键盘操作
- 主题切换 - 支持浅色/深色主题，偏好自动保存
- 响应式设计 - 完美适配手机、平板、桌面设备
- 自动更新 - 文件夹变化时自动重新扫描
├── index.html # 主页面
├── styles.css # 样式文件
├── app.js # 前端交互逻辑
├── photos_data.js # 自动生成的照片数据
├── gen_photos.py # 照片数据生成脚本
├── watch_photos.py # 文件夹监听脚本
├── photos/ # 照片存放目录
│ ├── 全部/ # 根目录照片
│ ├── 风景/ # 风景分类
│ └── 美食/ # 美食分类
└── README.md # 项目说明
本项目包含两个 Python 脚本，各司其职：
作用：扫描照片文件夹，自动生成前端所需的数据文件
功能：
- 扫描
photos/目录及其子目录 - 子文件夹名称自动作为分类名
- 根目录下的照片归入"全部"分类
- 生成
photos_data.js供前端引用
运行方式：
python gen_photos.py输出示例：
const photosData = [
{ "src": "photos/风景/黄山.jpg", "category": "风景", "name": "黄山" },
{ "src": "photos/全部/照片1.jpg", "category": "全部", "name": "照片1" }
];作用：监听照片文件夹变化，自动运行数据生成脚本
功能：
- 实时监控
photos/目录 - 检测到文件增删改时自动触发
- 带防抖机制，避免频繁执行
运行方式：
python watch_photos.py注意：需要先安装依赖 pip install watchdog
┌─────────────────────────────────────────────────────────┐
│ photos/ 目录 │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ 风景/ │ │ 美食/ │ │ 全部/ │ │
│ │ 黄山.jpg │ │ 火锅.jpg │ │ 照片1.jpg│ │
│ └──────────┘ └──────────┘ └──────────┘ │
└───────────────────────┬─────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────┐
│ gen_photos.py (Python) │
│ 扫描文件夹 → 提取分类 → 生成 JSON 数据 │
└───────────────────────┬─────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────┐
│ photos_data.js (自动生成) │
│ const photosData = [{ ... }, { ... }]; │
└───────────────────────┬─────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────┐
│ index.html + app.js (前端) │
│ 读取数据 → 渲染页面 → 交互功能 │
└─────────────────────────────────────────────────────────┘
- 照片存放：用户将照片放入
photos/目录，按子文件夹分类 - 数据生成：运行
gen_photos.py扫描目录，生成photos_data.js - 页面加载：前端通过
<script src="proxy.php?url=https%3A%2F%2Fgithub.com%2Fphotos_data.js">引入数据 - 交互响应：用户点击筛选/查看照片，前端读取
photosData数组渲染
- 纯静态 - 无需后端服务器，部署简单（GitHub Pages、Netlify 等）
- 自动生成 - 避免手动维护 JSON 数据
- 实时监听 - 后台运行
watch_photos.py，改动自动同步
# Python 3
python -m http.server 8000
# 或使用 PHP
php -S localhost:8000
# 或使用 Node.js
npx serve .在 photos/ 目录下：
- 直接放照片 → 属于"全部"分类
- 创建子文件夹 → 文件夹名为分类名
photos/
├── 山.jpg → 全部
├── 大海.jpg → 全部
├── 风景/ → 分类：风景
│ ├── 黄山.jpg
│ └── 洱海.jpg
└── 美食/ → 分类：美食
├── 火锅.jpg
└── 烧烤.jpg
python watch_photos.py添加/删除照片后，刷新页面即可看到更新。
- 浅色主题（默认）：白色背景，深色按钮
- 深色主题：黑色背景，浅色按钮
- 偏好保存在 localStorage，刷新后保持
灯箱模式下：
ESC- 关闭←/→- 上一张/下一张
- HTML5 - 语义化结构
- CSS3 - 变量、Grid 布局、动画
- JavaScript - 原生 JS，无框架依赖
- Python - 数据生成、文件监听
上线后想要更新照片，有以下几种方案：
每次修改照片后，手动重新生成数据并上传：
# 1. 重新生成数据
python gen_photos.py
# 2. 提交代码
git add .
git commit -m "update photos"
# 3. 推送到远程仓库（如已配置自动部署）
git push每次 git push 后自动部署，无需手动操作。
步骤：
- 创建 GitHub 仓库，将代码推送上去
- 在仓库 Settings → Pages 中启用 GitHub Pages
- 每次更新照片后：
# 添加新照片到 photos 目录 cp /path/to/new_photos/* photos/ # 重新生成数据 python gen_photos.py # 提交并推送 git add . git commit -m "add new photos" git push
- GitHub Actions 会自动部署，页面自动更新
优点：免费、全自动、无需手动操作托管平台
如果照片更新非常频繁，可以考虑：
- Cloudinary：将照片上传到 Cloudinary，调用 API 获取照片列表
- 自建后端：使用 Node.js/Python 写一个 API，扫描服务器上的照片目录返回 JSON
- Chrome / Edge / Firefox / Safari 最新版
- 移动端浏览器
MIT