notion blog

Blog Gagasan

Ini adalah contoh proyek Next.js yang menunjukkan dukungan SSG (generasi statis-situs) yang akan datang menggunakan API pribadi Notion untuk backend.

CATATAN : Contoh ini menggunakan kait SSG eksperimental yang hanya tersedia di cabang Canary berikutnya. API yang digunakan dalam contoh ini akan berubah seiring waktu. Karena menggunakan API pribadi dan fitur eksperimental, gunakan dengan risiko Anda sendiri karena hal -hal ini dapat berubah kapan saja.

Contoh langsung yang di-host di Vercel : https://notion-blog.vercel.app/

Memulai

Untuk melihat langkah-langkah untuk mengatur gagasan agar bekerja dengan contoh ini lihat posting di https://notion-blog.vercel.app/blog/my-first-post atau ikuti langkah-langkah di bawah ini.

Menyebarkan milik Anda sendiri

Menyebarkan blog gagasan Anda sendiri dengan Vercel.

atau

1. Klon repo git clone https://github.com/ijjk/notion-blog.git
2. Konfigurasikan Proyek dengan vc
3. Tambahkan NOTION_TOKEN dan BLOG_INDEX_ID Anda sebagai variabel lingkungan dalam proyek Anda. Lihat di sini untuk bagaimana menemukan nilai -nilai ini
4. Lakukan penyebaran akhir dengan vc

Catatan: Jika dipekerjakan kembali dengan vc secara lokal dan Anda belum membuat perubahan pada sumber aplikasi dan hanya diedit dalam gagasan Anda akan perlu menggunakan vc -f untuk bypass membangun de -duping

Membuat Tabel Halaman Anda

CATATAN : Ini Auto Run jika tabel tidak terdeteksi saat pertama kali berkunjung /blog

Menggunakan skrip yang telah dikonfigurasi sebelumnya

1. Buat halaman kosong di Notion
2. Klon repo git clone https://github.com/ijjk/notion-blog.git
3. Instal dependensi cd notion-blog && yarn
4. Jalankan skrip untuk membuat tabel NOTION_TOKEN='token' BLOG_INDEX_ID='new-page-id' node scripts/create-table.js lihat di sini untuk menemukan ID untuk halaman baru

Membuat tabel secara manual

1. Buat halaman kosong di Notion
2. Buat tabel sebaris di halaman itu, jangan gunakan tabel halaman penuh karena membutuhkan permintaan secara berbeda
3. Tambahkan bidang di bawah ini ke tabel

Tabel harus memiliki sifat berikut:

• Page : Ini halaman posting blog
• Slug : Ini adalah siput posting blog relatif ke /blog , itu harus menjadi properti teks
• Published : Ini menyaring posting blog dalam produksi , itu harus menjadi properti kotak centang
• Date : Ini adalah saat posting blog muncul seperti yang diposting, itu harus menjadi properti tanggal
• Authors : Ini adalah daftar pengguna gagasan yang menulis posting, itu harus menjadi properti orang

Mendapatkan indeks blog dan token

Untuk mendapatkan nilai indeks blog Anda, buka gagasan dan navigasikan ke halaman gagasan dengan tabel yang Anda buat di atas. Saat di halaman ini Anda harus bisa mendapatkan ID halaman dari:

• URL, jika URL halaman Anda adalah https://www.notion.so/blog-s5qv1qbuzm1wxm3h3szrqupi7xjxtul maka BLOG_INDEX_ID Anda adalah S5qv1QbU-zM1w-xm3H-3SZR-Qkupi7XjXTul
• Permintaan loadPageChunk , jika Anda membuka konsol pengembang Anda dan pergi ke tab Jaringan kemudian Muat Ulang Halaman Anda akan melihat permintaan untuk loadPageChunk dan dalam muatan permintaan Anda akan melihat pageId dan itu adalah BLOG_INDEX_ID Anda

Untuk mendapatkan token gagasan Anda, buka gagasan dan cari cookie token_v2 .

Membuat posting blog

1. Dalam gagasan klik baru di atas meja untuk menambahkan baris baru
2. Isi nama halaman, siput, tanggal, dan penulis
3. Di bagian atas area konten, tambahkan konten yang ingin Anda tampilkan sebagai pratinjau (simpan di bawah 2 paragraf)
4. Tambahkan blok pembagi di bawah konten pratinjau Anda
5. Tambahkan sisa konten Anda di bawah blok Divider

Berjalan secara lokal

Untuk menjalankan proyek secara lokal, Anda harus mengikuti Langkah 1 dan 2 dari Deploying dan kemudian ikuti langkah -langkah di bawah ini

1. Pasang yarn dependensi
2. Expose NOTION_TOKEN and BLOG_INDEX_ID in your environment export NOTION_TOKEN='<your-token>' and export BLOG_INDEX_ID='<your-blog-index-id>' or set NOTION_TOKEN="<your-token>" && set BLOG_INDEX_ID="<your-blog-index-id>" for Windows
3. Jalankan Next in Development Mode yarn dev
4. Bangun dan Jalankan dalam mode produksi yarn build && yarn start

Kredit

• Guillermo rauch @rauchg untuk ide awal
• Shu ding @shuding_ untuk bantuan desain
• Luis alvarez @luis_fades untuk bantuan desain dan penangkapan bug