逍遥之韶

欲穷千里目，更上一层楼。

1359 字

7 分钟

博客相册使用说明

2025-10-10

博客

Astro框架博客

/

相册设定

🖼️ 相册 #

1. 功能支持#

相册系统支持两种存储模式和灵活的显示控制。

存储模式
- 本地模式：图片存储在服务器本地文件系统
- 外链模式：图片通过外部链接引用
显示控制
- 自动扫描图片、生成相册
- 支持多种布局：网格、瀑布流
- 相册隐藏控制
- 标签和元数据管理

2. 模式说明#

2.1 模式对比#

特性	本地模式	外链模式
图片存储	本地文件系统	外部链接
加载速度	快速	取决于外部服务
存储成本	占用服务器空间	无本地存储成本
稳定性	高	取决于外部服务
配置复杂度	简单	中等
适用场景	个人网站、小型项目	大量图片、CDN优化

2.2 文件夹组织结构#

1
public/images/albums/
2
├── 相册名称1/
3
│   ├── info.json          # 必需：相册配置
4
│   ├── cover.jpg          # 本地模式必需：封面图
5
│   ├── photo1.jpg         # 本地模式：相册图片
6
│   └── photo2.png
7
├── 相册名称2/
8
│   └── info.json          # 外链模式只需配置文件
9
└── ...

2.3 基础设定#

2.3.1 配置文件#

每个相册都需要一个 info.json 配置文件，位于相册文件夹内。

2.3.2 通用字段说明#

字段	类型	必需	说明
`mode`	string	否	不设置：本地模式，external ：外链模式
`hidden`	boolean	否	是否隐藏相册，true 为隐藏
`title`	string	否	相册标题
`description`	string	否	相册描述
`date`	string	否	创建日期，格式：YYYY-MM-DD
`location`	string	否	拍摄地点
`tags`	array	否	标签数组
`layout`	string	否	布局方式：`grid` 或 `masonry`
`columns`	number	否	列数，默认 3

2.3.3 支持的图片格式#

.jpg / .jpeg
.png
.gif
.webp
.svg
.avif
.bmp
.tiff / .tif

2.4 本地模式详解#

2.4.1 文件结构#

1
相册名称/
2
├── info.json              # 配置文件
3
├── cover.jpg              # 封面图（必需）
4
├── 图片1.jpg
5
├── 图片2.png
6
├── 图片3.gif
7
└── ...

2.4.2 文件命名规则#

封面图片必须命名为 cover.jpg
其他图片可以任意命名
支持中文文件名
建议使用有意义的文件名

2.5 外链模式详解#

2.5.1 文件结构#

1
相册名称/
2
└── info.json          # 配置文件

外链模式需要在 info.json 中完整定义所有图片信息。

2.5.2 照片字段说明#

字段	类型	必需	说明
`id`	string	否	唯一标识符，不设置会自动生成
`src`	string	`是`	图片链接地址
`thumbnail`	string	否	缩略图链接
`alt`	string	否	替代文本
`title`	string	否	图片标题
`description`	string	否	图片描述
`tags`	array	否	图片标签
`date`	string	否	拍摄日期
`location`	string	否	拍摄地点
`width`/`height`	number	否	图片尺寸
`camera`	string	否	相机型号
`lens`	string	否	镜头信息
`settings`	object	否	拍摄参数

2.5.3 完整版配置示例#

1
{
2
  "mode": "external",
3
  "title": "风景摄影集",
4
  "description": "来自世界各地的美丽风景",
5
  "date": "2024-08-20",
6
  "location": "全球",
7
  "tags": ["风景", "摄影", "自然"],
8
  "layout": "masonry",
9
  "columns": 3,
10
  "cover": "https://cdn.example.com/albums/landscape/cover.jpg",
11
  "photos": [
12
    {
13
      "id": "mountain-sunset",
14
      "src": "https://cdn.example.com/photos/mountain-sunset.jpg",
15
      "thumbnail": "https://cdn.example.com/thumbs/mountain-sunset.jpg",
16
      "alt": "山顶日落",
17
      "title": "阿尔卑斯山日落",
18
      "description": "在阿尔卑斯山顶拍摄的壮丽日落景象",
19
      "tags": ["山脉", "日落", "阿尔卑斯"],
20
      "date": "2024-07-15",
21
      "location": "瑞士阿尔卑斯山",
22
      "width": 1920,
23
      "height": 1080,
24
      "camera": "Canon EOS R5",
25
      "lens": "RF 24-70mm f/2.8L IS USM",
26
      "settings": {
27
        "aperture": "f/8",
28
        "shutter": "1/125",
29
        "iso": "200",
30
        "focal": "35mm"
31
      }
32
    },
33
    {
34
      "id": "ocean-waves",
35
      "src": "https://cdn.example.com/photos/ocean-waves.jpg",
36
      "alt": "海浪",
37
      "title": "太平洋海浪",
38
      "tags": ["海洋", "海浪"],
39
      "width": 1920,
40
      "height": 1280
41
    }
42
  ]
43
}

2.5.4 外链服务推荐#

免费服务：Imgur、Cloudinary（有免费额度）
付费CDN：阿里云OSS、腾讯云COS、AWS S3
图床服务：SM.MS、路过图床
GitHub：注意使用限制

3. 隐藏功能#

3.1 使用方法#

在任何模式的 info.json 中添加 "hidden": true 即可隐藏相册。

"hidden": true：隐藏相册
"hidden": false ：显示相册

3.2 隐藏行为#

相册不会出现在相册列表页面
不是真正的访问控制：文件仍然保留在服务器上，知道直接链接仍可访问

3.3 使用场景#

临时隐藏：维护期间暂时隐藏
私人内容：不想公开展示的相册
测试相册：开发测试用途
未完成相册：正在整理中的内容
季节性展示：特定时期才显示

4. 相册配置示例#

4.1 本地模式相册#

1
{
2
  "title": "家庭聚会",
3
  "description": "2024年春节家庭聚会的温馨时光",
4
  "date": "2024-02-10",
5
  "location": "北京",
6
  "tags": ["家庭", "春节", "聚会"],
7
  "layout": "grid",
8
  "columns": 4
9
}

4.2 外链模式相册#

1
{
2
  "mode": "external",
3
  "title": "街头摄影",
4
  "description": "城市街头的生活瞬间",
5
  "date": "2024-06-15",
6
  "location": "上海",
7
  "tags": ["街头", "摄影", "城市"],
8
  "layout": "masonry",
9
  "columns": 3,
10
  "cover": "https://cdn.example.com/street/cover.jpg",
11
  "photos": [
12
    {
13
      "src": "https://cdn.example.com/street/photo1.jpg",
14
      "alt": "街头行人",
15
      "title": "匆忙的脚步",
16
      "tags": ["行人", "街头"]
17
    },
18
    {
19
      "src": "https://cdn.example.com/street/photo2.jpg",
20
      "alt": "咖啡店",
21
      "title": "角落的咖啡店",
22
      "tags": ["咖啡", "店铺"]
23
    }
24
  ]
25
}

4.3 隐藏的外链模式相册#

1
{
2
  "mode": "external",
3
  "hidden": true,
4
  "title": "测试相册",
5
  "description": "用于测试的相册，暂时隐藏",
6
  "cover": "https://picsum.photos/800/600",
7
  "photos": [
8
    {
9
      "src": "https://picsum.photos/800/600?random=1",
10
      "alt": "测试图片"
11
    }
12
  ]
13
}

5. 最佳实践经验#

本地模式：压缩图片以节省空间和提高加载速度
外链模式：使用CDN和适当的图片格式以提高访问速度
建议尺寸：封面图建议800x600，相册图片建议不超过2000px
标签管理：避免过多的标签，建议只使用3到5个标签
- "tags": ["事件标签", "人物标签", "地点标签"]
布局选择
- Grid布局：适合尺寸相近的图片
- Masonry布局：适合尺寸差异较大的图片
- 列数设置：手机端建议1-2列，桌面端3-4列

OpenCV：绘图与交互

博客日记使用说明

有朋自远方来，不亦乐乎？

🖼️ 相册#

1. 功能支持#

2. 模式说明#

2.1 模式对比#

2.2 文件夹组织结构#

2.3 基础设定#

2.3.1 配置文件#

2.3.2 通用字段说明#

2.3.3 支持的图片格式#

2.4 本地模式详解#

2.4.1 文件结构#

2.4.2 文件命名规则#

2.5 外链模式详解#

2.5.1 文件结构#

2.5.2 照片字段说明#

2.5.3 完整版配置示例#

2.5.4 外链服务推荐#

3. 隐藏功能#

3.1 使用方法#

3.2 隐藏行为#

3.3 使用场景#

4. 相册配置示例#

4.1 本地模式相册#

4.2 外链模式相册#

4.3 隐藏的外链模式相册#

5. 最佳实践经验#

🖼️ 相册 #