แปลงร่าง Notion Blocks เป็นหน้าเว็บสวยๆ ด้วย Astro - สำรวจความสามารถของ Block Renderer
by
Nook - The Duckrr
Nook - The Duckrr Heading 1
Heading 2
Heading 3
Paragraph
เนื้อหานี้เป็นย่อหน้าเปิดเรื่อง อธิบายบริบทของบทความ เช่น วัตถุประสงค์ ผู้อ่านเป้าหมาย และสิ่งที่จะได้เรียนรู้จากบล็อกนี้
Bulleted list and Numbered list
- รายการ 1
-
รายการ 2
- รายการย่อย a
- รายการย่อย b
- ลำดับเลขที่ 1
- ลำดับตัวเลขที่ 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 นาที |
| ระดับ | ผู้เริ่มต้น |