การแสดงปฏิกิริยาที่รวดเร็วและแม่นยำสำหรับความคิด รวมแบตเตอรี่ TS
หากคุณเพียงแค่ต้องการเผยแพร่เว็บไซต์โดยใช้แนวคิดเราขอแนะนำให้ใช้ Super.so - โซลูชันโฮสต์ที่มีความสมบูรณ์แบบที่ดูแลรายละเอียดทั้งหมดสำหรับคุณ
หากคุณต้องการควบคุมเว็บไซต์ของคุณมากขึ้นผ่าน React เราขอแนะนำให้ตรวจสอบชุดสตาร์ทเทอร์เตอร์ Next.js ซึ่งฟรีและใช้ react-notion-x ภายใต้ฮูด
และถ้าคุณต้องการการควบคุมมากขึ้นคุณก็อยู่ในสถานที่ที่เหมาะสม! -
next/dynamicnext/image พร้อมกับ LQIP Preview Images (Demo)ก่อนอื่นคุณจะต้องดึงเนื้อหาสำหรับหน้าแนวคิด:
import { NotionAPI } from 'notion-client'
const notion = new NotionAPI ( )
const recordMap = await notion . getPage ( '067dd719a912471ea9a3ac10710e7fdf' )เมื่อคุณมีข้อมูลสำหรับหน้าความคิดคุณสามารถแสดงผลได้ผ่าน React:
import * as React from 'react'
import { NotionRenderer } from 'react-notion-x'
export default ( { recordMap } ) => (
< NotionRenderer recordMap = { recordMap } fullPage = { true } darkMode = { false } />
) หมายเหตุ: สำหรับบล็อกที่หนักกว่าคุณจะต้องเลือกใช้พวกเขาผ่านทาง NotionRenderer.components สิ่งเหล่านี้ไม่รวมอยู่ในการส่งออก NotionRenderer เริ่มต้นเนื่องจากมีน้ำหนักมากเกินไปสำหรับการใช้งานหลายกรณี
คุณจะต้องนำเข้าสไตล์ CSS บางอย่างเช่นกัน หากคุณใช้ next.js เราขอแนะนำให้คุณวางการนำเข้าเหล่านี้ไว้ที่ด้านบนของ pages/_app.js :
// core styles shared by all of react-notion-x (required)
import 'react-notion-x/src/styles.css'
// used for code syntax highlighting (optional)
import 'prismjs/themes/prism-tomorrow.css'
// used for rendering equations (optional)
import 'katex/dist/katex.min.css' การนำเข้าเริ่มต้นจาก react-notion-x มุ่งมั่นที่จะมีน้ำหนักเบาที่สุดเท่าที่จะทำได้ บล็อกส่วนใหญ่จะแสดงผลได้ดี แต่บล็อกที่มีขนาดใหญ่กว่าเช่น PDFs และมุมมองคอลเลกชัน (มุมมองฐานข้อมูล) ไม่รวมอยู่ในค่าเริ่มต้น
ในการใช้งานคุณจะต้องนำเข้าสิ่งที่คุณต้องการจาก react-notion-x/build/third-party/* ::
import { Code } from 'react-notion-x/build/third-party/code'
import { Collection } from 'react-notion-x/build/third-party/collection'
import { Equation } from 'react-notion-x/build/third-party/equation'
import { Modal } from 'react-notion-x/build/third-party/modal'
import { Pdf } from 'react-notion-x/build/third-party/pdf'โปรดทราบว่าเราขอแนะนำอย่างยิ่งที่ขี้เกียจโหลดส่วนประกอบเหล่านี้เว้นแต่คุณจะรู้ว่าคุณจะต้องล่วงหน้าสำหรับกรณีการใช้งานของคุณ
หากคุณใช้ next.js คุณสามารถใช้ Next/Dynamic เพื่อโหลดอย่างเกียจคร้าน หากเนื้อหาความคิดของคุณไม่ได้ใช้หนึ่งในส่วนประกอบเฮฟวี่เวทเหล่านี้มันจะไม่ถูกโหลดลงในหน้าของคุณ สิ่งนี้ทำให้หน้าแรกของหน้าเล็กและเว็บไซต์ของคุณรู้สึกเร็ว
import dynamic from 'next/dynamic'
const Code = dynamic ( ( ) =>
import ( 'react-notion-x/build/third-party/code' ) . then ( ( m ) => m . Code )
)
const Collection = dynamic ( ( ) =>
import ( 'react-notion-x/build/third-party/collection' ) . then (
( m ) => m . Collection
)
)
const Equation = dynamic ( ( ) =>
import ( 'react-notion-x/build/third-party/equation' ) . then ( ( m ) => m . Equation )
)
const Pdf = dynamic (
( ) => import ( 'react-notion-x/build/third-party/pdf' ) . then ( ( m ) => m . Pdf ) ,
{
ssr : false
}
)
const Modal = dynamic (
( ) => import ( 'react-notion-x/build/third-party/modal' ) . then ( ( m ) => m . Modal ) ,
{
ssr : false
}
) คุณจะต้องเปิดใช้งานพวกเขาโดยส่งผ่านไปยัง components ของเสาของ NotionRenderer
export default ( { recordMap } ) => (
< NotionRenderer
recordMap = { recordMap }
components = { {
Code ,
Collection ,
Equation ,
Modal ,
Pdf
} }
/>
) องค์ประกอบ Code ใช้ปริซึมภายใต้ประทุน มันมาพร้อมกับการสนับสนุนสำหรับ JavaScript, typeScript และ CSS ตามค่าเริ่มต้น หากต้องการเพิ่มการสนับสนุนสำหรับไวยากรณ์ภาษาเพิ่มเติมให้ทำตามตัวอย่างใน components/NotionPage.tsx ซึ่งโหลดส่วนประกอบปริซึมอย่างเกียจคร้านเมื่อรันไทม์ คุณอาจต้องการเพิ่ม prismjs ในโครงการของคุณเป็นการพึ่งพาเมื่อใช้องค์ประกอบ Code ดังนั้น TypeScript จะไม่บ่น
สำหรับการสนับสนุน Equation คุณจะต้องนำเข้าสไตล์ Katex CSS
สำหรับแต่ละองค์ประกอบที่เป็นตัวเลือกเหล่านี้ตรวจสอบให้แน่ใจว่าคุณนำเข้า CS ของบุคคลที่สามที่เกี่ยวข้องหากจำเป็น (ด้านบน)
คุณอาจเลือกผ่าน authToken และ activeUser ไปยัง API หากคุณต้องการเข้าถึงหน้าแนวคิดส่วนตัว ทั้งสองสามารถดึงได้จากเว็บเบราว์เซอร์ของคุณ เมื่อคุณดูเวิร์กเปซของคุณแล้วให้เปิดเครื่องมือการพัฒนา> แอปพลิเคชัน> คุกกี้> และคัดลอก token_v2 และ notion_user_id ตามลำดับ ActiveUser: notion_user_id, authtoken: token_v2
เราขอแนะนำให้จัดเก็บสิ่งเหล่านี้เป็นตัวแปรสภาพแวดล้อมและส่งผ่านไปยังตัวสร้าง NotionAPI ดังต่อไปนี้:
const notion = new NotionAPI ( {
activeUser : process . env . NOTION_ACTIVE_USER ,
authToken : process . env . NOTION_TOKEN_V2
} ) โปรดทราบว่านี่ไม่เหมือนกับโทเค็น API ที่จัดทำโดย API ความคิดอย่างเป็นทางการเนื่องจาก notion-client ใช้ความคิดที่ไม่เป็นทางการ API (ซึ่งเป็นสิ่งที่แอปความคิดทั้งหมดใช้)
ต่อไปนี้เป็นโครงการตัวอย่าง Next.js ขั้นต่ำที่มีรหัสที่สำคัญที่สุดใน pages/[pageId].tsx และ components/NotionPage.tsx คุณสามารถดูตัวอย่างนี้สดบน Vercel
ต่อไปนี้เป็นโครงการตัวอย่างที่มีคุณสมบัติเต็มรูปแบบมากขึ้นด้วยรหัสที่สำคัญที่สุดใน pages/[pageId].tsx และ components/NotionPage.tsx คุณสามารถดูตัวอย่างนี้สดบน Vercel
การสาธิตเต็มรูปแบบเพิ่มคุณสมบัติที่ดีบางอย่าง:
สำหรับตัวอย่างการผลิตให้ตรวจสอบชุดเริ่มต้น Next.js Notion Starter ซึ่งใช้ react-notion-x ภายใต้ประทุน
| บรรจุุภัณฑ์ | NPM | สิ่งแวดล้อม | คำอธิบาย |
|---|---|---|---|
| React-Notion-X | เบราว์เซอร์ + SSR | Renderer Reaction อย่างรวดเร็วสำหรับความคิด | |
| ความคิด-ลูกค้า | ฝั่งเซิร์ฟเวอร์* | ไคลเอนต์ TypeScript ที่แข็งแกร่งสำหรับ API Notion | |
| ประเภทความคิด | สากล | ประเภทประเภทความคิดหลัก | |
| ความคิด-utils | สากล | ยูทิลิตี้ที่เป็นประโยชน์สำหรับการทำงานกับข้อมูลความคิด |
* API ของแนวคิดไม่ควรถูกเรียกจากเบราว์เซอร์ฝั่งไคลเอ็นต์เนื่องจากข้อ จำกัด ของ CORS notion-client เข้ากันได้กับ node.js และ deno
บล็อกความคิดส่วนใหญ่และมุมมองการรวบรวมได้รับการสนับสนุนอย่างเต็มที่
| ประเภทบล็อก | ที่ได้รับการสนับสนุน | ประเภทบล็อก enum | หมายเหตุ |
|---|---|---|---|
| หน้าหนังสือ | ✅ใช่ | page | |
| ข้อความ | ✅ใช่ | text | รองรับตัวเลือกการจัดรูปแบบข้อความที่รู้จักทั้งหมด |
| บุ๊กมาร์ก | ✅ใช่ | bookmark | ดูตัวอย่าง URL ภายนอก |
| รายการกระสุนปืน | ✅ใช่ | bulleted_list | <ul> |
| รายการหมายเลข | ✅ใช่ | numbered_list | <ol> |
| หัวเรื่อง 1 | ✅ใช่ | header | <h1> |
| หัวเรื่อง 2 | ✅ใช่ | sub_header | <h2> |
| หัวเรื่อง 3 | ✅ใช่ | sub_sub_header | <h3> |
| อ้าง | ✅ใช่ | quote | |
| คำบรรยาย | ✅ใช่ | callout | |
| สมการ (บล็อก) | ✅ใช่ | equation | Katex ผ่าน React-Katex |
| สมการ (อินไลน์) | ✅ใช่ | text | Katex ผ่าน React-Katex |
| TODOS (ช่องทำเครื่องหมาย) | ✅ใช่ | to_do | |
| สารบัญ | ✅ใช่ | table_of_contents | ดู notion-utils getPageTableOfContents ผู้ช่วย funtion |
| ผู้แบ่งแยก | ✅ใช่ | divider | เส้นแนวนอน |
| คอลัมน์ | ✅ใช่ | column | |
| รายการคอลัมน์ | ✅ใช่ | column_list | |
| สลับ | ✅ใช่ | toggle | <details> |
| ภาพ | ✅ใช่ | image | <img> |
| ฝัง | ✅ใช่ | embed | iframe ทั่วไปฝัง |
| วิดีโอ | ✅ใช่ | video | iframe |
| รูปปั้น | ✅ใช่ | figma | iframe |
| Google Maps | ✅ใช่ | maps | iframe |
| Google Drive | ✅ใช่ | drive | Google เอกสารแผ่น ฯลฯ |
| ทวีต | ✅ใช่ | tweet | ใช้ SDK Embedding Twitter |
| ✅ใช่ | pdf | ใช้ URL ที่ลงนาม S3 และ React-PDF | |
| เสียง | ✅ใช่ | audio | ใช้ URL ที่ลงนาม S3 และองค์ประกอบ audio HTML5 |
| ไฟล์ | ✅ใช่ | file | ใช้ URL ที่ลงนาม S3 (ไฟล์ดาวน์โหลดทั่วไป) |
| การเชื่อมโยง | ✅ใช่ | text | ลิงค์ภายนอก |
| ลิงค์หน้า | ✅ใช่ | page | ลิงก์ไปยังหน้าความคิดในพื้นที่ทำงานเดียวกัน |
| ลิงค์หน้าภายนอก | ✅ใช่ | text | ลิงก์ไปยังหน้าแนวคิดหรือมุมมองคอลเลกชันในเวิร์กสเปซอื่น |
| รหัส (บล็อก) | ✅ใช่ | code | บล็อกไวยากรณ์บล็อกที่เน้นผ่าน prismjs |
| รหัส (อินไลน์) | ✅ใช่ | text | การจัดรูปแบบรหัสแบบอินไลน์ (ไม่มีการไฮไลต์ไวยากรณ์) |
| ของสะสม | ✅ใช่ | หรือที่รู้จักกันในชื่อฐานข้อมูล | |
| มุมมองคอลเลกชัน | ✅ใช่ | collection_view | คอลเลกชันมีการทำแผนที่ 1: N เพื่อดูคอลเลกชัน |
| ตารางมุมมองคอลเลกชัน | ✅ใช่ | collection_view | type = "table" (มุมมองตารางเริ่มต้น) |
| แกลเลอรีมุมมองคอลเลกชัน | ✅ใช่ | collection_view | type = "gallery" (มุมมองกริด) |
| บอร์ดมุมมองคอลเลกชัน | ✅ใช่ | collection_view | type = "board" (มุมมอง Kanban) |
| รายการมุมมองคอลเลกชัน | ✅ใช่ | collection_view | type = "list" (มุมมองรายการแนวตั้ง) |
| ปฏิทินดูคอลเลกชัน | หายไป | collection_view | type = "calendar" (มุมมองปฏิทินฝัง) |
| หน้ามุมมองคอลเลกชัน | ✅ใช่ | collection_view_page | มุมมองคอลเลกชันเป็นหน้าสแตนด์อโลน |
โปรดแจ้งให้เราทราบหากคุณพบปัญหาใด ๆ หรือบล็อกที่หายไป
บล็อกที่รู้จักทั้งหมดและการตั้งค่าการกำหนดค่าที่รู้จักกันมากที่สุดสามารถพบได้ในชุดทดสอบของเรา
คะแนนของ Google Lighthouse สำหรับหน้าตัวอย่างที่แสดงโดย `react-notion-x` บน Vercel
react-notion-x นอกกรอบนั้นค่อนข้างเร็วและค่อนข้างเบา แต่มีปัจจัยสำคัญบางประการที่ต้องระวัง
BundlePhobia รายงานขนาดชุดรวม GZIP ~ 28KB สำหรับชุด react-notion-x สิ่งนี้ไม่รวมถึงส่วนประกอบ third-party ที่เป็นตัวเลือกซึ่งเราขอแนะนำการโหลดขี้เกียจผ่าน Next/Dynamic เฉพาะในกรณีที่หน้าต้องการ
อีกปัจจัยสำคัญสำหรับ Perf มาจากภาพที่โฮสต์โดยแนวคิด โดยทั่วไปแล้วพวกเขาจะไม่ได้รับการปรับขนาดขนาดไม่เหมาะสมและไม่สามารถแคชได้เพราะความคิดต้องจัดการกับการควบคุมการเข้าถึงที่ดีซึ่งผู้ใช้สามารถเปลี่ยนแปลงได้ตลอดเวลา คุณสามารถแทนที่ฟังก์ชั่น mapImageUrl เริ่มต้นบน NotionRenderer เพื่อเพิ่มการแคชผ่าน CDN เช่นคนงาน CloudFlare ซึ่งเป็นสิ่งที่ Notion X ทำเพื่อความเร็วในการโหลดหน้าเว็บที่ดีที่สุด
NotionRenderer ยังรองรับการโหลดภาพขี้เกียจพร้อมตัวอย่างภาพตัวยึดภาพคุณภาพต่ำเสริม คุณสามารถดูตัวอย่างนี้ได้ในหน้านี้ซึ่งใช้ LQIP-Modern เพื่อสร้างภาพตัวยึดตำแหน่งล่วงหน้าซึ่งได้รับแรงบันดาลใจจากการโหลดรูปภาพของ Medium.com
หากคุณใช้ next.js เราขอแนะนำให้ผ่าน next/image หรือ next/legacy/image และ next/link ไปยัง Renderer ดังนี้:
import Image from 'next/image' // or import Image from 'next/legacy/image' if you use legacy Image
import Link from 'next/link'
export default ( { recordMap } ) => (
< NotionRenderer
recordMap = { recordMap }
components = { {
nextImage : Image , // or nextLegacyImage: LegacyImage,
nextLink : Link
} }
/>
) สิ่งนี้จะห่อส่วนประกอบ next.js เหล่านี้ไว้ในเลเยอร์ความเข้ากันได้เพื่อให้ NotionRenderer สามารถใช้มันได้เช่นเดียวกับที่ไม่ใช่ next.js เทียบเท่า <img> และ <a>
โปรดทราบว่าส่วนประกอบภาพที่กำหนดเองจะเปิดใช้งานเฉพาะกับภาพตัวอย่างหรือโดยเปิดใช้งาน forceCustomImages ของ NotionRenderer
react-notion-x ภายใต้ประทุนreact-notion-x เริ่มต้นเป็นส้อมของ react-notion พร้อมการสนับสนุนที่ดีขึ้นสำหรับเนื้อหาความคิดประเภทต่าง ๆ (โดยเฉพาะคอลเลกชัน) และเติบโตเป็นสิ่งที่ครอบคลุมมากขึ้นreact-notion ไม่ได้รับการดูแลอย่างแข็งขันอีกต่อไปnotion-types และ notion-client เป็นการเขียนใหม่ของ notion-api-workerreact-notion-x คือการเรนเดอร์ฝั่งเซิร์ฟเวอร์ผ่าน next.js ซึ่งในกรณีนี้คนงาน CF ไม่จำเป็นดูคู่มือการบริจาคและเข้าร่วมรายชื่อผู้มีส่วนร่วมที่น่าทึ่งของเรา!
MIT © Travis Fischer
โครงการนี้ขยายงานที่ได้รับอนุญาตจาก MIT โดย Timo Lins, Tobias Lins, Sam Wight และผู้มีส่วนร่วมอื่น ๆ
สนับสนุนงาน OSS ของฉันโดยติดตามฉันบน Twitter
Super.o ใจดีพอที่จะสนับสนุนโครงการนี้ หากคุณกำลังมองหาโซลูชันที่โฮสต์ซึ่งใช้วิธีการที่คล้ายกันมากใน react-notion-x แต่จัดการรายละเอียดทั้งหมดให้คุณแล้วลองดูพวกเขาอย่างแน่นอน
