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

type

status

date

slug

summary

📝 前言

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

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

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

🧭 背景介绍

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

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

🧩 功能介绍

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

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

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

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

2️⃣ 支持静态 JSON API

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

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

其他功能介绍可参看项目 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 里面加了一层代理转发，参考如下：

✅ 总结

最后总结一下，这个功能主要借助于 Notion 强大的体系，本身还是挺简单的，只是作为个性化渲染，瞬间的日常维护都是在 Notion 里面完成。

有点麻烦的是个人比较喜欢静态化，因此每次都还要点击发布走 DevOps 流水线才能在网站上看到最新瞬间。

当然好处就是各位读者查看的时候特别快，无需等待几秒Loading，本站对于性能追求还是比较高的，虽然服务器带宽只有 1M，但是通过静态部署、CDN等各种手段已经是将性能拉满访问起来也是飞快了~

💡

有关文章的任何疑问，欢迎您在底部评论区留言，一起交流~

若文章对您有帮助，欢迎请我喝杯咖啡~