相册创建
相册创建
相册存放在 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 | 否 | 主题:golden 或 seasons,默认 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 |
exif | 否 | EXIF 信息对象 |
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 | 快门速度 |
iso | ISO 感光度 |
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 内置的图片优化系统,相册中的 cover 和 images[].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 的图片优化时,路径需要能被正确解析。