notion blog

概念ブログ

これは、Next.jsの今後のSSG（静的なサイト生成）サポートを表示して、next.jsのSSG （Static-Site Generation）のサポートを示す例です。

注：この例では、next.js Canary Branchでのみ利用可能な実験的な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を使用してビルドをバイパスする必要があります。

ページテーブルを作成します

注：これは、テーブルが初めて訪問/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がhttps://www.notion.so/blog-s5qv1qbuzm1wxm3h3h3szrqkupi7xjxtulの場合、あなたのBLOG_INDEX_IDはS5qv1QbU-zM1w-xm3H-3SZR-Qkupi7XjXTul
• loadPageChunkリクエストは、開発者コンソールを開いてネットワークタブに移動する場合、ページをリロードする場合、 loadPageChunkのリクエストが表示され、 BLOG_INDEX_IDのペイロードにpageIdが表示されるはずです。

概念トークンを取得するには、概念を開き、 token_v2 cookieを探してください。

ブログ投稿の作成

1. 概念では、テーブルの新規をクリックして新しい行を追加します
2. ページ名、ナメクジ、日付、著者に記入してください
3. コンテンツ領域の上部に、表示するコンテンツをプレビューとして追加します（これを2段落未満に保ちます）
4. プレビューコンテンツの下に分割ブロックを追加します
5. 分割ブロックの下にコンテンツの残りを追加します

ローカルで実行されます

プロジェクトをローカルに実行するには、展開の手順1と2に従って、以下の手順に従う必要があります

1. 依存関係yarnをインストールします
2. 環境で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>"
3. 開発モードyarn devで次に実行します
4. 生産モードでビルドと実行yarn build && yarn start

クレジット

• Guillermo Rauch @Rauchg最初のアイデアについて
• デザインヘルプについては、@shuding_をshuding
• Luis Alvarez @luis_fadesデザインヘルプとバグキャッチ