网站”日常瞬间”开源说明

青萍叙事2025-07-27

📝 前言

在前天我发布了网站”日常瞬间”的功能设计文档，当时有说过周末开源，正好看到有其他博友对这个功能也很感兴趣，想要根据文档来自己实现，我这里就将项目代码开源出来，以供大家参考~

项目地址：https://github.com/lusyoe/moments

PS：代码基本都是使用 AI 生成的，写的不太好地方勿怪~

🧭 背景介绍

网站“日常瞬间”是一种常见于社交平台（如微信视频号、QQ空间、抖音、小红书等）的轻量内容分享功能，核心特点是供博主记录和分享生活中不经意的片段或情绪瞬间。

通过该功能可以有效提升网站的活跃度与内容温度，拉近博主与访客之间的距离。

🧩 功能介绍

在前一期《网站”日常瞬间”功能设计说明》里已经介绍了不少功能，这里再补充2点，是这周末新加的。

1️⃣ 支持多张图片快速切换

当瞬间中发布有多张图片时，可通过点击上一张、下一张快速切换，并且在图片底部也通过小圆点标识总共有几张，当前查看的是第几张。

PS：这也是交流群内读者提供的好建议，在此感谢，另外感兴趣的读者也可以加我V: lusyoe 进读者交流群一起学习进步~

2️⃣ 支持静态 JSON API

通过静态部署，可调用/recent-moments.json 获取最近的10条瞬间元数据，方便与其他系统进行集成，比如博主就将最新瞬间信息挂到了主站页面的右侧，访客可第一时间查看到博主的最近动态。

其中不包含瞬间的正文内容，返回格式如下：

{
  "success": true,
  "data": [
    {
      "logo": "https://cdn.lusyoe.com/images/lusyoe-logo.webp",
      "title": "天热游泳",
      "date": "2025-07-26T16:36:00.000+08:00",
      "mood": "🏊‍♂️"
    },
    {
      "logo": "https://cdn.lusyoe.com/images/lusyoe-logo.webp",
      "title": "微信粉丝",
      "date": "2025-07-25T18:16:00.000+08:00",
      "mood": "☀️"
    },
    {
      "logo": "https://cdn.lusyoe.com/images/lusyoe-logo.webp",
      "title": "加入开往",
      "date": "2025-07-25T17:06:00.000+08:00",
      "mood": "☀️"
    },
    {
      "logo": "https://cdn.lusyoe.com/images/lusyoe-logo.webp",
      "title": "上周末游黄梅五祖寺",
      "date": "2025-07-23T21:40:00.000+08:00",
      "mood": "☀️"
    }
  ],
  "count": 4,
  "generatedAt": "2025-07-26T13:54:47.048Z"
}

其他功能介绍可参看项目 README 文档。

🚀 使用指南

1️⃣ 复制 Notion 模板

博主已经将该项目的 Notion 模板公开，大家可以直接通过 Notion 快速复制使用。

模板链接：https://lusyoe.notion.site/23b9161fd46b809e8e6adb032cf73dd4

2️⃣ 创建内部集成

在项目构建部署时，需要通过集成Token 来调用接口获取 Notion 数据，这样做的目的是更好地保护隐私，可以随时将瞬间进行隐藏，或仅显示最近多少天的瞬间。

内部集成创建和关联可以参考之前写的一篇文章：《Notion 集成入门指南(nCalendar篇)》

PS：无需配置集成的Webhook，也无需配置 nCalendar，创建完后复制Token，并将集成关联到通过模板创建的数据库页面即可。

3️⃣ 配置环境变量

在项目根目录创建一个 .env 文件，环境变量配置参考如下：

PS：数据库ID 可通过打开 Web 版Notion页面，查看URL地址获取，如下图所示：

4️⃣ 项目部署

项目支持通过 Docker 来快速部署，详细可参看项目README文档，若想集成到第三方系统需要自行处理跨域问题，我这里是直接在 Nginx 里面加了一层代理转发，参考如下：

location /api/moments {
    charset utf-8;
    # 保证获取到真实IP
    proxy_set_header X-Real-IP $remote_addr;
    # 真实端口号
    proxy_set_header X-Real-Port $remote_port;
    # X-Forwarded-For 是一个 HTTP 扩展头部。
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    # 在多级代理的情况下，记录每次代理之前的客户端真实ip
    proxy_set_header HTTP_X_FORWARDED_FOR $remote_addr;
    # 获取到真实协议
    proxy_set_header X-Forwarded-Proto $scheme;
    # 真实主机名
    proxy_set_header Host $host;
    # 设置变量
    proxy_set_header X-NginX-Proxy true;
    # 开启 brotli
    proxy_set_header Accept-Encoding "";
    
    proxy_pass http://127.0.0.1:3006/recent-moments.json;
}