> ## Documentation Index
> Fetch the complete documentation index at: https://help.helloazhenweb.top/llms.txt
> Use this file to discover all available pages before exploring further.

# 生日倒计时 — 实时显示剩余天数

> 首页的倒计时按天、时、分、秒实时跳动至下一个生日，并在当天切换为整屏的庆祝画面。

首页围绕一个实时倒计时构建，它直接在浏览器中每秒更新一次。倒计时会从你的配置中读取生日日期，并精确计算剩余时间。当生日来临时，整个倒计时显示会被一段完整的庆祝信息替换 — 无需刷新页面。

## 倒计时的工作方式

倒计时在浏览器中每秒更新一次。每次更新时，它会计算当前时间与下一个配置生日之间的差值。

```
Days  :  Hours  :  Minutes  :  Seconds
 042      08        31          07
```

分钟单位会以翠绿色渲染以吸引视线。所有四个单位都会补零至两位数，因此布局不会随数字变化而抖动。

### 自动滚动到下一年

一旦生日过去，目标日期会自动顺延到下一年同月同日。你不需要在每次生日后更新任何配置。

```typescript theme={null}
if (today > thisYearBirthday) {
  thisYearBirthday = new Date(today.getFullYear() + 1, month - 1, day);
}
```

## 生日当天的庆祝画面

当四个倒计时单位全部归零 — 即今天就是生日时 — 计时器会被隐藏，并替换为：

* 一个大号的 **生日快乐** 标题
* 你在配置中设置的 `greeting` 信息，或默认的 `"祝你生日快乐"`
* 一个 **送上祝福** 按钮，直接链接到 `/write`，让访客可以立即留言

## 漂浮歌词动画

在整个首页中，简短的歌词片段会从随机位置向上浮起，并在五秒内淡出。每两秒就会出现一段新的片段。这些氛围歌词由一条 CSS 动画驱动，让文字向上漂浮再淡出。

<Tip>
  首页上展示的歌词与 `lib/music-config.ts` 中按歌曲配置的歌词是分开的。如果要修改首页背景漂浮的歌词内容，请直接编辑首页源文件。
</Tip>

## 配置生日日期

生日日期和显示名称在 `lib/birthday-config.ts` 中设置。该文件导出一个 `BirthdayPerson` 接口和一个 `birthdayConfig` 对象。

```typescript theme={null}
export interface BirthdayPerson {
  name: string;
  nickname?: string;
  birthday: {
    month: number; // 1-12
    day: number;   // 1-31
  };
  greeting?: string;
}
```

| 字段               | 必填 | 说明                       |
| ---------------- | -- | ------------------------ |
| `name`           | 是  | 作为首页标题显示。                |
| `nickname`       | 否  | 可选的简短称呼，用于应用中的其他位置。      |
| `birthday.month` | 是  | 月份数字（1 = 一月，12 = 十二月）。   |
| `birthday.day`   | 是  | 当月的日期。                   |
| `greeting`       | 否  | 显示在倒计时下方和生日当天画面中的自定义祝福语。 |

<Note>
  倒计时使用的是访客浏览器的本地系统时间，而非服务器时钟。如果生日落在某个时区的午夜，那么其他时区的访客看到庆祝画面的本地时间可能会略有不同。
</Note>