照片墙使用说明

一个本地照片墙网页，支持多相册分类、瀑布流布局、点击看大图、明暗主题切换。 现在已做成**全自动**：加照片或加相册后双击一个 bat 就能更新，无需改代码。 ——— ## 一、日常使用：加照片 / 加相册 只有一步： 1. 把照片放进对应的相册文件夹（如 `gz/`、`son1year/`，或你新建的任意文件夹） 2. 双击 **`生成缩略图.bat`** 脚本会自动完成：生成缺失的缩略图 → 登记新文件夹 → 刷新相册清单。之后用浏览器打开 `index.html`（建议刷新/清缓存）即可看到更新，**相册按钮、图片数量全部自动同步**。 > 加了照片却没显示？多半是浏览器缓存，按 Ctrl+F5 强制刷新即可。 ### 新建一个相册 直接在项目根目录新建一个文件夹（例如 `travel`），把照片放进去，双击 bat。网页就会自动多出一个相册，默认用文件夹名当标题（想改成中文名见下一节）。 --- ## 二、给相册起名 / 调整顺序 打开 **`albums_config.json`**（这是**唯一需要你手动编辑**的文件），它长这样： ```json [ { "dir": "gz", "name": "广州婚纱照" }, { "dir": "sz", "name": "深圳婚纱照" }, { "dir": "son", "name": "儿子满月照" }, { "dir": "son100", "name": "儿子百日照" }, { "dir": "son1year", "name": "儿子周岁照" } ] ``` - **改名字**：修改某一行的 `name`（引号里的中文），例如把新相册 `travel` 改成 `{ "dir": "travel", "name": "出游照" }` - **调顺序**：上下调整这些行的先后，数组里越靠前的相册在网页上越靠左，第一个默认选中 - `dir` 是文件夹名，**不要改**（要和实际文件夹一致） 改完保存，再双击一次 `生成缩略图.bat` 生效。 --- ## 三、文件夹结构说明 ``` 2026.5.21/ ├─ index.html ← 网页主文件，双击/部署它 ├─ styles.css ← 样式 ├─ script.js ← 逻辑（一般不用动） ├─ masonry.pkgd.min.js ← 瀑布流库（本地，勿删） ├─ orange.svg ← 网页图标 ├─ fallback.jpg ← 图片加载失败时的占位图 │ ├─ 生成缩略图.bat ← 【双击这个】更新缩略图和相册清单 ├─ make_thumbs.py ← bat 调用的脚本（勿删） ├─ albums_config.json ← 【你来编辑】相册名称与顺序 ├─ albums.js ← 自动生成的相册清单（勿手动改） │ ├─ gz/ sz/ son/ … ← 各相册的【原图】（点开看大图用，请用 webp） └─ thumb/ ├─ gz/ sz/ son/ … ← 各相册的【缩略图】（自动生成，网格展示用） ``` 要点： - **原图放在顶层文件夹**（`gz/` 等），**缩略图在 `thumb/` 下**由脚本自动生成 - 原图请使用 **webp 格式**（点开看大图直接用原图，文件名需和缩略图一致） - `albums.js` 由脚本自动生成，**不要手动编辑**；要改相册信息请改 `albums_config.json` --- ## 四、缩略图脚本的进阶用法（可选） 一般直接双击 bat 即可。若想自定义，可在命令行运行： | 命令 | 作用 | |---|---| | `生成缩略图.bat` | 增量生成（只处理新增/改动的图） | | `生成缩略图.bat --force` | 强制重新生成全部缩略图 | | `生成缩略图.bat --width 800 --quality 82` | 自定义缩略图最大宽度 / 质量 | 默认参数：最大宽度 640px、质量 80（等比缩放，长宽比不变）。 --- ## 五、在服务器（Debian）上增删相册 服务器上无需 Pillow，只需更新相册清单即可。项目里附带了 `update_albums.sh`，传到服务器后： ```bash # 首次赋予执行权限（只需一次） chmod +x update_albums.sh # 增加或删除了相册文件夹后，跑一下： ./update_albums.sh ``` 脚本会自动检测哪些文件夹被新增或删除，更新 `albums_config.json` 和 `albums.js`，网页立即同步。 如果服务器上装了 Pillow，也可以在服务器端重新生成缩略图： ```bash ./update_albums.sh --full ``` > **直接用 Python 也可以：** > - 仅更新清单：`python3 make_thumbs.py --update-only` > - 完整运行（含缩略图）：`python3 make_thumbs.py` --- ## 六、常见问题 **双击 bat 提示"未找到 Python"？** 需要先安装 Python：<https://www.python.org/downloads/>，安装时务必勾选 **"Add Python to PATH"**。装好后再双击 bat（首次运行会自动安装图片处理库 Pillow）。 **网页打开是空白 / 提示"未找到相册"？** 先双击一次 `生成缩略图.bat` 生成 `albums.js`，再打开网页。 **想换默认显示的相册？** 在 `albums_config.json` 里把那个相册挪到数组第一位即可。 **在服务器上删了相册但网页还显示？** 在项目目录下运行 `./update_albums.sh`（或 `python3 make_thumbs.py --update-only`）即可。 --- ## 七、放到服务器上（可选） 把整个文件夹上传即可。想进一步提速，参见同目录的 **`部署调优清单.md`**，最关键的三步是：开启 HTTP/2、给图片设长缓存、对文本(html/css/js)开启压缩。