给 TA 的一份专属礼物

有些日子，你不会忘记，但总会想知道：我们在一起多久了？

可能是相恋的那天，可能是领证的那天，也可能是第一次旅行、第一次见家长。日子多了，记不住；想回忆的时候，又找不到地方。

Love Page 就是为了解决这个问题做的 —— 一个可以记录、展示、分享的情侣纪念日页面。

核心功能

打开页面，第一眼看到的是"今天"：在一起多少年、多少天、多少小时、多少秒。数字在跳动，每秒都在增加。

往下翻，是一条时间线。你们的重要节点都能放上去：第一次见面、第一次牵手、第一次旅行、求婚、领证……每个节点都能配一张图、写一段话。

再往下是纪念日列表。下个纪念日还有几天？今年有哪些日子要准备礼物？一目了然。

还有一个功能我挺喜欢的：一键生成纪念卡。选一张照片、一段话，生成一张适合发朋友圈的竖版图片。比截图好看，比修图省事。

使用场景

说几个我想到的场景：

纪念日礼物：把你们的故事做成一个页面，纪念日当天发给 TA。比买的东西更有心，比口头说的更持久。

情侣主页：放在社交账号简介里，想让人了解你们的时候，甩个链接过去。

私人纪念：不一定要分享给别人。偶尔自己打开看看，回顾一下走过的路，也挺有意义。

部署方式

如果你用过 GitHub，大概 5 分钟能搞定。

GitHub Pages 部署

最简单的方式：

1. Fork 一份代码到自己的仓库
2. 进入 Settings → Secrets → Actions，添加 LOVE_CONFIG_JSON
3. 等几分钟，页面就上线了

配置内容示例：

1
2
3
4
5
6
7
8

{
  "boy": "你的名字",
  "girl": "TA的名字",
  "loveDate": "2020-01-01",
  "milestones": [
    {"date": "2020-01-01", "label": "相恋", "icon": "💕", "story": "在一起的第一天"}
  ]
}

Vercel 或 Cloudflare 部署

如果你想用自己的域名，或者想部署到其他平台：

1
2
3
4
5
6
7
8
9
10
11

# 克隆项目
git clone https://github.com/funnyzak/love-page.git
cd love-page
npm install

# 配置并构建
VITE_LOVE_CONFIG_JSON='{"boy":"你的名字","girl":"TA的名字","loveDate":"2020-01-01"}' npm run build

# 部署
npx vercel --prod                    # Vercel
npx wrangler pages deploy dist       # Cloudflare

不需要服务器，不需要域名（可以用平台免费的），不需要懂代码。配置就是填一个 JSON 文件，改改名字、日期、照片链接。

配置说明

基础配置

最核心的几个字段：

里程碑配置

每个里程碑包含以下字段：

1
2
3
4
5
6
7

{
  "date": "2020-05-20",
  "label": "求婚",
  "icon": "💍",
  "story": "在海边，她答应了",
  "image": "https://example.com/photo.jpg"
}

照片墙配置

在 public/photos 目录下放入照片，然后在配置中添加：

1
2
3
4
5
6
7
8

{
  "photoWall": {
    "enabled": true,
    "photos": [
      {"url": "/photos/1.jpg", "description": "第一次旅行"}
    ]
  }
}

背景音乐配置

1
2
3
4
5
6
7
8
9

{
  "music": {
    "enabled": true,
    "autoPlay": false,
    "songs": [
      {"name": "告白气球", "artist": "周杰伦", "url": "/music/song.mp3"}
    ]
  }
}

注意：大多数浏览器禁止音频自动播放，建议设置 autoPlay: false。

页面加密

如果不想公开，可以设置密码保护：

1
2
3
4
5
6
7

{
  "password": {
    "enabled": true,
    "hint": "我们的纪念日",
    "hash": "加密后的密码哈希"
  }
}

其他特性

页面支持深色和浅色主题，会自动跟随系统设置。手机、平板、电脑上看都没问题。

支持中文和英文两种语言，通过 siteLocale 配置切换。

预览与源码

在线预览：

• 中文版：https://love.gp.yycc.dev
• 英文版：https://love-page-en.vercel.app

项目开源在 GitHub：https://github.com/funnyzak/love-page

如果你觉得有用，欢迎 Star。如果用了之后有什么想法，也欢迎告诉我。

最后说一句：工具只是工具，重要的是你想记录的那个人、那些事。

祝你们幸福。