类型
状态
日期
摘要
分类
标签
链接
图标
密码
NotionNext是基于NextJS框架开发的免费开源的Notion建站工具。
NotionNext
tangly1024 • Updated Jan 14, 2025
NotionNetx帮助文档
准备工作
复制模板
登录自己的Notion，点击打开下面的模板，右上角点击Duplicate复制模板。将模板数据库复制到自己的Notion中。
开启页面分享，获得分享链接，复制分享链接中的一串32位字母与数字页面ID
共享链接中其中标红加粗下划线部分才是页面ID！要忽略
?v=后面的英文数字。https://www.notion.so/tanghh/02ab3b8678004aa69e9e415905ef32a5?v=b7eb215720224ca5827bfaa5ef82cf2d复制项目源代码
- 请先注册并登陆Github账号，
- 仅需点击下方链接，即可一键Fork(复刻)项目。
配置说明
项目配置有三个部分，一个是项目根目录的
blog.config.js文件中，一个是项目根目录环境变量文件.env.local ，还有一个是在Notion模板数据库中的config 配置中心文件中勾选和修改（4.1之后的版本）。每次修改配置文件之后，都需要重新编译才能生效。
我主要修改了以下几项：
自定义Notion数据库字段名
在
blog.config.js文件中修改之后，将Notion中的字段也对应修改即可。中文看着更顺眼。
Vercel部署
具体参照帮助文档中的说明
本地部署（群晖）
安装环境
安装git和node.js
在群晖的套件中心安装这两个
安装yarn NodeJS 自带了 NPM（Node Package Manager），他可以用来安装打包编译NotionNext这类基于Webpack打包的项目。不过npm不太好用，这里安装一个npm升级版yarn。
安装PM2
部署方式
切换到项目文件夹
安装NotionNext依赖的库
如果你没有安装yarn，也可以用
npm install 命令进行安装依赖项目编译
每次
修改代码，包括修改blog.config.js文件的内容后，都需要重新执行这步骤。启动项目
这时候可以在
http://localhost:3000 查看效果，可以根据日志进行调试和更改配置。后台运行
使用PM2管理NotionNext
PM2作为Node的进程管理工具，可以提升您维护站点的效率，您可以阅读《使用PM2启动Notionnext实现多开和进程守护》获取帮助
项目默认端口为3000，如果端口被占用，可以用
-p换成其他端口，比如9099日常维护
关闭进程
或者先
pm2 list 查看有哪些进程，然后 pm2 stop 0 关闭进程重新编译
重启进程
0为进程id
进阶设置
评论插件(Twikoo)
NotionNext支持多种评论插件，部署最快速的是Cusdis和utterance这两种。
不过体验最好的是Twikoo，支持在页面上直接管理评论，所以最终我选择了这个。
Twikoo部署请参考
我选择的是Docker私有部署，将Twikoo部署在群晖上，然后通过内网穿透出去。
Docker Compose
然后将端口内网穿透出去，通过VPS反向代理。
然后修改配置文件中
NEXT_PUBLIC_COMMENT_ENV_ID 为twikoo后台地址嵌入Memos
具体参考
前置条件
- 你已经拥有一个NotionNext搭建的博客，以及对应的项目文件（我们需要针对项目源代码进行修改）
- 你已经通过Memos部署教程部署了自有的Memos服务，并具备对应的服务站点，比如：https://memos.chenge.ink。
修改NotionNext博客项目代码
1、增加新的页面路由
- 在项目根目录
/pages中新建一个名为memos的文件夹，并在文件夹中创建一个名为index.js的文件
- 在index.js中写入以下代码
2、主题配置增加新页面的主题索引
- 在 blog.config.js 文件的 LAYOUT_MAPPINGS中增加路径 /memos 的组件映射
⚠️ NotionNext 4.3版本才支持LAYOUT_MAPPINGS配置，如果不是这个版本，修改更复杂些，需要自己到themes/theme.js中修改对应的映射，建议升级到4.3版本
3、主题的代码修改，增加Memos模块
- 在自己使用的主题 themes/chenge/index.js 中增加对应的说说页面组件，此处 chenge 是我自己的主题名，你要根据你当前使用的主题来更改。
建议将你选定的主题复制一份出来，重命名为自己的名字（比如我复制了hexo主题文件夹并命名为chenge），然后将主题切换为自己的主题，后续的主题修改就都在自己创建的主题中，不会和NotionNext官方的更新冲突。
代码如下：
可以注销评论互动部分代码，这样在memos页面就不会显示评论区
- 在主题文件夹的components文件夹，新增一个BlogMemos组件，专门用于呈现Memos内容。我的路径是 themes/chenge/components/BlogMemos.js，你按照自己的主题找对应位置即可。
BlogMemos.js的代码如下：
- 因为BlogMemos模块引入了一些外部的css和js样式来实现说说页的样式和动态加载，你需要将对应的这些文件分别放入public文件夹下。
- CSS文件，放在public/css文件夹下：
- 下载对应的6个js文件，都放在public/js文件夹下
- 准备好说说的头像文件，命名为avatar.jpg，放在public/images下，这个图片是作为说说页面每一条说说左侧的头像。
对应文件如下：
修改memos.js，根据自己部署的Memos服务的地址修改以下代码：
4、在Notion Blog Database新建Memos菜单
最后，在Notion Blog Database中新建一个菜单，slug设定为/memos，名字、图标以及菜单位置可以自定义
左上角显示图片Logo
具体参考
修改对应主题文件夹中的
/components/Logo.js 来实现。比如将hexo主题，修改
/themes/hexo/components/Logo.js 更改为如下代码：
之后可以将自己想要使用的图片logo更改为
avatar.png 并且上传到 public 进行覆盖。
