notion blog

概念博客

这是一个示例Next.js项目，显示Next.js即将推出的SSG（静态站点生成）支持使用Intion的私有API作为后端。

注意：此示例使用仅在Next.js金丝雀分支中可用的实验SSG钩子！此示例中使用的API会随着时间而变化。由于它使用了私人API和实验功能，因此请自负，因为这些事情随时都可能发生变化。

在Vercel上托管的实时示例：https：//notion-blog.vercel.app/

入门

要查看设置概念的步骤，请在https://notion-blog.vercel.app/blog/my-first-post上查看帖子，或者按照以下步骤操作。

部署自己的

用Vercel部署自己的概念博客。

或者

1. 克隆此仓库git clone https://github.com/ijjk/notion-blog.git
2. 使用vc配置项目
3. 将您的NOTION_TOKEN和BLOG_INDEX_ID添加为项目中的环境变量。请参阅此处以了解如何找到这些价值观
4. 与vc进行最终部署

注意：如果在本地使用vc重新部署，并且您没有对应用程序的来源进行任何更改，并且仅在概念中进行编辑，则需要使用vc -f绕过构建de -duping

创建您的页面

注意：如果第一次访问/blog未检测到表，这是自动运行

使用预配置的脚本

1. 在概念中创建一个空白页
2. 克隆此仓库git clone https://github.com/ijjk/notion-blog.git
3. 安装依赖项cd notion-blog && yarn
4. 运行脚本以创建表NOTION_TOKEN='token' BLOG_INDEX_ID='new-page-id' node scripts/create-table.js在此处查看新页面的ID

手动创建桌子

1. 在概念中创建一个空白页
2. 在该页面上创建一个内联表，不要使用完整页面表，因为它需要不同的查询
3. 将以下字段添加到表

该表应具有以下属性：

• Page ：博客文章的页面
• Slug ：这是博客文章相对于/blog ，它应该是文本属性
• Published ：此过滤博客文章在生产中，它应该是复选框属性
• Date ：这是博客文章发布的时间，它应该是日期属性
• Authors ：这是撰写帖子的概念用户的列表，应该是一个人财产

获取博客索引和代币

要获取您的博客索引值，请打开概念并在上面创建的表中导航到概念页面。在此页面上，您应该能够从任何一个中获取页面ID：

• URL，如果您的页面的URL为https://www.notion.so/blog-s5qv1qbuzm1wxm1wxm3h3szrqkupi7xjxtul，则您的BLOG_INDEX_ID是S5qv1QbU-zM1w-xm3H-3SZR-Qkupi7XjXTul
• loadPageChunk请求，如果您打开开发人员控制台并转到网络选项卡，然后重新加载页面，您应该查看loadPageChunk的请求，在请求有效载荷中，您应该看到pageId ，这是您的BLOG_INDEX_ID

要获取您的概念令牌，请打开概念并寻找token_v2 cookie。

创建博客文章

1. 在概念中单击表上的新添加新行
2. 填写页面名称，slug，日期和作者
3. 在内容区域的顶部添加您要显示的内容作为预览（将其保留在2段以下）
4. 在您的预览内容下添加一个分隔块
5. 将其余的内容添加在分隔块下

本地运行

要在本地运行项目，您需要遵循部署的步骤1和2

1. 安装依赖yarn
2. 在您的环境中extose NOTION_TOKEN和BLOG_INDEX_ID export NOTION_TOKEN='<your-token>'和export BLOG_INDEX_ID='<your-blog-index-id>'或set NOTION_TOKEN="<your-token>" && set BLOG_INDEX_ID="<your-blog-index-id>" for Windows
3. 在开发模式下运行下yarn dev
4. 在生产模式下构建和运行yarn build && yarn start

学分

• Guillermo Rauch @rauchg最初的想法
• shu ding @shuding_ for Design帮助
• 路易斯·阿尔瓦雷斯（Luis Alvarez）@luis_fades进行设计帮助和错误