主题与布局

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

多主题系统

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

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

主题	风格	适用场景
Golden	深色背景 + 金色点缀	建筑摄影、黑白作品、商业摄影
Seasons	四季主题 + 背景视频	自然风光、旅行摄影、四季记录

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: ./spring/cherry.jpg
    season: 'spring'
  - src: ./summer/beach.jpg
    season: 'summer'

布局方式

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

布局	说明	适用场景
grid	规则网格排列	风格统一、数量适中的照片
masonry	瀑布流，高度自适应	竖图横图混合的照片集
timeline	按时间线排列	有明确拍摄时间线的项目
carousel	轮播图展示	少量精选照片

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' 即可使用。