相册与照片墙维护指南

归档68

算法竞赛37 博客指南19 闲谈杂录6 工具学习3 深入技术2 文章示例1

935 字

5 分钟

相册与照片墙维护指南

2026-09-07

浏览量-

📖 相册的组成（记牢这个模型）#

每个相册 = 两处配置 + 一处照片来源，任何相册的增删改都逃不出这个框架：

1
① galleryConfig.ts 里加一个「相册对象」  ← 定义名字/密码/封面
2
        ↕ 靠 id 对应
3
② public/gallery/<相册id>/ 目录          ← 照片来源所在
4
        │
5
        ├─ 直接放目录里的图片文件
6
        └─ urls.txt（每行一个远程图片链接）★ 本站主力

本站照片都放对象存储，所以 public/gallery/<id>/ 目录里通常只有一个 urls.txt，图片本体不在仓库里。

一、相册对象的字段（配置在 `src/config/galleryConfig.ts`）#

1
{
2
    id: "trip-2026",            // 唯一标识 = 目录名 = 网址路径，三者必须一致
3
    name: "2026 旅行",          // 相册显示名（必填）
4
    description: "走过的地方",   // 描述
5
    date: "2026-09-07",        // 日期 YYYY-MM-DD
6
    location: "云南",           // 拍摄地
7
    tags: ["旅行", "风景"],      // 标签数组
8
    cover: "https://…",        // 手动指定封面（可选，规则见下）
9
    password: "你的密码",        // 填了就加密（存的是明文字符串，见下方安全提醒）
10
    passwordHint: "给访客的提示",// 密码提示（可选）
11
}

封面三选一规则#

你怎么写	封面是谁
不填 `cover`，目录里有 `cover.*` 图片文件	自动用 `cover.*`
不填 `cover`，也没 `cover.*`	自动用目录里第一张照片
填了 `cover: "https://…"`	用你指定的这张

⚠️ 加密相册的安全提醒#

password 字段的密码会明文写在 galleryConfig.ts 里，而 src/ 源码会打进线上包。加密相册适合「防路人、防误点」级别，别拿来存真正机密。文档示例一律写占位符，别在文章里贴真实相册密码。

二、新增一个相册（两步）#

① 建目录 + 放照片清单

1
public/gallery/trip-2026/urls.txt

urls.txt 每行一个图片链接，# 开头是注释：

1
# 2026 云南旅行
2
https://cdn.xxx.top/gallery/yunnan-1.webp
3
https://cdn.xxx.top/gallery/yunnan-2.webp

（也可以直接把图片文件丢进目录，系统会全部自动扫描收录，jpg/png/webp/avif/gif 都认。）

② 在 galleryConfig.ts 的 albums 数组里加相册对象（见上），保存 → git 三连 → 上线。

三、照片墙 / 相册页怎么显示（两个机制）#

站点有两处用到相册：

主页照片墙 —— 只显示 homeAlbumId 指定的那个相册的前 6 张：

1
homeAlbumId: "photo-wall",   // 想换主页照片墙的内容，就改这里指向别的相册 id

相册页 /gallery/ —— 列出 albums 数组里的全部相册（加密的点击要输密码），点进 /gallery/<相册id>/ 看全部照片。

想让一个相册既出现在相册页、又出现在主页照片墙：把它 id 填给 homeAlbumId 即可。主页照片墙是「绑定某个相册的前 6 张」，不是自动挑最新的——这是刻意的设计，避免加密相册被无密码展示。

四、日常维护操作速查#

想干什么	操作
往现有相册加照片	图片传图床 → `urls.txt` 加一行 → 想放最前面就插到首行
换相册封面	填 `cover: "https://…"`，或目录里放 `cover.*`
改相册名/描述	改 `galleryConfig.ts` 里对应对象
加密/解除加密	加/删 `password` 字段
主页换一批照片	改 `homeAlbumId` 指向别的相册
删除相册	两处一起删：`albums` 数组去掉对象 + 删掉 `public/gallery/<id>/` 目录