NotionNext是什么？

工作原理

一、功能简介

🎨 支持多主题切换

预览Next

预览Medium

预览Hexo

预览Fukasawa

预览Example

• 修改代码中的 /blog.config.js文件即可实现多主题之间的切换。

const BLOG = {
    ...
    THEME: process.env.NEXT_PUBLIC_THEME || 'next', // 主题， 支持 ['next','hexo',"fukasawa','medium']
    ...
}
// 可配置VERCEL环境变量NEXT_PUBLIC_THEME，或者修改上面的 'next' 字段即可。

• 甚至直接在网址后面加上 ?theme=next 也能实现不同主题的展示：https://preview.tangly1024.com/?theme=next

二、快速开始

0.Fork此Github项目：

• (可选) 用自己的图片替换 /public 文件夹里的 avatar.jpg、favicon.svg 和 favicon.ico

• 在 blog.config.js 配置网站的相关信息，例如站点地址，作者信息。

1.在Vercel中导入你刚fork的项目

2. 配置你的Notion数据

• 点击Environment Variables（环境变量），添加NOTION_PAGE_ID的值。

• NOTION_PAGE_ID 这个参数从何而来？
1. 打开以下Notion页面，并复制到你的notion空间： (点击右上角Duplicate即可)
NOTION BLOG
演示站点描述
https://www.notion.so/tanghh/02ab3b8678004aa69e9e415905ef32a5?v=b7eb215720224ca5827bfaa5ef82cf2d




2. 分享你的页面：点击 Share 开启 Share to web 选项



 
3. 在页面链接中取得PAGE_ID：



ctrl或cmd+L可以快速复制当前页面链接，PAGE_ID就是以下页面链接中的标红部分：
💡
https://www.notion.so/tanghh/02ab3b8678004aa69e9e415905ef32a5?v=b7eb215720224ca5827bfaa5ef82cf2d

3.点击Deploy完成部署

4.一些小Tips

• 站点信息修改：修改Notion页的icon，即可同步站点的作者头像；修改页面标题将同步修改站点标题，页面描述就是站点描述。

• 页面安全：您共享的Notion页面，他人只有查看权限，除非你手动开启编辑和评论。若您不希望别人访问到你的源Notion页面，可选择关闭Noton页面共享，然后通过Notion的access_token进行数据访问。

• 评论插件配置
• 修改代码仓库的blog.config.js文件配置后,Vercel便会自动重新部署。
• giscus评论插件：访问Giscus插件主页，照着页面内的步骤操作就会给出该有的参数，再到blog.config.js設定好參數即可
• valine/walin评论插件：参考以下文档进行配置
NotionNext配置Valine/Waline评论插件 | TANGLY's BLOG
Valine插件需要LeanCloud后端提供数据库存储功能，请按照以下步骤配置。 而Waline 的前置步骤和Valine基本一致，只是多了一个部署Waline的Vercel服务步骤。由于Waline配置了完善的后台管理功能，所以使用Waline就不需要再配合Admin-Valine项目运行。 应用创建好以后，进入刚刚创建的应用，选择左下角的 设置> 应用Key，然后就能看到你的 APP ID和 APP Key 了： 为了你的数据安全，请设置自己的 安全域名 ：只有以下设置的域名，才允许访问你的valine数据 支持的Valine配置在NotionNext项目的blog.config.js 中，请在Vercel后台的环境变量中配置： serverURLs在应用内部会尝试自动获取，如果发现获取失败，请手动提供 刚刚创建的应用，选择左下角的 设置> 应用Key，找到 Request 域名 第一行 需要在akismet中注册账号并获取免费的key： https://akismet.com/account ，并在LeanCloud中配置 AKISMET_KEY 变量 参考官方文档，在你的Vercel上部署一个valine应用。而后在你的NotionNext环境变量中添加你的waline服务地址环境变量： NEXT_PUBLIC_WALINE_SERVER_URL 即可生效。

https://tangly1024.com/article/notionnext-valine

5.[可选]绑定自己的域名

Vercel应用绑定自己的域名 | 小唐笔记📒

首先需要在域名服务商处购买域名，可以选择Namesilo、Freenom、Godaddy、阿里云、腾讯云等任意平台。并在域名服务商后台添加一条CNAME转发进行解析，CNAME值为 cname.vervel-dns.com 。 CF具有Worker.js、全球无限CDN流量、网站防火墙、DDoS等特性，我个人比较喜欢将域名解析交给CloudFlare管理 。 ...

https://tangly1024.com/article/vercel-domain

三、项目更新

NotionNext更新指南 | TANGLY's BLOG

本项目在长期维护更新中，不时将修复一些bug和增加新特性。 只要在您fork后的的NotionNext中点击 Fetch upstream 就能更新为最新的代码 有时这里显示的不是 Fetch and Merge 按钮，而是 Open pull request。原因是我和你的代码发生冲突（ confilcts），例如我修改了 blog.config.js 文件，你也修改了此文件，导致在更新时，Git需要人工确认要合并代码时保留的blog.config.js文件版本。

https://tangly1024.com/article/how-to-update-notionnext

四、赞助本项目

五、贡献代码

步骤

1. 将存储库fork到您的GitHub帐户。

2. 将存储库clone到您的设备上（或使用Codespaces之类的东西）。

3. 在存储库中创建一个新分支，分支名按照改动的内容命名，建议是feat_或bugfix_开头。

4. 进行修改。

5. 提交修改并推送分支。

6. 从fork中的分支创建到NotionNextmain分支的PR。

• yarn：安装依赖

• yarn dev：开发，支持热加载

• yarn build：为生产编译打包

• yarn start：运行打包后的项目构建服务

创建新主题

添加本地化

提交代码

六、问题反馈