Terjemahkan situs web Vite dan Vue Anda menggunakan Intlayer | Internasionalisasi (i18n)

Daftar Isi

Apa itu Intlayer?

Intlayer adalah pustaka internasionalisasi (i18n) open-source yang inovatif, dirancang untuk menyederhanakan dukungan multibahasa dalam aplikasi web modern.

Dengan Intlayer, Anda dapat:

• Mengelola terjemahan dengan mudah menggunakan kamus deklaratif di tingkat komponen.
• Melokalkan metadata, rute, dan konten secara dinamis.
• Memastikan dukungan TypeScript dengan tipe yang dihasilkan secara otomatis, meningkatkan autocompletion dan deteksi kesalahan.
• Memanfaatkan fitur canggih, seperti deteksi dan pergantian locale secara dinamis.

Panduan Langkah demi Langkah untuk Mengatur Intlayer dalam Aplikasi Vite dan Vue

Lihat Template Aplikasi di GitHub.

Langkah 1: Instalasi Dependensi

Instal paket yang diperlukan menggunakan npm:

npm install intlayer vue-intlayernpm install vite-intlayer --save-devnpx intlayer init

• intlayer

  Paket inti yang menyediakan alat internasionalisasi untuk manajemen konfigurasi, terjemahan, deklarasi konten, transpile, dan perintah CLI.

• vue-intlayer Paket yang mengintegrasikan Intlayer dengan aplikasi Vue. Paket ini menyediakan context providers dan composables untuk internasionalisasi Vue.

• vite-intlayer Termasuk plugin Vite untuk mengintegrasikan Intlayer dengan Vite bundler, serta middleware untuk mendeteksi locale yang dipilih pengguna, mengelola cookie, dan menangani pengalihan URL.

Langkah 2: Konfigurasi proyek Anda

Buat file konfigurasi untuk mengatur bahasa aplikasi Anda:

import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [
      Locales.ENGLISH,
      Locales.FRENCH,
      Locales.SPANISH,
      // Bahasa lain milik Anda
    ],
    defaultLocale: Locales.ENGLISH,
  },
};

export default config;

Melalui file konfigurasi ini, Anda dapat mengatur URL yang dilokalkan, pengalihan middleware, nama cookie, lokasi dan ekstensi deklarasi konten Anda, menonaktifkan log Intlayer di konsol, dan lainnya. Untuk daftar lengkap parameter yang tersedia, lihat dokumentasi konfigurasi.

Langkah 3: Integrasikan Intlayer dalam Konfigurasi Vite Anda

Tambahkan plugin intlayer ke dalam konfigurasi Anda.

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { intlayer } from "vite-intlayer";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), intlayer()],
});

Plugin Vite intlayer() digunakan untuk mengintegrasikan Intlayer dengan Vite. Plugin ini memastikan pembuatan file deklarasi konten dan memantau file tersebut dalam mode pengembangan. Plugin ini juga mendefinisikan variabel lingkungan Intlayer dalam aplikasi Vite. Selain itu, plugin ini menyediakan alias untuk mengoptimalkan performa.

Langkah 4: Deklarasikan Konten Anda

Buat dan kelola deklarasi konten Anda untuk menyimpan terjemahan:

import { t, type Dictionary } from "intlayer";

const helloWorldContent = {
  key: "helloworld",
  content: {
    count: t({ en: "count is ", fr: "le compte est ", es: "el recuento es " }),
    edit: t({
      en: "Edit <code>components/HelloWorld.vue</code> and save to test HMR",
      fr: "Éditez <code>components/HelloWorld.vue</code> et enregistrez pour tester HMR",
      es: "Edita <code>components/HelloWorld.vue</code> y guarda para probar HMR",
    }),
    checkOut: t({
      en: "Check out ",
      id: "Periksa ",
      fr: "Vérifiez ",
      es: "Compruebe ",
    }),
    officialStarter: t({
      en: ", the official Vue + Vite starter",
      id: ", starter resmi Vue + Vite",
      fr: ", le starter officiel Vue + Vite",
      es: ", el starter oficial Vue + Vite",
    }),
    learnMore: t({
      en: "Learn more about IDE Support for Vue in the ",
      id: "Pelajari lebih lanjut tentang Dukungan IDE untuk Vue di ",
      fr: "En savoir plus sur le support IDE pour Vue dans le ",
      es: "Aprenda más sobre el soporte IDE para Vue en el ",
    }),
    vueDocs: t({
      en: "Vue Docs Scaling up Guide",
      id: "Panduan Peningkatan Skala Dokumentasi Vue",
      fr: "Vue Docs Scaling up Guide",
      es: "Vue Docs Scaling up Guide",
    }),
    readTheDocs: t({
      en: "Click on the Vite and Vue logos to learn more",
      id: "Klik pada logo Vite dan Vue untuk mempelajari lebih lanjut",
      fr: "Cliquez sur les logos Vite et Vue pour en savoir plus",
      es: "Haga clic en los logotipos de Vite y Vue para obtener más información",
    }),
  },
} satisfies Dictionary;

export default helloWorldContent;

Deklarasi konten Anda dapat didefinisikan di mana saja dalam aplikasi Anda selama sudah dimasukkan ke dalam direktori contentDir (secara default, ./src). Dan sesuai dengan ekstensi file deklarasi konten (secara default, .content.{json,ts,tsx,js,jsx,mjs,cjs}).

Untuk detail lebih lanjut, lihat dokumentasi deklarasi konten.

Langkah 5: Gunakan Intlayer dalam Kode Anda

Untuk memanfaatkan fitur internasionalisasi Intlayer di seluruh aplikasi Vue Anda, pertama-tama Anda perlu mendaftarkan instance singleton Intlayer di file utama Anda. Langkah ini sangat penting karena menyediakan konteks internasionalisasi ke semua komponen dalam aplikasi Anda, sehingga terjemahan dapat diakses di mana saja dalam pohon komponen Anda.

import { createApp } from "vue";import { intlayer } from "vue-intlayer";import App from "./App.vue";import "./style.css";const app = createApp(App);// Menyuntikkan provider di tingkat atasapp.use(intlayer);// Memasang aplikasiapp.mount("#app");

Akses kamus konten Anda di seluruh aplikasi dengan membuat komponen Vue utama dan menggunakan composable useIntlayer:

<script setup lang="ts">import { ref } from "vue";import { useIntlayer } from "vue-intlayer";defineProps({  msg: String,});const {  count,  edit,  checkOut,  officialStarter,  learnMore,  vueDocs,  readTheDocs,} = useIntlayer("helloworld");const countRef = ref(0);</script><template>  <h1>{{ msg }}</h1>  <div class="card">    <button type="button" @click="countRef++">      <count />      {{ countRef }}    </button>    <p v-html="edit"></p>  </div>  <p>    <checkOut />    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"      >create-vue</a    >, <officialStarter />  </p>  <p>    <learnMore />    <a      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"      target="_blank"      ><vueDocs /></a    >.  </p>  <p class="read-the-docs"><readTheDocs /></p>  <p class="read-the-docs">{{ readTheDocs }}</p></template>

Mengakses Konten di Intlayer

Intlayer menawarkan berbagai API untuk mengakses konten Anda:

• Sintaks berbasis Komponen (direkomendasikan): Gunakan sintaks <myContent />, atau <Component :is="myContent" /> untuk merender konten sebagai Node Intlayer. Ini terintegrasi dengan mulus dengan Visual Editor dan CMS.

• Sintaks berbasis String: Gunakan {{ myContent }} untuk merender konten sebagai teks biasa, tanpa dukungan Visual Editor.

• Sintaks HTML mentah: Gunakan <div v-html="myContent" /> untuk merender konten sebagai HTML mentah, tanpa dukungan Visual Editor.

• Sintaks destrukturisasi:
  Composable useIntlayer mengembalikan sebuah Proxy dengan konten. Proxy ini dapat didestrukturisasi untuk mengakses konten sambil mempertahankan reaktivitas.

  • Gunakan const content = useIntlayer("myContent"); dan {{ content.myContent }} / <content.myContent />.
  • Atau gunakan const { myContent } = useIntlayer("myContent"); dan {{ myContent }} / <myContent/> untuk mendestrukturisasi konten.

Jika aplikasi Anda sudah ada, Anda dapat menggunakan Intlayer Compiler secara kombinasi dengan perintah extract untuk mengonversi ribuan komponen dalam satu detik.

(Opsional) Langkah 6: Ubah bahasa konten Anda

Untuk mengubah bahasa konten Anda, Anda dapat menggunakan fungsi setLocale yang disediakan oleh composable useLocale. Fungsi ini memungkinkan Anda untuk mengatur locale aplikasi dan memperbarui konten sesuai dengan locale tersebut.

Buat sebuah komponen untuk beralih antar bahasa:

<template>  <div class="locale-switcher">    <select v-model="selectedLocale" @change="changeLocale">      <option v-for="loc in availableLocales" :key="loc" :value="loc">        {{ getLocaleName(loc) }}      </option>    </select>  </div></template><script setup lang="ts">import { ref, watch } from "vue";import { getLocaleName } from "intlayer";import { useLocale } from "vue-intlayer";// Mendapatkan informasi locale dan fungsi setLocaleconst { locale, availableLocales, setLocale } = useLocale();// Melacak locale yang dipilih dengan refconst selectedLocale = ref(locale.value);// Memperbarui locale saat pilihan berubahconst changeLocale = () => setLocale(selectedLocale.value);// Menjaga selectedLocale agar tetap sinkron dengan locale globalwatch(  () => locale.value,  (newLocale) => {    selectedLocale.value = newLocale;  });</script>

Kemudian, gunakan komponen ini di App.vue Anda:

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";import HelloWorld from "@components/HelloWorld.vue";import LocaleSwitcher from "@components/LocaleSwitcher.vue";import { ref, watch } from "vue";const content = useIntlayer("app"); // Buat file deklarasi intlayer terkait</script><template>  <div>    <LocaleSwitcher />    <a href="https://vite.dev" target="_blank">      <img src="/vite.svg" class="logo" :alt="content.viteLogo" />    </a>    <a href="https://vuejs.org/" target="_blank">      <img src="./assets/vue.svg" class="logo vue" :alt="content.vueLogo" />    </a>  </div>  <HelloWorld :msg="content.title" /></template>

(Opsional) Langkah 7: Tambahkan Routing yang Dilokalkan ke aplikasi Anda

Menambahkan routing yang dilokalkan dalam aplikasi Vue biasanya melibatkan penggunaan Vue Router dengan prefix locale. Ini membuat rute unik untuk setiap bahasa, yang berguna untuk SEO dan URL yang ramah SEO.

Contoh:

- https://example.com/about- https://example.com/es/about- https://example.com/fr/about

Pertama, instal Vue Router:

npm install vue-routernpx intlayer init

Lalu, buat konfigurasi router yang menangani routing berbasis locale:

import {  localeFlatMap,  type Locale,} from 'intlayer';import { createIntlayerClient } from "vue-intlayer";import { createRouter, createWebHistory } from 'vue-router';import HomeView from './views/home/HomeView.vue';import RootView from './views/root/Root.vue';/** * Mendeklarasikan routes dengan path dan metadata spesifik locale. */const routes = localeFlatMap(({ urlPrefix, locale }) => [  {    path: `${urlPrefix}/`,    name: `Root-${locale}`,    component: RootView,    meta: {      locale,    },  },  {    path: `${urlPrefix}/home`,    name: `Home-${locale}`,    component: HomeView,    meta: {      locale,    },  },]);// Buat instance routerexport const router = createRouter({  history: createWebHistory(),  routes,});// Tambahkan guard navigasi untuk penanganan localerouter.beforeEach((to, _from, next) => {  const client = createIntlayerClient();  const metaLocale = to.meta.locale as Locale;  // Gunakan kembali locale yang didefinisikan di meta route  client.setLocale(metaLocale);  next();});

Nama digunakan untuk mengidentifikasi route dalam router. Nama ini harus unik di seluruh route untuk menghindari konflik dan memastikan navigasi serta linking yang tepat.

Kemudian, daftarkan router di file main.js Anda:

import { createApp } from "vue";import App from "./App.vue";import { router } from "./router";import "./style.css";const app = createApp(App);// Tambahkan router ke aplikasiapp.use(router);// Pasang aplikasiapp.mount("#app");

Kemudian perbarui file App.vue Anda untuk merender komponen RouterView. Komponen ini akan menampilkan komponen yang cocok untuk rute saat ini.

<script setup lang="ts">import LocaleSwitcher from "@components/LocaleSwitcher.vue";</script><template>  <nav>    <LocaleSwitcher />  </nav>  <RouterView /></template>

Secara paralel, Anda juga dapat menggunakan intlayerProxy untuk menambahkan routing sisi server ke aplikasi Anda. Plugin ini secara otomatis akan mendeteksi locale saat ini berdasarkan URL dan mengatur cookie locale yang sesuai. Jika tidak ada locale yang ditentukan, plugin akan menentukan locale yang paling tepat berdasarkan preferensi bahasa browser pengguna. Jika tidak ada locale yang terdeteksi, maka akan mengarahkan ulang ke locale default.

Perlu dicatat bahwa untuk menggunakan intlayerProxy dalam produksi, Anda perlu memindahkan paket vite-intlayer dari devDependencies ke dependencies.

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { intlayer, intlayerProxy } from "vite-intlayer";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    intlayerProxy(), // should be placed first
    vue(),
    intlayer(),
  ],
});

(Opsional) Langkah 8: Ubah URL saat locale berubah

Untuk secara otomatis memperbarui URL ketika pengguna mengganti bahasa, Anda dapat memodifikasi komponen LocaleSwitcher untuk menggunakan Vue Router:

<template>  <div class="locale-switcher">    <select v-model="selectedLocale" @change="changeLocale">      <option v-for="loc in availableLocales" :key="loc" :value="loc">        {{ getLocaleName(loc) }}      </option>    </select>  </div></template><script setup lang="ts">import { ref, watch } from "vue";import { useRouter } from "vue-router";import { Locales, getLocaleName, getLocalizedUrl } from "intlayer";import { useLocale } from "vue-intlayer";// Mendapatkan Vue Routerconst router = useRouter();// Mendapatkan informasi locale dan fungsi setLocaleconst { locale, availableLocales, setLocale } = useLocale({  onLocaleChange: (newLocale) => {    // Mendapatkan rute saat ini dan membuat URL yang dilokalkan    const currentPath = router.currentRoute.value.fullPath;    const localizedPath = getLocalizedUrl(currentPath, newLocale);    // Navigasi ke rute yang dilokalkan tanpa memuat ulang halaman    router.push(localizedPath);  },});// Melacak locale yang dipilih dengan refconst selectedLocale = ref(locale.value);// Memperbarui locale saat pilihan berubahconst changeLocale = () => {  setLocale(selectedLocale.value);};// Menjaga selectedLocale tetap sinkron dengan locale globalwatch(  () => locale.value,  (newLocale) => {    selectedLocale.value = newLocale;  });</script>

Tip: Untuk SEO dan aksesibilitas yang lebih baik, gunakan tag seperti <a href="/fr/home" hreflang="fr"> untuk menautkan ke halaman yang dilokalkan, seperti yang ditunjukkan pada Langkah 10. Ini memungkinkan mesin pencari menemukan dan mengindeks URL spesifik bahasa dengan benar. Untuk mempertahankan perilaku SPA, Anda dapat mencegah navigasi default dengan @click.prevent, mengubah locale menggunakan useLocale, dan menavigasi secara programatik menggunakan Vue Router.

<ol>  <li>    <a      hreflang="x-default"      aria-label="Beralih ke Bahasa Inggris"      target="_self"      aria-current="page"      href="/doc/get-started"    >      <div>        <span dir="ltr" lang="en">English</span>        <span>Bahasa Inggris</span>        <span>EN</span>      </div>    </a>  </li>  <li>    <a      hreflang="es"      aria-label="Beralih ke Bahasa Spanyol"      target="_self"      href="/es/doc/get-started"    >      <div>        <span dir="ltr" lang="es">Español</span>        <span>Bahasa Spanyol</span>        <span>ES</span>      </div>    </a>  </li></ol>

(Opsional) Langkah 9: Ganti Atribut Bahasa dan Arah pada Tag HTML

Ketika aplikasi Anda mendukung beberapa bahasa, sangat penting untuk memperbarui atribut lang dan dir pada tag <html> agar sesuai dengan locale saat ini. Melakukan hal ini memastikan:

• Aksesibilitas: Pembaca layar dan teknologi bantu bergantung pada atribut lang yang benar untuk mengucapkan dan menginterpretasikan konten dengan akurat.
• Perenderan Teks: Atribut dir (arah) memastikan teks dirender dalam urutan yang tepat (misalnya, kiri-ke-kanan untuk bahasa Inggris, kanan-ke-kiri untuk bahasa Arab atau Ibrani), yang sangat penting untuk keterbacaan.
• SEO: Mesin pencari menggunakan atribut lang untuk menentukan bahasa halaman Anda, membantu menyajikan konten lokal yang tepat dalam hasil pencarian.

Dengan memperbarui atribut ini secara dinamis saat locale berubah, Anda menjamin pengalaman yang konsisten dan dapat diakses bagi pengguna di semua bahasa yang didukung.

import { watch } from "vue";import { useLocale } from "vue-intlayer";import { getHTMLTextDir } from "intlayer";/** * Composable yang memperbarui atribut `lang` dan `dir` elemen HTML <html> * berdasarkan locale saat ini. * * @example * // Di App.vue Anda atau komponen global * import { useI18nHTMLAttributes } from './composables/useI18nHTMLAttributes' * * useI18nHTMLAttributes() */export const useI18nHTMLAttributes = () => {  const { locale } = useLocale();  // Memperbarui atribut HTML setiap kali locale berubah  watch(    () => locale.value,    (newLocale) => {      if (!newLocale) return;      // Perbarui atribut bahasa      document.documentElement.lang = newLocale;      // Atur arah teks (ltr untuk sebagian besar bahasa, rtl untuk Arab, Ibrani, dll.)      document.documentElement.dir = getHTMLTextDir(newLocale);    },    { immediate: true }  );};

Gunakan composable ini di App.vue Anda atau komponen global:

<script setup lang="ts">import { useI18nHTMLAttributes } from "@composables/useI18nHTMLAttributes";// Terapkan atribut HTML berdasarkan locale saat iniuseI18nHTMLAttributes();</script><template>  <!-- Template aplikasi Anda --></template>

(Opsional) Langkah 10: Membuat Komponen Link yang Dilokalkan

Untuk memastikan navigasi aplikasi Anda menghormati locale saat ini, Anda dapat membuat komponen Link kustom. Komponen ini secara otomatis menambahkan prefix bahasa saat ini pada URL internal, sehingga. Misalnya, ketika pengguna berbahasa Prancis mengklik tautan ke halaman "About", mereka akan diarahkan ke /fr/about alih-alih /about.

Perilaku ini berguna untuk beberapa alasan:

• SEO dan Pengalaman Pengguna: URL yang dilokalkan membantu mesin pencari mengindeks halaman spesifik bahasa dengan benar dan menyediakan konten kepada pengguna dalam bahasa pilihan mereka.
• Konsistensi: Dengan menggunakan tautan yang dilokalkan di seluruh aplikasi Anda, Anda menjamin navigasi tetap dalam locale saat ini, mencegah perubahan bahasa yang tidak diinginkan.
• Maintainability: Memusatkan logika lokalisasi dalam satu komponen menyederhanakan pengelolaan URL, sehingga codebase Anda lebih mudah dipelihara dan dikembangkan seiring pertumbuhan aplikasi Anda.

<template>  <a :href="localizedHref" v-bind="$attrs">    <slot />  </a></template><script setup lang="ts">import { computed } from "vue";import { getLocalizedUrl } from "intlayer";import { useLocale } from "vue-intlayer";const props = defineProps({  href: {    type: String,    required: true,  },});const { locale } = useLocale();// Periksa apakah link bersifat eksternalconst isExternalLink = computed(() => /^https?:\/\//.test(props.href || ""));// Buat href yang dilokalisasi untuk link internalconst localizedHref = computed(() =>  isExternalLink.value ? props.href : getLocalizedUrl(props.href, locale.value));</script>

Untuk digunakan dengan Vue Router, buat versi khusus router:

<template>  <router-link :to="localizedTo" v-bind="$attrs">    <slot />  </router-link></template><script setup lang="ts">import { computed } from "vue";import { getLocalizedUrl } from "intlayer";import { useLocale } from "vue-intlayer";const props = defineProps({  to: {    type: [String, Object],    required: true,  },});const { locale } = useLocale();// Membuat properti to yang sudah dilokalkan untuk router-linkconst localizedTo = computed(() => {  if (typeof props.to === "string") {    return getLocalizedUrl(props.to, locale.value);  } else {    // Jika 'to' adalah objek, lokalisa properti path    return {      ...props.to,      path: getLocalizedUrl(props.to.path ?? "/", locale.value),    };  }});</script>

Gunakan komponen-komponen ini dalam aplikasi Anda:

<template>  <div>    <!-- Vue router  -->    <RouterLink to="/">Root</RouterLink>    <RouterLink to="/home">Home</RouterLink>    <!-- Lainnya -->    <Link href="/">Root</Link>    <Link href="/home">Home</Link>  </div></template><script setup lang="ts">import Link from "@components/Link.vue";import RouterLink from "@components/RouterLink.vue";</script>

(Opsional) Langkah 11: Render Markdown

Intlayer mendukung rendering konten Markdown langsung di aplikasi Vue Anda. Secara default, Markdown diperlakukan sebagai teks biasa. Untuk mengubah Markdown menjadi HTML kaya, Anda dapat mengintegrasikan markdown-it, sebuah parser Markdown.

Ini sangat berguna ketika terjemahan Anda mencakup konten yang diformat seperti daftar, tautan, atau penekanan.

Secara default Intlayer merender markdown sebagai string. Namun Intlayer juga menyediakan cara untuk merender markdown menjadi HTML menggunakan fungsi installIntlayerMarkdown.

Untuk melihat cara mendeklarasikan konten markdown menggunakan paket intlayer, lihat dokumen markdown.

import MarkdownIt from "markdown-it";import { createApp, h } from "vue";import { installIntlayer, installIntlayerMarkdown } from "vue-intlayer";const app = createApp(App);app.use(intlayer);const md = new MarkdownIt({  html: true, // mengizinkan tag HTML  linkify: true, // otomatis membuat tautan URL  typographer: true, // mengaktifkan tanda kutip pintar, tanda hubung, dll.});// Beritahu Intlayer untuk menggunakan md.render() setiap kali perlu mengubah markdown menjadi HTMLinstallIntlayerMarkdown(app, (markdown) => {  const html = md.render(markdown);  return h("div", { innerHTML: html });});

Setelah terdaftar, Anda dapat menggunakan sintaks berbasis komponen untuk menampilkan konten Markdown secara langsung:

<template>  <div>    <myMarkdownContent />  </div></template><script setup lang="ts">import { useIntlayer } from "vue-intlayer";const { myMarkdownContent } = useIntlayer("my-component");</script>

Konfigurasi TypeScript

Intlayer menggunakan module augmentation untuk mendapatkan manfaat dari TypeScript dan membuat codebase Anda lebih kuat.

Pastikan konfigurasi TypeScript Anda menyertakan tipe yang dihasilkan secara otomatis.

{  // ... Konfigurasi TypeScript Anda yang sudah ada  "include": [    // ... Konfigurasi TypeScript Anda yang sudah ada    ".intlayer/**/*.ts", // Sertakan tipe yang dihasilkan secara otomatis  ],}

Konfigurasi Git

Disarankan untuk mengabaikan file-file yang dihasilkan oleh Intlayer. Ini memungkinkan Anda untuk menghindari meng-commit file tersebut ke repository Git Anda.

Untuk melakukan ini, Anda dapat menambahkan instruksi berikut ke dalam file .gitignore Anda:

#  Abaikan file yang dihasilkan oleh Intlayer.intlayer

Ekstensi VS Code

Untuk meningkatkan pengalaman pengembangan Anda dengan Intlayer, Anda dapat menginstal Ekstensi Intlayer VS Code resmi.

Pasang dari VS Code Marketplace

Ekstensi ini menyediakan:

• Autocompletion untuk kunci terjemahan.
• Deteksi kesalahan secara real-time untuk terjemahan yang hilang.
• Pratinjau inline dari konten terjemahan.
• Aksi cepat untuk dengan mudah membuat dan memperbarui terjemahan.

Untuk informasi lebih lanjut tentang cara menggunakan ekstensi ini, lihat dokumentasi Intlayer VS Code Extension.

(Opsional) Langkah 1 : Ekstrak konten komponen Anda

Jika Anda memiliki basis kode yang ada, mengubah ribuan file bisa memakan waktu lama.

Untuk memudahkan proses ini, Intlayer mengusulkan compiler / extractor untuk mengubah komponen Anda dan mengekstrak kontennya.

Untuk mengaturnya, Anda dapat menambahkan bagian compiler di file intlayer.config.ts Anda:

import { type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  // ... Sisa konfigurasi Anda
  compiler: {
    /**
     * Menunjukkan apakah compiler harus diaktifkan.
     */
    enabled: true,

    /**
     * Menentukan jalur file output
     */
    output: ({ fileName, extension }) => `./${fileName}${extension}`,

    /**
     * Menunjukkan apakah komponen harus disimpan setelah diubah. Dengan begitu, compiler dapat dijalankan satu kali saja untuk mengubah aplikasi, lalu dapat dihapus.
     */
    saveComponents: false,

    /**
     * Prefiks kunci kamus
     */
    dictionaryKeyPrefix: "",
  },
};

export default config;

npx intlayer extract

import { defineConfig } from "vite";import { intlayer, intlayerCompiler } from "vite-intlayer";export default defineConfig({ plugins: [   intlayer(),   intlayerCompiler(), // Menambahkan plugin compiler ],});

npm run build # Atau npm run dev

(Opsional) Sitemap dan robots.txt (generate saat build)

Intlayer menyediakan generateSitemap dan getMultilingualUrls untuk memformat sitemap.xml multibahasa dan robots.txt yang siap untuk crawler, lalu menulisnya secara otomatis ke public/. Biasanya skrip Node kecil dijalankan sebelum Vite (misalnya hook npm predev / prebuild).

Sitemap

Generator sitemap Intlayer menghormati konfigurasi locale dan menambahkan metadata untuk crawler.

Sitemap mendukung namespace xhtml:link (hreflang). Alih-alih hanya daftar URL datar, Intlayer menghubungkan semua varian bahasa setiap halaman secara dua arah (mis. /about, /fr/about, atau /about?lang=fr tergantung mode routing).

Robots.txt

Gunakan getMultilingualUrls agar aturan Disallow mencakup semua varian URL jalur sensitif.

1. Buat generate-seo.mjs di root proyek

import fs from "fs";import path from "path";import { fileURLToPath } from "url";import { generateSitemap, getMultilingualUrls } from "intlayer";const __dirname = path.dirname(fileURLToPath(import.meta.url));const SITE_URL = (process.env.SITE_URL || "http://localhost:5173").replace(  /\/$/,  "");const pathList = [  { path: "/", changefreq: "daily", priority: 1.0 },  { path: "/about", changefreq: "monthly", priority: 0.7 },];const sitemapXml = generateSitemap(pathList, { siteUrl: SITE_URL });fs.writeFileSync(path.join(__dirname, "public", "sitemap.xml"), sitemapXml);const getAllMultilingualUrls = (urls) =>  urls.flatMap((url) => Object.values(getMultilingualUrls(url)));const disallowedPaths = getAllMultilingualUrls(["/admin", "/private"]);const robotsTxt = [  "User-agent: *",  "Allow: /",  ...disallowedPaths.map((path) => `Disallow: ${path}`),  "",  `Sitemap: ${SITE_URL}/sitemap.xml`,].join("\n");fs.writeFileSync(path.join(__dirname, "public", "robots.txt"), robotsTxt);console.log("SEO files generated successfully.");

Paket intlayer harus terpasang. Setel SITE_URL di lingkungan produksi (misalnya di CI).

Disarankan generate-seo.mjs untuk ESM Node. Jika memakai generate-seo.js, pastikan "type": "module" di package.json atau aktifkan ESM lainnya.

2. Jalankan skrip sebelum Vite

{  "scripts": {    "dev": "vite",    "prebuild": "node generate-seo.mjs",    "build": "vite build",    "preview": "vite preview"  }}

Sesuaikan perintah jika memakai pnpm atau yarn. Skrip juga bisa dipanggil dari CI.

Melangkah Lebih Jauh

Untuk melangkah lebih jauh, Anda dapat mengimplementasikan editor visual atau mengeksternalisasi konten Anda menggunakan CMS.