一、相册功能开关在哪#

先看：

1
src/config/siteConfig.ts

你要确保这里打开：

1
pages: {
2
  gallery: true,
3
}

如果这里是 false，即使你配了相册内容，页面也不会正常作为站点功能开放。

二、相册配置文件在哪#

1
src/config/galleryConfig.ts

你现在这个项目里已经有一个示例相册。

三、相册图片应该放哪里#

1
public/gallery/

每一个相册都对应这里的一个子目录。

比如配置里写：

1
id: "firefly-2026"

那么图片目录就应该是：

1
public/gallery/firefly-2026/

四、怎么添加一个相册#

在 galleryConfig.ts 里加一个数组项即可：

1
albums: [
2
  {
3
    id: "my-trip-2026",
4
    name: "我的旅行相册",
5
    description: "记录一次旅行中的照片",
6
    location: "杭州",
7
    date: "2026-04-23",
8
    tags: ["旅行", "摄影"],
9
  },
10
]

然后在下面这个目录里放图片：

1
public/gallery/my-trip-2026/

五、封面图规则怎么理解#

有 3 种情况：

1
cover: "cover.avif"

1
cover.avif
2
cover.webp
3
cover.jpg

六、支持哪些图片格式#

常见支持：

• jpg
• png
• webp
• avif
• gif

如果你只是日常用，推荐优先用：

• webp
• avif

因为体积更小。

七、访问地址怎么理解#

1
/gallery/

1
/gallery/相册id/

1
/gallery/my-trip-2026/

八、列数和瀑布流怎么调#

在 galleryConfig.ts 里：

1
columnWidth: 240

这个值的意思可以简单理解成：

• 数值越小，同屏列数越多
• 数值越大，同屏列数越少

如果你觉得图片太挤，就把它调大一点。

九、新手最稳的添加步骤#

建议按这个顺序做：

1. 先在 siteConfig.ts 打开 gallery: true
2. 在 galleryConfig.ts 新增一个相册
3. 去 public/gallery/相册id/ 放图片
4. 刷新本地页面检查
5. 没问题再推送

十、常见问题#

最后总结#

相册功能其实很好记：

• 相册信息写在 galleryConfig.ts
• 相册图片放在 public/gallery/
• 每个相册一个目录

如果你后面想把博客做得更完整，这个功能非常值得补上。