หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>โค้ดแหล่งที่มา AI
ดาวน์โหลด

บล็อกความคิด

นี่เป็นตัวอย่างของโครงการ Next.js ที่แสดงการสนับสนุน SSG (Generation-site-site-site ที่กำลังจะมาถึงของ Next.js โดยใช้ API ส่วนตัว ของ Notion สำหรับแบ็กเอนด์

หมายเหตุ : ตัวอย่างนี้ใช้ตะขอ SSG ทดลองใช้เฉพาะในสาขาถัดไป Js Canary! 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 เพื่อบายพาสการสร้าง deping

การสร้างตารางหน้าของคุณ

หมายเหตุ : นี่คือการรันอัตโนมัติหากไม่ตรวจพบตารางการเยี่ยมชม /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 : นี่คือ Slug ของบล็อกโพสต์ที่สัมพันธ์กับ /blog มันควรจะเป็นคุณสมบัติข้อความ
  • Published : ตัวกรองนี้โพสต์บล็อกใน การผลิต ควรเป็นคุณสมบัติช่องทำเครื่องหมาย
  • Date : นี่คือเมื่อโพสต์บล็อกปรากฏตามที่โพสต์ควรเป็นคุณสมบัติวันที่
  • Authors : นี่คือรายการของผู้ใช้ความคิดที่เขียนโพสต์มันควรจะเป็นทรัพย์สินของบุคคล

ตัวอย่างตารางโพสต์บล็อก

รับดัชนีบล็อกและโทเค็น

ในการรับค่าดัชนีบล็อกของคุณให้เปิดแนวคิดและนำทางไปยังหน้าความคิดด้วยตารางที่คุณสร้างไว้ด้านบน ในขณะที่อยู่ในหน้านี้คุณควรจะได้รับ ID หน้าจาก:

  • URL หาก URL ของหน้าของคุณคือ https://www.notion.so/blog-s5qv1qbuzm1wxm3h3szrqkupi7xjxtul BLOG_INDEX_ID ของคุณคือ S5qv1QbU-zM1w-xm3H-3SZR-Qkupi7XjXTul
  • คำขอ loadPageChunk หากคุณเปิดคอนโซลนักพัฒนาของคุณและไปที่แท็บเครือข่ายจากนั้นโหลดหน้าใหม่คุณควรเห็นคำขอสำหรับ loadPageChunk และในคำขอของคำขอคุณควรเห็น pageId และนั่นคือ BLOG_INDEX_ID ของคุณ

เพื่อให้ได้โทเค็นความคิดของคุณเปิดแนวคิดและมองหาคุกกี้ token_v2

การสร้างโพสต์บล็อก

  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 สำหรับความคิดเริ่มต้น
  • shu ding @shuding_ สำหรับความช่วยเหลือการออกแบบ
  • Luis Alvarez @luis_fades สำหรับความช่วยเหลือในการออกแบบและการจับข้อผิดพลาด
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด