Internasionalisasi

Untuk menggunakan fitur i18n bawaan, Anda perlu membuat struktur direktori sebagai berikut:

docs/
├─ es/
│  ├─ foo.md
├─ fr/
│  ├─ foo.md
├─ foo.md

Kemudian di docs/.vitepress/config.ts:

docs/.vitepress/config.ts

import { defineConfig } from 'vitepress'

export default defineConfig({
  // properti bersama dan hal-hal top-level lainnya...

  locales: {
    root: {
      label: 'English',
      lang: 'en'
    },
    fr: {
      label: 'French',
      lang: 'fr', // opsional, akan ditambahkan sebagai atribut `lang` pada tag `html`
      link: '/fr/guide' // default /fr/ -- ditampilkan di menu terjemahan navbar, dapat berupa eksternal

      // properti spesifik locale lainnya...
    }
  }
})

Properti berikut dapat ditimpa untuk setiap locale (termasuk root):

interface LocaleSpecificConfig<ThemeConfig = any> {
  lang?: string
  dir?: string
  title?: string
  titleTemplate?: string | boolean
  description?: string
  head?: HeadConfig[] // akan digabung dengan entri head yang ada, tag meta duplikat otomatis dihapus
  themeConfig?: ThemeConfig // akan di-shallow merge, hal umum dapat diletakkan di entri themeConfig top-level
}

Lihat antarmuka DefaultTheme.Config untuk detail tentang menyesuaikan teks placeholder tema default. Jangan menimpa themeConfig.algolia atau themeConfig.carbonAds di tingkat locale. Lihat dokumentasi Algolia untuk menggunakan pencarian multibahasa.

Pro tip: File konfigurasi juga dapat disimpan di docs/.vitepress/config/index.ts. Ini dapat membantu Anda mengatur dengan membuat file konfigurasi per locale lalu menggabungkan dan mengekspornya dari index.ts.

Direktori terpisah untuk setiap locale

Berikut adalah struktur yang sempurna:

docs/
├─ en/
│  ├─ foo.md
├─ es/
│  ├─ foo.md
├─ fr/
   ├─ foo.md

Namun, VitePress tidak akan mengalihkan / ke /en/ secara default. Anda perlu mengonfigurasi server Anda untuk itu. Misalnya, di Netlify, Anda dapat menambahkan file docs/public/_redirects seperti ini:

/*  /es/:splat  302  Language=es
/*  /fr/:splat  302  Language=fr
/*  /en/:splat  302

Pro tip: Jika menggunakan pendekatan di atas, Anda dapat menggunakan cookie nf_lang untuk menyimpan pilihan bahasa pengguna:

docs/.vitepress/theme/index.ts

import DefaultTheme from 'vitepress/theme'
import Layout from './Layout.vue'

export default {
  extends: DefaultTheme,
  Layout
}

docs/.vitepress/theme/Layout.vue

<script setup lang="ts">
import DefaultTheme from 'vitepress/theme'
import { useData, inBrowser } from 'vitepress'
import { watchEffect } from 'vue'

const { lang } = useData()
watchEffect(() => {
  if (inBrowser) {
    document.cookie = `nf_lang=${lang.value}; expires=Mon, 1 Jan 2030 00:00:00 UTC; path=/`
  }
})
</script>

<template>
  <DefaultTheme.Layout />
</template>

Dukungan RTL (Eksperimental)

Untuk dukungan RTL, tentukan dir: 'rtl' di konfigurasi dan gunakan beberapa plugin RTLCSS PostCSS seperti https://github.com/MohammadYounes/rtlcss, https://github.com/vkalinichev/postcss-rtl atau https://github.com/elchininet/postcss-rtlcss. Anda perlu mengonfigurasi plugin PostCSS Anda untuk menggunakan :where([dir="ltr"]) dan :where([dir="rtl"]) sebagai prefix untuk mencegah masalah CSS specificity.