如何使用react对notion二次开发搭建自己的blog

139 阅读2分钟

架构

     NextJs

     React

    React-noiton-x

     Redis

如何部署

建议一健3连下面的项目。

GitHub - Mnxj/nextjs-notion-react-clover

# 目录介绍
nextjs-notion-react-clover
	- components # 主要存放页面模块
	- lib # 封装函数
	- pages # 页面主入口
		- api # 外部资源请求
		- tags # tags detail
	- public # static
		- images 
		- media 
	- styles 
	- .env.example # key config
	- .vercelignore # vercel config
	- next.config.js # nextjs config
	- site.config.ts # global variable config

notion 注册和配置

1、注册一个账号,用来存放文章

Notion - The all-in-one workspace for your notes, tasks, wikis, and databases.

2、按照红色框这种结构。 除了Articles和友链数据都是点**add a page**

Untitled.png

3、Articles和友链数据。在页面的空白处输入 / 选择database

Untitled 1.png

Untitled 2.png

4、Articles需要改为gallery,同时记得设置一下参数展示顺序。点击table更换类型

参数即位每个文章需要展示的参数

Untitled 3.png

Untitled 4.png

Untitled 5.png

notion Api注册

点击,选择view my integrations,

Start building with the Notion API

进入创建一个新的就可以。记住token

Untitled 6.png

redis 注册

登陆

Upstash: Serverless Data for Redis and Kafka

redis操作-文档参考如下

redis简单尝试

创建一个redis数据库

Untitled 7.png

记住node中 node-redis的链接方式。

LeadnCloud 注册

云引擎 - LeanCloud

1、注册一个账号、进入控制台、创建一个应用,名字随便起。

Untitled 8.png

2、如果看不到评论信息可以在数据库储存→结构化数据→创建一个class ‘Comment’,权限所有用户

Untitled 9.png

3、在设置。应用凭证里面拿到AppID,AppKey

Untitled 10.png

4、在设置 安全中心加入自己的域名

Untitled 11.png

Vercel注册

Develop. Preview. Ship. For the best frontend teams - Vercel

1、Vercel是一个用来部署的服务器,点击选择github登陆后,选择new project,选择我们fork的项目。

Untitled 12.png 2、把我们前面注册的一些token导入到这里

Untitled 13.png

参数配置参考.env.example 主要是下面这几

# Optional (for notion)
#NOTION_ID=

# Optional (for redis)
#REDIS_HOST=
#REDIS_PORT
#REDIS_PASSWORD=

# Optional (for valine)
#APP_ID=
#APP_KEY=

部署成功

1、点击会进入一个详细页面

Untitled 14.png

2、如果自己有注册域名可以同通过如下方式配置

www.notion.so