网站"日常瞬间"功能设计说明

type

status

date

slug

summary

📝 前言

在内容为王的数字时代，用户越来越希望看到“真实”、“日常”与“可持续”的内容流。

相较于正式的博客文章，一些简洁、轻量、实时性的更新可以更有效地传达品牌个性和建立情感连接。

因此，推出“日常瞬间”功能，正是为了满足这一趋势。

🧭 背景介绍

最近经常有看到其他博友网站上面都有一个类似“日常说说”、“日常瞬间”或“动态”的功能，用于展示博主的生活动态，就类似微信朋友圈。

通过该功能可以将一些不想发到朋友圈或其他社交媒体的信息，直接放到个人网站上面来，还可以进一步加强与其他博友的互动。

由于我目前使用的建站框架NotionNext还不支持该功能，因此就自己花了点时间搞定了，目前已完成初版上线，大家可以点击本站顶部导航的社交 → 日常瞬间或直接点击跳转链接进行查看：https://blog.lusyoe.com/moments

🔍 使用场景

主要是以博主为中心，发布一些日常信息，例如：

发布日常生活记录

发布个人摄影照片

发布日常灵感瞬间

📌 最终目标

在博客社交板块中新增"日常瞬间"功能，通过Notion实现内容管理，以Feed流展示动态，并集成评论功能。

最终以静态页面的方式部署到服务器，在博客中通过嵌入页面进行展示。

PS：这样的好处是既不用修改博客框架源码，在发布动态时也不需要将整个博客站点一起发布，单独发布动态即可。

🧩 核心功能需求

1️⃣ 数据源对接

从Notion数据库读取内容，需配置以下字段：

标题（Title属性）
头像（icon属性）
发布时间（Date属性，用于排序）
心情（可选，此刻的心情）
发布状态（选项属性，用于草稿、发布或隐藏）
唯一ID（直接使用页面ID，用于评论关联）
正文（Rich Text属性，支持Markdown）

2️⃣ 页面展示逻辑

布局： 单列Feed流（瀑布流），按发布时间倒序排列（最新置顶）。

时间过滤： 默认仅展示最近3个月的动态（动态计算：当前时间 - 90天）。

渲染规则：

标题：H3标签 + 加粗。
正文：将Markdown转换为HTML渲染。
时间：显示为相对格式（如"3天前"）。

3️⃣ 评论系统集成

对接Twikoo评论组件，实现以下逻辑：

每条动态底部嵌入Twikoo，以Notion页面ID作为评论路径。
初始状态折叠评论框，用户点击"评论"按钮后展开。
显示当前动态的评论数量。

🚀 实现步骤说明

1️⃣ 创建 Notion 内部集成

之所以要创建内部集成是为了方便调用接口获取Notion数据，当然也可以直接将页面公开发布，但是这样就没办法做到完全仅显示最近3个月的动态了，因此还是采用这种稍微麻烦一点的方案。

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

大致业务流程图如下：

2️⃣ 创建 Feed 页面和数据库并关联集成

Feed 数据库视图是 Notion 新推出的一个功能，以线性堆叠卡片的形式展示数据库页面，类似于博客或社交媒体网站，使浏览和互动团队内容变得非常容易。

关于Feed视图的介绍也可以参看官方文档：https://www.notion.com/zh-cn/help/feeds

我们在上一步创建的集成需要跟这个数据库页面进行关联。

实际Notion里面的效果如下：

3️⃣ 构建时动态获取 Notion 内容

为了简化设计，这里并没有使用后端，而是直接通过纯前端调用Notion API获取数据库页面数据，并将图片进行缩略摆放，同时也调整了一下字体和主题跟主站保持一致。

动态瞬间的时间采用跟微信朋友圈类似的相对时间展示，至此瞬间内容在Notion维护，展示通过个性化处理并部署到服务器，网站入口直接嵌入页面即可。

最终页面展示效果如下：

PS：这里需要通过Notion的集成Token才能调用API。

4️⃣ 接入评论系统

评论系统是接入跟主站一致的自部署 Twikoo，不仅每条瞬间都支持单独评论，而且会显示当前评论的数量。

在接入统一评论系统后，在主站右侧的最新评论中也能查看到瞬间的评论内容~

5️⃣ 后续规划

在将初版发到交流群后，博友们也是积极献策，提供了几个建议：

多张图片添加上一张、下一张切换，提高用户体验

图片点击放大后，默认展示缩略图，可点击显示高清原图（当前默认显示原图可能比较大）

在此感谢各位的支持，后面有时间会加上这些 feature ~

最后待到周末有时间再来将项目进行开源，以供大家参考。

✅ 总结

总结一下，“日常瞬间”功能并非传统意义上的内容更新模块，而是融合了轻内容、社交化表达与品牌调性维护的综合设计。

该功能不仅是一项高性价比的内容增强设计，开发成本低、用户感知强，而且可有效提升网站的活跃度与内容温度。

希望通过该功能可以进一步加强与博友们的互动，也能让大家认识博主的另一面生活~

💡

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

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