主题与布局

Vergil 的相册系统采用可扩展的主题架构——你可以使用内置主题，也可以自己动手制作新主题。

多主题系统

相册主题的核心是一个注册表机制。每个主题是一个独立的组件包，在注册表中登记后，相册 Markdown 文件的 theme 字段就能调用它。

目前内置的相册主题如下：

Golden 主题

Golden 主题采用深色背景配合金色强调色，营造出高端、沉稳的视觉氛围。

---
theme: 'golden'
background: '#0a0a0a'
accent: '#C8A464'
layout: 'grid'
photoFit: 'cover'
---

特点：

• 全屏视频 Hero + 金色调视觉
• 建筑/空间摄影风格
• 编号图片展示
• EXIF 信息栏

Seasons 主题

Seasons 主题专为四季摄影设计，支持季节过滤、诗歌卡片、时间控制台和粒子动画。

---
theme: 'seasons'
background: '#0d0d12'
accent: '#C8A464'
layout: 'grid'
seasonFilter: true
seasonDefault: 'summer'
---

特点：

• 四季背景视频
• Polaroid 风格卡片
• 季节过滤标签（春/夏/秋/冬）
• 诗歌卡片与时间控制台
• 季节粒子特效

季节过滤 (seasonFilter: true) 会在页面顶部显示季节切换标签。需要在 images 中为每张照片指定 season 字段：

images:
  - src: '@img/albums/my-album/spring/cherry.jpg'
    season: 'spring'
  - src: '@img/albums/my-album/summer/beach.jpg'
    season: 'summer'

布局方式

布局独立于主题，任何主题都可以搭配任意布局。

Grid 布局

最常用的布局方式，照片以规则网格排列。

---
layout: 'grid'
photoFit: 'cover'
---

• photoFit: 'cover' — 图片裁剪填满网格（默认）
• photoFit: 'contain' — 完整显示图片，可能有留白
• photoFit: 'auto' — 保持原始比例

Masonry 布局

瀑布流布局，适合竖图横图混合的照片集。

---
layout: 'masonry'
---

Timeline 布局

按时间顺序排列，适合有明确拍摄时间线的摄影项目。

---
layout: 'timeline'
---

Carousel 布局

轮播展示，适合少量精选照片的全屏展示。

---
layout: 'carousel'
---

自定义主题

如果你想制作自己的相册主题，只需三步：

1. 创建主题目录

src/components/album/themes/└── mytheme/              ← 你的主题名    ├── index.astro       ← 主题入口组件（必须）    ├── MyHero.astro      ← 可选：Hero 区域    ├── MyGallery.astro   ← 可选：画廊区域    └── ...               ← 其他子组件

2. 实现入口组件

index.astro 是主题的入口，接收统一的 Props：

---interface Props {    title: string;    description?: string;    images: Array<{        src: string;        alt?: string;        caption?: string;        featured?: boolean;        exif?: Record<string, string>;    }>;    layout?: string;    photoFit?: string;    background?: string;    accent?: string;    // ... 其他相册字段} const { title, description, images, layout, photoFit } = Astro.props;--- <div class="mytheme-wrapper">    <h1>{title}</h1>    <p>{description}</p>    <div class="gallery">        {images.map(img => (            <img src={img.src} alt={img.alt} />        ))}    </div></div> <style>    .mytheme-wrapper { /* 你的主题样式 */ }</style>

3. 注册到主题系统

打开 src/components/album/themes/index.ts，把你的主题加入注册表：

import GoldenTheme from './golden/index.astro';import SeasonsTheme from './seasons/index.astro';import MyTheme from './mytheme/index.astro';  // ← 新增 export const ALBUM_THEMES: Record<string, any> = {    golden: GoldenTheme,    seasons: SeasonsTheme,    mytheme: MyTheme,  // ← 注册};

注册完成后，在相册 Markdown 中通过 theme: 'mytheme' 即可使用。