Usage Guide

คู่มือการใช้งาน Documentation Site - เรียนรู้วิธีเพิ่มและจัดการเอกสาร

ภาพรวมการทำงาน

Documentation Site นี้ใช้ระบบ Multi-Project Documentation ที่รองรับหลาย project โดยแต่ละ project มี navigation แยกกัน

โครงสร้างหลัก

document-blog/
├── projects-config.json          # กำหนด projects ทั้งหมด
├── src/
│   └── content/
│       └── [project-id]/         # โฟลเดอร์ของแต่ละ project
│           ├── docs-config.json  # navigation ของ project นั้น
│           └── [section]/        # โฟลเดอร์ section
│               └── page.mdx      # ไฟล์เอกสาร

การเพิ่มเอกสารใหม่ใน Project ที่มีอยู่

ขั้นตอนที่ 1: สร้างไฟล์ MDX

สร้างไฟล์ .mdx ใน src/content/[project-id]/[section]/:

# ตัวอย่าง: เพิ่มหน้าใหม่ใน docs project
touch src/content/docs/project-guide/new-page.mdx

ขั้นตอนที่ 2: เขียน Frontmatter และเนื้อหา

---
title: "ชื่อเอกสาร"
description: "คำอธิบายสั้นๆ"
order: 1
category: "project-guide"
---

# ชื่อหัวข้อหลัก

เนื้อหาเอกสาร...

## หัวข้อย่อย

รายละเอียดเพิ่มเติม

Frontmatter Fields:

Field	Required	Description
title	✅	ชื่อที่แสดงบนหน้าเอกสาร
description	✅	คำอธิบายสั้นๆ
category	✅	หมวดหมู่ (ชื่อ section)
order	❌	ลำดับการแสดง

ขั้นตอนที่ 3: อัพเดท Navigation Config

แก้ไขไฟล์ src/content/[project-id]/docs-config.json:

{
  "navigation": [
    {
      "title": "Project Guide",
      "slug": "project-guide",
      "items": [
        {
          "title": "Setup Guide",
          "slug": "project-guide/setup"
        },
        {
          "title": "New Page",
          "slug": "project-guide/new-page"
        }
      ]
    }
  ]
}

สำคัญ:

• slug ใน section ต้องตรงกับชื่อโฟลเดอร์
• slug ใน items ต้องเป็น path: [folder]/[filename] (ไม่ต้องใส่ .mdx)

ขั้นตอนที่ 4: ตรวจสอบผลลัพธ์

http://localhost:4321/[project-id]/[section]/[page]

ตัวอย่าง: http://localhost:4321/docs/project-guide/new-page

การเพิ่ม Section ใหม่

ขั้นตอนที่ 1: สร้างโฟลเดอร์ Section

mkdir src/content/docs/new-section

ขั้นตอนที่ 2: สร้างไฟล์ MDX

touch src/content/docs/new-section/first-page.mdx
touch src/content/docs/new-section/second-page.mdx

ขั้นตอนที่ 3: อัพเดท Navigation

เพิ่ม section ใหม่ใน src/content/docs/docs-config.json:

{
  "navigation": [
    {
      "title": "Project Guide",
      "slug": "project-guide",
      "items": [...]
    },
    {
      "title": "New Section",
      "slug": "new-section",
      "items": [
        {
          "title": "First Page",
          "slug": "new-section/first-page"
        },
        {
          "title": "Second Page",
          "slug": "new-section/second-page"
        }
      ]
    }
  ]
}

การเพิ่ม Project ใหม่

ขั้นตอนที่ 1: เพิ่มใน projects-config.json

{
  "projects": [
    {
      "id": "docs",
      "title": "Project Documentation",
      "description": "เอกสารโครงสร้างและการใช้งานระบบ",
      "icon": "📚",
      "color": "#8B5CF6"
    },
    {
      "id": "python",
      "title": "Python Documentation",
      "description": "เอกสารภาษา Python",
      "icon": "🐍",
      "color": "#3776AB"
    }
  ]
}

Fields:

Field	Description
id	ID ของ project (ใช้เป็น URL path)
title	ชื่อที่แสดงใน sidebar
description	คำอธิบาย project
icon	Emoji icon
color	สีของ project

ขั้นตอนที่ 2: สร้างโครงสร้างโฟลเดอร์

# สร้างโฟลเดอร์ project
mkdir -p src/content/python/getting-started

# สร้างไฟล์ config
touch src/content/python/docs-config.json

# สร้างไฟล์เอกสาร
touch src/content/python/getting-started/introduction.mdx

ขั้นตอนที่ 3: สร้าง docs-config.json

สร้างไฟล์ src/content/python/docs-config.json:

{
  "navigation": [
    {
      "title": "Getting Started",
      "slug": "getting-started",
      "items": [
        {
          "title": "Introduction",
          "slug": "getting-started/introduction"
        }
      ]
    }
  ]
}

ขั้นตอนที่ 4: เขียนเอกสาร

สร้างไฟล์ src/content/python/getting-started/introduction.mdx:

---
title: "Introduction to Python"
description: "แนะนำภาษา Python"
order: 1
category: "getting-started"
---

# Introduction to Python

เนื้อหา...

ขั้นตอนที่ 5: เข้าถึง Project ใหม่

http://localhost:4321/python/getting-started/introduction

การเขียน MDX

Markdown พื้นฐาน

# Heading 1
## Heading 2
### Heading 3

**ตัวหนา** และ *ตัวเอียง*

- รายการ 1
- รายการ 2

1. ลำดับ 1
2. ลำดับ 2

[Link](https://example.com)

Code Blocks

```javascript
console.log("Hello World!");
```

```python
print("Hello World!")
```

```bash
npm run dev
```

Tables

| Header 1 | Header 2 |
|----------|----------|
| Data 1   | Data 2   |

Inline Code

ใช้ backticks: const x = 10;

การลบเอกสาร

ลบหน้าเดียว

1. ลบไฟล์ .mdx
2. ลบ entry ออกจาก docs-config.json

ลบ Section

1. ลบโฟลเดอร์ section ทั้งหมด
2. ลบ section ออกจาก docs-config.json

ลบ Project

1. ลบโฟลเดอร์ project ใน src/content/
2. ลบ entry ออกจาก projects-config.json

สรุป

ต้องการ	ไฟล์ที่ต้องแก้
เพิ่มหน้าใหม่	สร้าง .mdx + แก้ docs-config.json
เพิ่ม section	สร้างโฟลเดอร์ + .mdx + แก้ docs-config.json
เพิ่ม project	แก้ projects-config.json + สร้างโฟลเดอร์ + docs-config.json + .mdx

ง่ายมาก! 🚀