Wrikka Learn

Dark mode

คู่มือ Site Config สำหรับ VitePress ​

อ้างอิงและเรียบเรียงจาก vitepress.dev faviconVitePress Site Config Reference

Site Config คืออะไร? ​

Site Config คือไฟล์ตั้งค่าหลักของเว็บไซต์ VitePress อยู่ที่ <root>/.vitepress/config.[js|ts|mjs|mts] ใช้สำหรับกำหนดข้อมูลเว็บไซต์ โครงสร้าง การ build และการปรับแต่งต่าง ๆ ในระดับโปรเจกต์

โครงสร้างไฟล์ Site Config ​

  • ตำแหน่งไฟล์: <root>/.vitepress/config.ts (หรือ .js, .mjs, .mts)
  • แนะนำให้ใช้ ES Modules (export default {...})
  • สามารถใช้ TypeScript ได้ทันที

ตัวอย่างพื้นฐาน:

ts
// .vitepress/config.ts
export default {
  lang: "th-TH",
  title: "เอกสารของฉัน",
  description: "เว็บเอกสารสร้างด้วย VitePress",
};

ตัวอย่างขั้นสูง (ใช้ defineConfig + async):

ts
import { defineConfig } from "vitepress";

export default defineConfig({
  lang: "th-TH",
  title: "เว็บของฉัน",
  description: "เว็บเอกสารสร้างด้วย VitePress",
  // ...
});

ตัวเลือกสำคัญใน Site Config ​

1. title ​

  • ประเภท: string (default: VitePress)
  • อธิบาย: ชื่อเว็บไซต์ (แสดงใน navbar และเป็น suffix ของ title หน้าแต่ละหน้า)
ts
export default {
  title: "My Awesome Site",
};

2. titleTemplate ​

  • ประเภท: string | boolean
  • อธิบาย: ตั้ง suffix หรือรูปแบบของ title (ใช้ :title แทนชื่อหน้า)
ts
export default {
  title: "My Awesome Site",
  titleTemplate: ":title - Custom Suffix",
};

3. description ​

  • ประเภท: string (default: A VitePress site)
  • อธิบาย: คำอธิบายเว็บไซต์ (แสดงใน <meta name="description">)
ts
export default {
  description: "เว็บเอกสารสร้างด้วย VitePress",
};

4. head ​

  • ประเภท: HeadConfig[]
  • อธิบาย: เพิ่มแท็ก <head> (เช่น meta, script)
ts
export default {
  head: [
    [
      "meta",
      { name: "keywords", content: "vitepress, docs" },
    ],
    [
      "script",
      {},
      `console.log('Hello!')`,
    ],
  ],
};

5. lang ​

  • ประเภท: string (default: en-US)
  • อธิบาย: กำหนดภาษา <html lang="...">
ts
export default {
  lang: "th-TH",
};

6. base ​

  • ประเภท: string (default: /)
  • อธิบาย: base URL สำหรับ deploy (เช่น deploy ขึ้น GitHub Pages ต้องตั้ง /repo/)
ts
export default {
  base: "/mydocs/",
};

ตัวเลือกเกี่ยวกับ Build ​

7. srcDir ​

  • ประเภท: string (default: .)
  • อธิบาย: โฟลเดอร์เก็บ markdown (เช่น './src')
ts
export default {
  srcDir: "./src",
};

8. srcExclude ​

  • ประเภท: string[]
  • อธิบาย: glob pattern สำหรับ markdown ที่ไม่ต้องการให้ build
ts
export default {
  srcExclude: ["**/README.md", "**/TODO.md"],
};

9. outDir ​

  • ประเภท: string (default: ./.vitepress/dist)
  • อธิบาย: โฟลเดอร์ output หลัง build
ts
export default {
  outDir: "../public",
};

10. assetsDir ​

  • ประเภท: string (default: assets)
  • อธิบาย: โฟลเดอร์ assets (relative กับ outDir)
ts
export default {
  assetsDir: "static",
};

11. cacheDir ​

  • ประเภท: string (default: ./.vitepress/cache)
  • อธิบาย: โฟลเดอร์ cache
ts
export default {
  cacheDir: "./.vitepress/.vite",
};

12. ignoreDeadLinks ​

  • ประเภท: boolean | 'localhostLinks' | (string | RegExp | ((link: string) => boolean))[] (default: false)
  • อธิบาย: ไม่ให้ build ล้มเหลวถ้ามี dead link
ts
export default {
  ignoreDeadLinks: true,
};

13. metaChunk (experimental) ​

  • ประเภท: boolean (default: false)
  • อธิบาย: แยก metadata ออกจาก HTML เพื่อลดขนาด payload

14. mpa (experimental) ​

  • ประเภท: boolean (default: false)
  • อธิบาย: เปิด MPA mode (0kb JS, ไม่มี client-side navigation)

หมายเหตุสำหรับมือใหม่ ​

  • ตั้งค่าในไฟล์ .vitepress/config.ts หรือ .js เท่านั้น
  • ตัวเลือกอื่น ๆ เช่น themeConfig, markdown, vite, vue สามารถดูรายละเอียดในเอกสารหลัก
  • ใช้ defineConfig จะได้ intellisense และ type checking
  • สามารถใช้ async/await ใน config ได้
  • ดูตัวอย่างและรายละเอียดเพิ่มเติมได้ที่ vitepress.dev faviconVitePress Docs