Wrikka Learn

Dark mode

Internationalization (การจัดการหลายภาษา) ​

VitePress มีระบบ i18n ในตัว ช่วยให้เราสามารถสร้างเอกสารหลายภาษาบนเว็บไซต์เดียวกันได้อย่างง่ายดาย

โครงสร้างไดเรกทอรีสำหรับแต่ละภาษา ​

ตัวอย่างโครงสร้างในโฟลเดอร์ docs/:

text
docs/
├─ en/
│  ├─ guide.md
├─ es/
│  ├─ guide.md
├─ fr/
   ├─ guide.md
└─ tutorial.md   (ไฟล์สำหรับภาษาหลัก)

เมื่อผู้ใช้เข้า /es/guide.html จะโหลดเนื้อหาใน docs/es/guide.md

ตั้งค่า locales ใน config.ts ​

ในไฟล์ docs/.vitepress/config.ts ให้กำหนด locales ดังนี้:

ts
import { defineConfig } from "vitepress";

export default defineConfig({
  // ค่าร่วม (เช่น title, themeConfig)
  locales: {
    root: {
      label: "English",
      lang: "en",
    },
    es: {
      label: "Español",
      lang: "es", // จะถูกใส่เป็น attribute lang ของ <html>
      link: "/es/guide", // ลิงก์ไปยังโฟลเดอร์ภาษานี้
      // สามารถกำหนด title, description, themeConfig เพิ่มเติมได้
    },
  },
});

คุณสมบัติที่สามารถปรับแต่งได้ในแต่ละ locale ​

แต่ละ locale (รวม root) รองรับการ Override ค่าดังนี้:

  • lang และ dir (เช่น 'rtl' สำหรับภาษาอ่านขวาไปซ้าย)
  • title และ titleTemplate
  • description
  • head (เมตาแท็กต่างๆ)
  • themeConfig (จะทำการ shallow merge)
ts
interface LocaleSpecificConfig<ThemeConfig = any> {
  lang?: string;
  dir?: string;
  title?: string;
  titleTemplate?: string | boolean;
  description?: string;
  head?: HeadConfig[];
  themeConfig?: ThemeConfig;
}

ข้อควรระวัง: ไม่ควร override themeConfig.algolia หรือ themeConfig.carbonAds ในระดับ locale

จัดการไฟล์ config หลายภาษา ​

หากต้องการแยกไฟล์ config สำหรับแต่ละภาษา สามารถสร้างไฟล์แยกแล้ว import รวมใน docs/.vitepress/config/index.ts:

ts
// docs/.vitepress/config/en.ts
export const en = {/* ... */};
// docs/.vitepress/config/es.ts
export const es = {/* ... */};
// docs/.vitepress/config/index.ts
import { defineConfig } from "vitepress";
import { en } from "./en";
import { es } from "./es";
export default defineConfig({ locales: { root: en, es } });

การรองรับ RTL (Experimental) ​

สำหรับภาษาที่อ่านจากขวาไปซ้าย ให้ตั้ง dir: 'rtl' ใน locale นั้น และติดตั้ง PostCSS plugin เช่น rtlcss หรือ postcss-rtl เพื่อแปลง style:

ts
export default defineConfig({
  locales: {
    ar: { lang: "ar", dir: "rtl", label: "العربية", link: "/ar/" },
  },
});

ใน postcss.config.js:

js
module.exports = {
  plugins: [require("rtlcss")],
};