โครงสร้างโปรเจกต์ VitePress

เมื่อสร้างโปรเจกต์ VitePress จะได้โครงสร้างไฟล์ประมาณนี้:

my-docs/
├─ docs/
│  ├─ index.md         // หน้าแรก
│  ├─ guide.md         // ตัวอย่างหน้าอื่นๆ
│  └─ ...              // เพิ่มไฟล์ Markdown ตามต้องการ
├─ .vitepress/
│  ├─ config.ts        // ไฟล์ตั้งค่า VitePress
│  └─ ...              // โฟลเดอร์สำหรับตั้งค่าเพิ่มเติม
├─ package.json
└─ ...

อธิบายแต่ละส่วน

• docs/ : เก็บไฟล์ Markdown ที่จะกลายเป็นหน้าเว็บ
• .vitepress/ : เก็บไฟล์ config และการตั้งค่าเพิ่มเติม เช่น theme, sidebar, nav
• package.json : จัดการ dependencies และคำสั่ง npm

โดยปกติจะเขียนเนื้อหาทั้งหมดในโฟลเดอร์ docs/ และปรับแต่งการตั้งค่าต่างๆ ใน .vitepress/config.ts เพื่อให้เว็บไซต์ดูดีและใช้งานง่ายขึ้น

Tip: สามารถเพิ่มไฟล์ Markdown เพิ่มเติมใน docs/ ได้ตามต้องการ เช่น about.md, contact.md แล้วลิงก์ไปยังหน้าเหล่านั้นผ่าน sidebar หรือ nav ใน config ได้เลย