แปลงร่าง Notion Blocks เป็นหน้าเว็บสวยๆ ด้วย Astro - สำรวจความสามารถของ Block Renderer

แปลงร่าง Notion Blocks เป็นหน้าเว็บสวยๆ ด้วย Astro - สำรวจความสามารถของ Block Renderer

byAvatar Nook - The Duckrr

Heading 1

Heading 2

Heading 3


Paragraph

เนื้อหานี้เป็นย่อหน้าเปิดเรื่อง อธิบายบริบทของบทความ เช่น วัตถุประสงค์ ผู้อ่านเป้าหมาย และสิ่งที่จะได้เรียนรู้จากบล็อกนี้


Bulleted list and Numbered list

  • รายการ 1
  • รายการ 2
    • รายการย่อย a
    • รายการย่อย b
  1. ลำดับเลขที่ 1
  2. ลำดับตัวเลขที่ 2


To-do-list

งานที่ต้องทำ 1
งานที่ต้องทำ 2
งานที่ต้องทำ 3
งานที่ต้องทำ 4


Quote

เขียนบล็อกให้กระชับ อ่านง่าย และมีโครงสร้างที่ชัดเจน ช่วยให้ผู้อ่านเข้าใจประเด็นสำคัญได้เร็วขึ้น


Callout

💡
เขียนสรุปต้นบทความ เพื่อให้ผู้อ่านตัดสินใจได้ว่าควรอ่านต่อหรือไม่


Code

# โค้ดตัวอย่าง
npm create astro@latest my-blog
cd my-blog
npm run dev
// ตัวอย่างคอมโพเนนต์ React ภายใน Astro
import React from 'react'

export default function Button({ label }: { label: string }) {
  return <button className="btn">{label}</button>
}


Image & Video


Bookmark

https://theduckrr.com


Table

หัวข้อคำอธิบาย
เวลาอ่านประมาณ 5–7 นาที
ระดับผู้เริ่มต้น