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進行設計幫助和錯誤