Dibuat:2024-03-07Terakhir diperbarui:2026-05-06

Lihat template aplikasi di GitHub

Halaman ini memiliki template aplikasi yang tersedia.

Lihat aplikasi showcase

Halaman ini menautkan ke demo langsung template.

Referensikan dokumen ini ke asisten AI favorit Anda

ChatGPT

Claude

DeepSeek

Google AI mode Gemini

Perplexity Mistral

Grok

Ajukan pertanyaan Anda dan dapatkan ringkasan dokumen dengan merujuk halaman ini dan penyedia AI pilihan Anda

Riwayat Versi

"Perbarui penggunaan API useIntlayer Solid ke akses properti langsung"
v8.9.04/5/2026
"Menambahkan perintah init"
v7.5.930/12/2025
"Pembaruan integrasi Astro, konfigurasi, dan penggunaan"
v6.2.03/10/2025

Konten halaman ini diterjemahkan menggunakan AI.

Lihat versi terakhir dari konten aslinya dalam bahasa Inggris

Sunting dokumen ini

Jika Anda memiliki ide untuk meningkatkan dokumentasi ini, silakan berkontribusi dengan mengajukan pull request di GitHub.

Tautan GitHub ke dokumentasi

Salin

Salin Markdown dokumentasi ke clipboard

Terjemahkan Situs Astro Anda dengan Intlayer | Internasionalisasi (i18n)

Name: Intlayer
Author: Intlayer

ide.intlayer.org

Daftar Isi

Apa itu Intlayer?

Intlayer adalah pustaka internasionalisasi (i18n) sumber terbuka yang inovatif yang 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 dibuat secara otomatis untuk pelengkapan otomatis dan deteksi kesalahan yang lebih baik.
Memanfaatkan fitur-fitur canggih: Seperti deteksi bahasa dinamis dan peralihan bahasa.

Panduan Langkah-demi-Langkah untuk Mengonfigurasi Intlayer di Astro

Lihat templat aplikasi di GitHub.

Langkah 1: Instal Dependensi

Instal paket yang diperlukan menggunakan manajer paket pilihan Anda:

bash

Salin kode

Salin kode ke clipboard

npm install intlayer astro-intlayer# opsional: jika Anda ingin menambahkan dukungan island Reactnpm install react react-dom react-intlayer @astrojs/react

intlayer Paket inti yang menyediakan alat i18n untuk manajemen konfigurasi, terjemahan, deklarasi konten, transpilasi, dan perintah CLI.
astro-intlayer Plugin integrasi Astro untuk menghubungkan Intlayer dengan bundler Vite; juga mencakup middleware untuk mendeteksi bahasa pilihan pengguna, mengelola cookie, dan menangani pengalihan URL.

Langkah 2: Konfigurasikan Proyek Anda

Buat file konfigurasi untuk menentukan bahasa aplikasi Anda:

intlayer.config.ts

Salin kode

Salin kode ke clipboard

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [      Locales.ENGLISH,      Locales.FRENCH,      Locales.SPANISH,      Locales.INDONESIAN,      // Bahasa Anda yang lain    ],    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, menonaktifkan log Intlayer di konsol, dan banyak lagi. Untuk daftar lengkap parameter yang tersedia, lihat dokumentasi konfigurasi.

Langkah 3: Integrasikan Intlayer ke dalam konfigurasi Astro Anda

Tambahkan plugin intlayer ke konfigurasi Astro Anda.

astro.config.ts

Salin kode

Salin kode ke clipboard

// @ts-checkimport { intlayer } from "astro-intlayer";import { defineConfig } from "astro/config";// https://astro.build/configexport default defineConfig({  integrations: [intlayer()],});

Plugin integrasi intlayer() digunakan untuk mengintegrasikan Intlayer dengan Astro. Plugin ini memastikan pembuatan file deklarasi konten dan memantaunya dalam mode pengembangan. Plugin ini mendefinisikan variabel lingkungan Intlayer di dalam aplikasi Astro dan menyediakan alias untuk mengoptimalkan kinerja.

Langkah 4: Deklarasikan Konten Anda

Buat dan kelola deklarasi konten Anda untuk menyimpan terjemahan:

src/app.content.tsx

Salin kode

Salin kode ke clipboard

import { t, type Dictionary } from "intlayer";import type { ReactNode } from "react";const appContent = {  key: "app",  content: {    title: t({      en: "Hello World",      fr: "Bonjour le monde",      es: "Hola mundo",      id: "Halo Dunia",    }),  },} satisfies Dictionary;export default appContent;

Deklarasi konten dapat didefinisikan di mana saja dalam aplikasi Anda, asalkan disertakan dalam contentDir (secara default ./src) dan cocok dengan ekstensi file deklarasi konten (secara default .content.{json,ts,tsx,js,jsx,mjs,cjs}).

Untuk informasi selengkapnya, lihat dokumentasi deklarasi konten.

Langkah 5: Menggunakan Konten di Astro

Anda dapat mengonsumsi kamus langsung di file .astro menggunakan pembantu inti yang diekspor dari intlayer.

src/pages/index.astro

Salin kode

Salin kode ke clipboard

---import {  getIntlayer,  getLocaleFromPath,  getLocalizedUrl,  defaultLocale,  localeMap,  getHTMLTextDir,  type LocalesValues,} from "intlayer";import LocaleSwitcher from "../components/LocaleSwitcher.astro";// Get the current locale from the URL (e.g. /es/about -> 'es')const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;// Get the content for the 'app' dictionaryconst { title } = getIntlayer("app", locale);---<!doctype html><html lang={locale} dir={getHTMLTextDir(locale)}>  <head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width" />    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />    <title>{title}</title>    <!-- Canonical link: Tells search engines which is the primary version of this page -->    <link      rel="canonical"      href={new URL(getLocalizedUrl(Astro.url.pathname, locale), Astro.site)}    />    <!-- Hreflang: Tell Google about all localized versions -->    {      localeMap(({ locale: mapLocale }) => (        <link          rel="alternate"          hreflang={mapLocale}          href={new URL(            getLocalizedUrl(Astro.url.pathname, mapLocale),            Astro.site          )}        />      ))    }    <!-- x-default: Fallback for users in unmatched languages -->    <link      rel="alternate"      hreflang="x-default"      href={new URL(        getLocalizedUrl(Astro.url.pathname, defaultLocale),        Astro.site      )}    />  </head>  <body>    <header>      <LocaleSwitcher />    </header>    <main>      <h1>{title}</h1>    </main>  </body></html>

Langkah 6: Perutean yang Dilokalkan

Buat segmen rute dinamis (misalnya, src/pages/[locale]/index.astro) untuk melayani halaman yang dilokalkan:

src/pages/[locale]/index.astro

Salin kode

Salin kode ke clipboard

---import { getIntlayer } from "intlayer";const { title } = getIntlayer('app');---<h1>{title}</h1>

Integrasi Astro menambahkan middleware Vite yang membantu perutean yang sadar bahasa dan definisi lingkungan selama pengembangan. Anda juga dapat menggunakan logika Anda sendiri atau alat intlayer seperti getLocalizedUrl untuk menautkan lintas bahasa.

Langkah 7: Terus Gunakan Framework Favorit Anda

Lanjutkan membangun aplikasi Anda menggunakan framework pilihan Anda.

Intlayer + React: Intlayer dengan React
Intlayer + Vue: Intlayer dengan Vue
Intlayer + Svelte: Intlayer dengan Svelte
Intlayer + Solid: Intlayer dengan Solid
Intlayer + Preact: Intlayer dengan Preact

Konfigurasi TypeScript

Intlayer menggunakan augmentasi modul (module augmentation) untuk memanfaatkan TypeScript, membuat basis kode Anda lebih kuat.

Autocompletion

Translation Error

Pastikan konfigurasi TypeScript Anda menyertakan tipe yang dibuat secara otomatis.

tsconfig.json

Salin kode

Salin kode ke clipboard

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

Konfigurasi Git

Disarankan untuk mengabaikan file yang dihasilkan oleh Intlayer. Ini mencegah file tersebut di-commit ke repositori Git Anda.

Untuk melakukannya, tambahkan instruksi berikut ke file .gitignore Anda:

bash

Salin kode

Salin kode ke clipboard

# Abaikan file yang dihasilkan oleh Intlayer.intlayer

Ekstensi VS Code

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

Instalasi dari VS Code Marketplace

Ekstensi ini menyediakan:

Autocompletion untuk kunci terjemahan.
Deteksi kesalahan waktu nyata untuk terjemahan yang hilang.
Pratinjau inline untuk konten yang diterjemahkan.
Tindakan cepat untuk membuat dan memperbarui terjemahan dengan mudah.

Untuk informasi selengkapnya tentang cara menggunakan ekstensi, lihat dokumentasi ekstensi VS Code.

(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:

intlayer.config.ts

Salin kode

Salin kode ke clipboard

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;

Jalankan extractor untuk mengubah komponen Anda dan mengekstrak kontennya

bash

Salin kode

Salin kode ke clipboard

npx intlayer extract

Perbarui vite.config.ts Anda untuk menyertakan plugin intlayerCompiler:

vite.config.ts

Salin kode

Salin kode ke clipboard

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

bash

Salin kode

Salin kode ke clipboard

npm run build # Atau npm run dev

Perdalam Pengetahuan Anda

Jika Anda ingin mempelajari lebih lanjut, Anda juga dapat menerapkan Editor Visual atau menggunakan CMS untuk mengeksternalisasi konten Anda.

Tanstack Start Solid

Astro dan React

Dibuat:2024-03-07Terakhir diperbarui:2026-05-06

Lihat template aplikasi di GitHub

Halaman ini memiliki template aplikasi yang tersedia.

Lihat aplikasi showcase

Halaman ini menautkan ke demo langsung template.

Referensikan dokumen ini ke asisten AI favorit Anda

ChatGPT

Claude

DeepSeek

Google AI mode Gemini

Perplexity Mistral

Grok

Ajukan pertanyaan Anda dan dapatkan ringkasan dokumen dengan merujuk halaman ini dan penyedia AI pilihan Anda

Riwayat Versi

"Perbarui penggunaan API useIntlayer Solid ke akses properti langsung"
v8.9.04/5/2026
"Menambahkan perintah init"
v7.5.930/12/2025
"Pembaruan integrasi Astro, konfigurasi, dan penggunaan"
v6.2.03/10/2025

Konten halaman ini diterjemahkan menggunakan AI.

Lihat versi terakhir dari konten aslinya dalam bahasa Inggris

Sunting dokumen ini

Jika Anda memiliki ide untuk meningkatkan dokumentasi ini, silakan berkontribusi dengan mengajukan pull request di GitHub.

Tautan GitHub ke dokumentasi

Salin

Salin Markdown dokumentasi ke clipboard

Terjemahkan Situs Astro Anda dengan Intlayer | Internasionalisasi (i18n)

ide.intlayer.org

Daftar Isi

Apa itu Intlayer?

Intlayer adalah pustaka internasionalisasi (i18n) sumber terbuka yang inovatif yang 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 dibuat secara otomatis untuk pelengkapan otomatis dan deteksi kesalahan yang lebih baik.
Memanfaatkan fitur-fitur canggih: Seperti deteksi bahasa dinamis dan peralihan bahasa.

Panduan Langkah-demi-Langkah untuk Mengonfigurasi Intlayer di Astro

Lihat templat aplikasi di GitHub.

Langkah 1: Instal Dependensi

Instal paket yang diperlukan menggunakan manajer paket pilihan Anda:

bash

Salin kode

Salin kode ke clipboard

npm install intlayer astro-intlayer# opsional: jika Anda ingin menambahkan dukungan island Reactnpm install react react-dom react-intlayer @astrojs/react

npm install intlayer astro-intlayer# opsional: jika Anda ingin menambahkan dukungan island Reactnpm install react react-dom react-intlayer @astrojs/react

intlayer Paket inti yang menyediakan alat i18n untuk manajemen konfigurasi, terjemahan, deklarasi konten, transpilasi, dan perintah CLI.
astro-intlayer Plugin integrasi Astro untuk menghubungkan Intlayer dengan bundler Vite; juga mencakup middleware untuk mendeteksi bahasa pilihan pengguna, mengelola cookie, dan menangani pengalihan URL.

Langkah 2: Konfigurasikan Proyek Anda

Buat file konfigurasi untuk menentukan bahasa aplikasi Anda:

intlayer.config.ts

Salin kode

Salin kode ke clipboard

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [      Locales.ENGLISH,      Locales.FRENCH,      Locales.SPANISH,      Locales.INDONESIAN,      // Bahasa Anda yang lain    ],    defaultLocale: Locales.ENGLISH,  },};export default config;

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [      Locales.ENGLISH,      Locales.FRENCH,      Locales.SPANISH,      Locales.INDONESIAN,      // Bahasa Anda yang lain    ],    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, menonaktifkan log Intlayer di konsol, dan banyak lagi. Untuk daftar lengkap parameter yang tersedia, lihat dokumentasi konfigurasi.

Langkah 3: Integrasikan Intlayer ke dalam konfigurasi Astro Anda

Tambahkan plugin intlayer ke konfigurasi Astro Anda.

astro.config.ts

Salin kode

Salin kode ke clipboard

// @ts-checkimport { intlayer } from "astro-intlayer";import { defineConfig } from "astro/config";// https://astro.build/configexport default defineConfig({  integrations: [intlayer()],});

// @ts-checkimport { intlayer } from "astro-intlayer";import { defineConfig } from "astro/config";// https://astro.build/configexport default defineConfig({  integrations: [intlayer()],});

Plugin integrasi intlayer() digunakan untuk mengintegrasikan Intlayer dengan Astro. Plugin ini memastikan pembuatan file deklarasi konten dan memantaunya dalam mode pengembangan. Plugin ini mendefinisikan variabel lingkungan Intlayer di dalam aplikasi Astro dan menyediakan alias untuk mengoptimalkan kinerja.

Langkah 4: Deklarasikan Konten Anda

Buat dan kelola deklarasi konten Anda untuk menyimpan terjemahan:

src/app.content.tsx

Salin kode

Salin kode ke clipboard

import { t, type Dictionary } from "intlayer";import type { ReactNode } from "react";const appContent = {  key: "app",  content: {    title: t({      en: "Hello World",      fr: "Bonjour le monde",      es: "Hola mundo",      id: "Halo Dunia",    }),  },} satisfies Dictionary;export default appContent;

import { t, type Dictionary } from "intlayer";import type { ReactNode } from "react";const appContent = {  key: "app",  content: {    title: t({      en: "Hello World",      fr: "Bonjour le monde",      es: "Hola mundo",      id: "Halo Dunia",    }),  },} satisfies Dictionary;export default appContent;

Deklarasi konten dapat didefinisikan di mana saja dalam aplikasi Anda, asalkan disertakan dalam contentDir (secara default ./src) dan cocok dengan ekstensi file deklarasi konten (secara default .content.{json,ts,tsx,js,jsx,mjs,cjs}).

Untuk informasi selengkapnya, lihat dokumentasi deklarasi konten.

Langkah 5: Menggunakan Konten di Astro

Anda dapat mengonsumsi kamus langsung di file .astro menggunakan pembantu inti yang diekspor dari intlayer.

src/pages/index.astro

Salin kode

Salin kode ke clipboard

---import {  getIntlayer,  getLocaleFromPath,  getLocalizedUrl,  defaultLocale,  localeMap,  getHTMLTextDir,  type LocalesValues,} from "intlayer";import LocaleSwitcher from "../components/LocaleSwitcher.astro";// Get the current locale from the URL (e.g. /es/about -> 'es')const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;// Get the content for the 'app' dictionaryconst { title } = getIntlayer("app", locale);---<!doctype html><html lang={locale} dir={getHTMLTextDir(locale)}>  <head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width" />    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />    <title>{title}</title>    <!-- Canonical link: Tells search engines which is the primary version of this page -->    <link      rel="canonical"      href={new URL(getLocalizedUrl(Astro.url.pathname, locale), Astro.site)}    />    <!-- Hreflang: Tell Google about all localized versions -->    {      localeMap(({ locale: mapLocale }) => (        <link          rel="alternate"          hreflang={mapLocale}          href={new URL(            getLocalizedUrl(Astro.url.pathname, mapLocale),            Astro.site          )}        />      ))    }    <!-- x-default: Fallback for users in unmatched languages -->    <link      rel="alternate"      hreflang="x-default"      href={new URL(        getLocalizedUrl(Astro.url.pathname, defaultLocale),        Astro.site      )}    />  </head>  <body>    <header>      <LocaleSwitcher />    </header>    <main>      <h1>{title}</h1>    </main>  </body></html>

---import {  getIntlayer,  getLocaleFromPath,  getLocalizedUrl,  defaultLocale,  localeMap,  getHTMLTextDir,  type LocalesValues,} from "intlayer";import LocaleSwitcher from "../components/LocaleSwitcher.astro";// Get the current locale from the URL (e.g. /es/about -> 'es')const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;// Get the content for the 'app' dictionaryconst { title } = getIntlayer("app", locale);---<!doctype html><html lang={locale} dir={getHTMLTextDir(locale)}>  <head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width" />    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />    <title>{title}</title>    <!-- Canonical link: Tells search engines which is the primary version of this page -->    <link      rel="canonical"      href={new URL(getLocalizedUrl(Astro.url.pathname, locale), Astro.site)}    />    <!-- Hreflang: Tell Google about all localized versions -->    {      localeMap(({ locale: mapLocale }) => (        <link          rel="alternate"          hreflang={mapLocale}          href={new URL(            getLocalizedUrl(Astro.url.pathname, mapLocale),            Astro.site          )}        />      ))    }    <!-- x-default: Fallback for users in unmatched languages -->    <link      rel="alternate"      hreflang="x-default"      href={new URL(        getLocalizedUrl(Astro.url.pathname, defaultLocale),        Astro.site      )}    />  </head>  <body>    <header>      <LocaleSwitcher />    </header>    <main>      <h1>{title}</h1>    </main>  </body></html>

Langkah 6: Perutean yang Dilokalkan

Buat segmen rute dinamis (misalnya, src/pages/[locale]/index.astro) untuk melayani halaman yang dilokalkan:

src/pages/[locale]/index.astro

Salin kode

Salin kode ke clipboard

---import { getIntlayer } from "intlayer";const { title } = getIntlayer('app');---<h1>{title}</h1>

---import { getIntlayer } from "intlayer";const { title } = getIntlayer('app');---<h1>{title}</h1>

Langkah 7: Terus Gunakan Framework Favorit Anda

Lanjutkan membangun aplikasi Anda menggunakan framework pilihan Anda.

Intlayer + React: Intlayer dengan React
Intlayer + Vue: Intlayer dengan Vue
Intlayer + Svelte: Intlayer dengan Svelte
Intlayer + Solid: Intlayer dengan Solid
Intlayer + Preact: Intlayer dengan Preact

Konfigurasi TypeScript

Intlayer menggunakan augmentasi modul (module augmentation) untuk memanfaatkan TypeScript, membuat basis kode Anda lebih kuat.

Autocompletion

Translation Error

Pastikan konfigurasi TypeScript Anda menyertakan tipe yang dibuat secara otomatis.

tsconfig.json

Salin kode

Salin kode ke clipboard

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

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

Konfigurasi Git

Disarankan untuk mengabaikan file yang dihasilkan oleh Intlayer. Ini mencegah file tersebut di-commit ke repositori Git Anda.

Untuk melakukannya, tambahkan instruksi berikut ke file .gitignore Anda:

bash

Salin kode

Salin kode ke clipboard

# Abaikan file yang dihasilkan oleh Intlayer.intlayer

# Abaikan file yang dihasilkan oleh Intlayer.intlayer

Ekstensi VS Code

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

Instalasi dari VS Code Marketplace

Ekstensi ini menyediakan:

Autocompletion untuk kunci terjemahan.
Deteksi kesalahan waktu nyata untuk terjemahan yang hilang.
Pratinjau inline untuk konten yang diterjemahkan.
Tindakan cepat untuk membuat dan memperbarui terjemahan dengan mudah.

Untuk informasi selengkapnya tentang cara menggunakan ekstensi, lihat dokumentasi ekstensi VS Code.

(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:

intlayer.config.ts

Salin kode

Salin kode ke clipboard

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;

Jalankan extractor untuk mengubah komponen Anda dan mengekstrak kontennya

bash

Salin kode

Salin kode ke clipboard

npx intlayer extract

npx intlayer extract

Perbarui vite.config.ts Anda untuk menyertakan plugin intlayerCompiler:

vite.config.ts

Salin kode

Salin kode ke clipboard

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

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

bash

Salin kode

Salin kode ke clipboard

npm run build # Atau npm run dev

npm run build # Atau npm run dev

Perdalam Pengetahuan Anda

Jika Anda ingin mempelajari lebih lanjut, Anda juga dapat menerapkan Editor Visual atau menggunakan CMS untuk mengeksternalisasi konten Anda.

Tanstack Start Solid

Astro dan React