输入关键词,开始搜索

↑↓ 选择 打开 esc 关闭
沉浸

相册创建

相册创建

相册存放在 src/content/albums/ 目录下,使用 Markdown 格式(.md)。

最小示例

---
title: '我的摄影集'
date: 2024-01-01
cover: ./cover.jpg
images:
  - src: ./photo1.jpg
    alt: '日落'
    caption: '海边日落'
---

这里是相册的介绍文字。

字段说明

字段必填说明
title相册标题
description相册简介,显示在列表页
date相册日期,用于排序
cover封面图路径,相对于当前文件
images照片数组(详见下方)
tags标签数组
theme主题:goldenseasons,默认 golden
layout布局:grid/masonry/timeline/carousel,默认 grid
photoFit图片填充:cover/contain/auto,默认 cover
background页面背景色,十六进制值
accent强调色,十六进制值
seasonFilter是否启用季节过滤(仅 seasons 主题),默认 false
seasonDefault默认展示的季节:spring/summer/autumn/winter

图片配置

images 是一个数组,每个元素支持以下字段:

字段必填说明
src图片路径,相对于当前文件
alt图片替代文字
caption图片说明,显示在图片下方
season季节标记:spring/summer/autumn/winter
featured是否精选,默认 false
exifEXIF 信息对象

EXIF 信息

images:
  - src: ./photo.jpg
    alt: '示例照片'
    caption: '黄昏时分'
    exif:
      camera: 'Sony'
      model: 'A7M4'
      focal: '35mm'
      aperture: 'f/1.4'
      shutter: '1/500s'
      iso: '200'
      datetime: '2024-01-15 18:30'
EXIF 字段说明
camera相机品牌
model相机型号
lens镜头型号
focal焦距
aperture光圈
shutter快门速度
isoISO 感光度
datetime拍摄时间

完整示例

---
title: '四季物语'
description: '记录四季流转中的自然与人文景观'
date: 2024-06-01
theme: 'seasons'
layout: 'grid'
photoFit: 'contain'
background: '#0d0d12'
accent: '#C8A464'
seasonFilter: true
seasonDefault: 'summer'
cover: ./hero.jpg
images:
  - src: ./spring/cherry.jpg
    alt: '樱花盛开'
    caption: '春天的第一缕温暖'
    season: 'spring'
    featured: true
    exif:
      camera: 'Sony A7M4'
      focal: '85mm'
      aperture: 'f/1.8'
      shutter: '1/500s'
      iso: '200'
  - src: ./summer/beach.jpg
    alt: '夏日海滩'
    caption: '阳光与海浪'
    season: 'summer'
tags: ['四季', '自然']
---

## 关于本期

这是一组以季节为主题的摄影作品集。

图片存放位置

相册相关的图片(封面、照片)建议与 .md 文件放在同一目录或子目录下,使用相对路径引用:

albums/
  my-album.md
  cover.jpg
  spring/
    cherry.jpg
  summer/
    beach.jpg

图片引用详解

封面图(cover)

封面图用于相册列表页的缩略图展示,引用方式与 images 中的照片相同:

---
cover: ./hero-golden.jpg
---

cover 的路径规则与 images[].src 一致:相对当前 .md 文件所在目录。

相对路径规则

相册中的图片使用相对于 .md 文件的路径引用:

写法含义示例
./photo.jpg同一目录下的图片albums/my-album.md 引用 albums/photo.jpg
./spring/cherry.jpg子目录下的图片albums/spring/cherry.jpg
Tip

不要使用绝对路径(如 /images/photo.jpg),Astro Content Collections 的图片优化只支持相对于 .md 文件的路径。使用绝对路径会导致图片无法被正确处理和优化。

Astro 图片优化

Vergil 使用 Astro 内置的图片优化系统,相册中的 coverimages[].src 会在构建时自动进行以下处理:

  • 格式转换 — 自动转换为 WebP/AVIF 等现代格式
  • 尺寸适配 — 根据展示尺寸生成合适大小的图片
  • 懒加载 — 页面外的图片延迟加载,提升首屏速度

因此,存放原始图片时无需预先压缩。建议:

  • 使用原始分辨率的照片(构建时会自动压缩)
  • 图片格式支持 JPG、PNG、WebP
  • 单张图片文件大小建议不超过 10MB

推荐目录结构

src/content/albums/
  my-album.md
  hero.jpg              ← 封面图
  photo-1.jpg           ← 单张照片
  photo-2.jpg
  spring/               ← 按主题/季节分目录
    cherry.jpg
    tulip.jpg
  summer/
    beach.jpg
    sunset.jpg
Tip

照片文件建议统一放在相册目录下,方便管理和引用。使用 Astro 的图片优化时,路径需要能被正确解析。

未知标题
00:00
00:00
播放列表