AI摘要
chengeGPT
password
AISummary
type
status
date
slug
summary
tags
category
icon
需求来源
博客作为我个人的内容分享站点，我希望除了较长的博文以外，也有很多生活点滴、随想可以分享。这样的随想类似于为微博、朋友圈的动态，内容篇幅较短，形式比较自由，可以更真实地展现博主生活的点滴、思考和灵感，无论是技术博客还是生活博客，有这样一个模块无疑会减少内容发布的压力，同时为博客添加一些内容形式和丰富度。
效果展示
通过该教程，你将拥有一个NotionNext博客”说说“页，说说内容来源于Memos中公开发布的实时动态。
以后你只要通过Memos支持的任意快捷动态发布方式 [包括网页、Chrome插件、APP、客户端、小程序、iOS捷径、Webhook等] 发布公开动态，都会立刻更新并出现在说说页中。
实现流程
前置条件
- 你已经拥有一个NotionNext搭建的博客，以及对应的项目文件（我们需要针对项目源代码进行修改）
- 你已经通过Memos部署教程部署了自有的Memos服务，并具备对应的服务站点，比如：https://memos.chenge.ink。
修改NotionNext博客项目代码
增加新的页面路由
- 在项目根目录 /pages中新建一个名为Memos的文件夹，并在文件夹中创建一个名为Index.js的文件夹
- 在index.js中写入以下代码：
主题配置增加新页面的主题索引
在 blog.config.js 文件的 LAYOUT_MAPPINGS中增加路径 /memos 的组件映射
⚠️ NotionNext 4.3版本才支持LAYOUT_MAPPINGS配置，如果不是这个版本，修改更复杂些，需要自己到themes/theme.js中修改对应的映射，建议升级到4.3版本。
主题的代码修改，增加Memos模块
- 在自己使用的主题 themes/chenge/index.js 中增加对应的说说页面组件，此处 chenge 是我自己的主题名，你要根据你当前使用的主题来更改。
ℹ️ 建议将你选定的主题复制一份出来，重命名为自己的名字（比如我复制了hexo主题文件夹并命名为chenge），然后将主题切换为自己的主题，后续的主题修改就都在自己创建的主题中，不会和NotionNext官方的更新冲突。
代码如下：
- 在 主题文件夹的components文件夹，新增一个BlogMemos组件，专门用于呈现Memos内容。我的路径是 themes/chenge/components/BlogMemos.js，你按照自己的主题找对应位置即可。
BlogMemos.js的代码如下：
- 因为BlogMemos模块引入了一些外部的css和js样式来实现说说页的样式和动态加载，你需要将对应的这些文件分别放入public文件夹下。
- CSS文件，放在public/css文件夹下：
- JS文件，从链接中下载对应的6个js文件，都放在public/js文件夹下
- 准备好说说的头像文件，命名为avatar.jpg，放在public/images下，这个图片是作为说说页面每一条说说左侧的头像。
对应文件如下：
因为不同主题可能样式不同，如果呈现后效果不满意，可以到memos.css中修改说说呈现的样式。
修改memos.js，根据自己部署的Memos服务的地址修改以下代码：
在Notion Blog Database新建Memos菜单
最后，在Notion Blog Database中新建一个菜单，slug设定为/memos，名字、图标以及菜单位置可以自定义，参考如下图：
完成！
接下来部署后访问你的博客，点击菜单上的“说说”，就可以跳转到这个动态页，并加载出对应的动态内容。
可能不同主题有一些样式失配，需要自己根据主题手动调整，基本上在 public/memos.css中调整即可。
特别鸣谢 & 相关项目参考：
- 作者:陈源泉 @ 尘世の歌
- 链接:https://chenge.ink/article/post20240302-1
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。