{$content.title}
\n\n{@const Title = $content.title}
\n\n\n\n\n```\n\n> Jika aplikasi Anda sudah ada, Anda dapat menggunakan [Intlayer Compiler](/id/doc/compiler) secara kombinasi dengan [perintah extract](/id/doc/concept/cli/extract) untuk mengonversi ribuan komponen dalam satu detik.\n\n### (Opsional) Langkah 6: Ubah bahasa konten Anda\n\n```svelte fileName=\"src/App.svelte\"\n\n\n{$content.markdownContent}
\n```\n\n> Anda juga dapat mengakses data front-matter markdown Anda menggunakan properti `content.markdownContent.metadata.xxx`.\n\n### (Opsional) Langkah 8: Siapkan editor / CMS intlayer\n\nUntuk menyiapkan editor intlayer, Anda harus mengikuti [dokumentasi editor intlayer](/id/doc/concept/editor).\n\nUntuk menyiapkan CMS intlayer, Anda harus mengikuti [dokumentasi CMS intlayer](/id/doc/concept/cms).\n\n### (Opsional) Langkah 7: Tambahkan Routing yang dilokalkan ke aplikasi Anda\n\nUntuk menangani routing yang dilokalkan dalam aplikasi Svelte Anda, Anda dapat menggunakan `svelte-spa-router` bersama dengan `localeFlatMap` dari Intlayer untuk menghasilkan rute untuk setiap locale.\n\nPertama, instal `svelte-spa-router`:\n\n```bash packageManager=\"npm\"\nnpm install svelte-spa-router\nnpx intlayer init\n```\n\n```bash packageManager=\"pnpm\"\npnpm add svelte-spa-router\npnpm intlayer init\n```\n\n```bash packageManager=\"yarn\"\nyarn add svelte-spa-router\nyarn intlayer init\n```\n\n```bash packageManager=\"bun\"\nbun add svelte-spa-router\n```\n\nKemudian, buat file `Router.svelte` untuk mendefinisikan rute Anda:\n\n```svelte fileName=\"src/Router.svelte\"\n\n\nAjukan 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
- "Tambahkan perintah init"v7.5.930/12/2025
- "Memperbarui dokumen"v5.5.1119/11/2025
- "Memulai riwayat"v5.5.1029/6/2025
Konten halaman ini diterjemahkan menggunakan AI.
Lihat versi terakhir dari konten aslinya dalam bahasa InggrisJika Anda memiliki ide untuk meningkatkan dokumentasi ini, silakan berkontribusi dengan mengajukan pull request di GitHub.
Tautan GitHub ke dokumentasiSalin Markdown dokumentasi ke clipboard
Terjemahkan situs web Vite dan Svelte 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.
- Menjamin 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 Svelte
Lihat Template Aplikasi di GitHub.
Langkah 1: Instalasi Dependensi
Instal paket yang diperlukan menggunakan npm:
Salin kode ke clipboard
npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer initintlayer
Paket inti yang menyediakan alat internasionalisasi untuk manajemen konfigurasi, terjemahan, deklarasi konten, transpile, dan perintah CLI.
svelte-intlayer Paket yang mengintegrasikan Intlayer dengan aplikasi Svelte. Ini menyediakan context providers dan hooks untuk internasionalisasi Svelte.
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:
Salin kode ke clipboard
import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = { internationalization: { locales: [ Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH, // Locale 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.
Salin kode ke clipboard
import { defineConfig } from "vite";import { svelte } from "@sveltejs/vite-plugin-svelte";import { intlayer } from "vite-intlayer";// https://vitejs.dev/config/export default defineConfig({ plugins: [svelte(), 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:
Salin kode ke clipboard
import { t, type Dictionary } from "intlayer";
const appContent = {
key: "app",
content: {
title: t({
en: "Hello World",
fr: "Bonjour le monde",
es: "Hola mundo",
}),
},
} satisfies Dictionary;
export default appContent;Deklarasi konten Anda dapat didefinisikan di mana saja dalam aplikasi Anda selama mereka dimasukkan ke dalam direktoricontentDir(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
Salin kode ke clipboard
<script> import { useIntlayer } from "svelte-intlayer"; const content = useIntlayer("app");</script><div><!-- Render konten sebagai konten sederhana --><h1>{$content.title}</h1><!-- Untuk merender konten yang dapat diedit menggunakan editor --><h1>{@const Title = $content.title}<Title /></h1><!-- Untuk merender konten sebagai string --><div aria-label={$content.title.value}></div><div aria-label={$content.title.toString()}></div><div aria-label={String($content.title)}></div>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
Salin kode ke clipboard
<script lang="ts">import { getLocaleName } from 'intlayer';import { useLocale } from "svelte-intlayer";// Dapatkan informasi locale dan fungsi setLocaleconst { locale, availableLocales, setLocale } = useLocale();// Tangani perubahan localeconst changeLocale = (event: Event) => { const target = event.target as HTMLSelectElement; const newLocale = target.value; setLocale(newLocale);};</script><div> <select value={$locale} on:change={changeLocale}> {#each availableLocales ?? [] as loc} <option value={loc}> {getLocaleName(loc)} </option> {/each} </select></div>(Opsional) Langkah 7: Render Markdown
Intlayer mendukung rendering konten Markdown langsung di aplikasi Svelte Anda. Secara default, Markdown diperlakukan sebagai teks biasa. Untuk mengubah Markdown menjadi HTML kaya, Anda dapat mengintegrasikan @humanspeak/svelte-markdown, atau parser markdown lainnya.
Untuk melihat cara mendeklarasikan konten markdown menggunakan paket intlayer, lihat dokumen markdown.
Salin kode ke clipboard
<script> import { setIntlayerMarkdown } from "svelte-intlayer"; setIntlayerMarkdown((markdown) => // render konten markdown sebagai string return markdown; );</script><h1>{$content.markdownContent}</h1>Anda juga dapat mengakses data front-matter markdown Anda menggunakan properti content.markdownContent.metadata.xxx.
(Opsional) Langkah 8: Siapkan editor / CMS intlayer
Untuk menyiapkan editor intlayer, Anda harus mengikuti dokumentasi editor intlayer.
Untuk menyiapkan CMS intlayer, Anda harus mengikuti dokumentasi CMS intlayer.
(Opsional) Langkah 7: Tambahkan Routing yang dilokalkan ke aplikasi Anda
Untuk menangani routing yang dilokalkan dalam aplikasi Svelte Anda, Anda dapat menggunakan svelte-spa-router bersama dengan localeFlatMap dari Intlayer untuk menghasilkan rute untuk setiap locale.
Pertama, instal svelte-spa-router:
Salin kode ke clipboard
npm install svelte-spa-routernpx intlayer initKemudian, buat file Router.svelte untuk mendefinisikan rute Anda:
Salin kode ke clipboard
<script lang="ts">import { localeFlatMap } from "intlayer";import Router from "svelte-spa-router";import { wrap } from "svelte-spa-router/wrap";import App from "./App.svelte";const routes = Object.fromEntries( localeFlatMap(({locale, urlPrefix}) => [ [ urlPrefix || '/', wrap({ component: App as any, props: { locale, }, }), ], ]));</script><Router {routes} />Perbarui main.ts Anda untuk memasang komponen Router menggantikan App:
Salin kode ke clipboard
import { mount } from "svelte";import Router from "./Router.svelte";const app = mount(Router, { target: document.getElementById("app")!,});export default app;Terakhir, perbarui App.svelte Anda untuk menerima properti locale dan menggunakannya dengan useIntlayer:
Salin kode ke clipboard
<script lang="ts">import type { Locale } from 'intlayer';import { useIntlayer } from "svelte-intlayer";import Counter from './lib/Counter.svelte';import LocaleSwitcher from './lib/LocaleSwitcher.svelte';export let locale: Locale;$: content = useIntlayer('app', locale);</script><main> <div class="locale-switcher-container"> <LocaleSwitcher currentLocale={locale} /> </div> <!-- ... sisa aplikasi Anda ... --></main>Konfigurasi Routing Server-Side (Opsional)
Secara paralel, Anda juga dapat menggunakan intlayerProxy untuk menambahkan routing sisi server ke aplikasi Anda. Plugin ini akan secara otomatis mendeteksi locale saat ini berdasarkan URL dan mengatur cookie locale yang sesuai. Jika tidak ada locale yang ditentukan, plugin akan menentukan locale yang paling sesuai berdasarkan preferensi bahasa browser pengguna. Jika tidak ada locale yang terdeteksi, maka akan mengarahkan ulang ke locale default.
Perlu diperhatikan bahwa untuk menggunakanintlayerProxydi produksi, Anda perlu memindahkan paketvite-intlayerdaridevDependencieskedependencies.
Salin kode ke clipboard
import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";
import { intlayer, intlayerProxy } from "vite-intlayer";
typescript {3,7} fileName="vite.config.ts" codeFormat="typescript"
import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";
import { intlayer, intlayerProxy } from "vite-intlayer";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [intlayerProxy(), // should be placed first
svelte(), intlayer()],
});(Opsional) Langkah 8: Ubah URL saat locale berubah
Untuk memungkinkan pengguna mengganti bahasa dan memperbarui URL sesuai, Anda dapat membuat komponen LocaleSwitcher. Komponen ini akan menggunakan getLocalizedUrl dari intlayer dan push dari svelte-spa-router.
Salin kode ke clipboard
<script lang="ts">import { getLocaleName, getLocalizedUrl } from "intlayer";import { useLocale } from "svelte-intlayer";import { push } from "svelte-spa-router";export let currentLocale: string | undefined = undefined;// Dapatkan informasi localeconst { locale, availableLocales } = useLocale();// Tangani perubahan localeconst changeLocale = (event: Event) => { const target = event.target as HTMLSelectElement; const newLocale = target.value; const currentUrl = window.location.pathname; const url = getLocalizedUrl( currentUrl, newLocale); push(url);};</script><div class="locale-switcher"> <select value={currentLocale ?? $locale} onchange={changeLocale}> {#each availableLocales ?? [] as loc} <option value={loc}> {getLocaleName(loc)} </option> {/each} </select></div>Konfigurasi Git
Disarankan untuk mengabaikan file-file yang dihasilkan oleh Intlayer. Ini memungkinkan Anda untuk menghindari meng-commit file tersebut ke repositori Git Anda.
Untuk melakukan ini, Anda dapat menambahkan instruksi berikut ke file .gitignore Anda:
Salin kode ke clipboard
# Abaikan file yang dihasilkan oleh Intlayer.intlayerEkstensi VS Code
Untuk meningkatkan pengalaman pengembangan Anda dengan Intlayer, Anda dapat menginstal Ekstensi VS Code Intlayer resmi.
Pasang dari VS Code Marketplace
Ekstensi ini menyediakan:
- Autocompletion untuk kunci terjemahan.
- Deteksi kesalahan waktu nyata untuk terjemahan yang hilang.
- Pratinjau inline dari konten yang diterjemahkan.
- Tindakan cepat untuk dengan mudah membuat dan memperbarui terjemahan.
Untuk detail lebih lanjut tentang cara menggunakan ekstensi ini, lihat dokumentasi Ekstensi VS Code Intlayer.
(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:
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
Salin kode ke clipboard
npx intlayer extract(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 namespacexhtml: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=frtergantung mode routing).
Robots.txt
Gunakan getMultilingualUrls agar aturan Disallow mencakup semua varian URL jalur sensitif.
1. Buat generate-seo.mjs di root proyek
Salin kode ke clipboard
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).
Disarankangenerate-seo.mjsuntuk ESM Node. Jika memakaigenerate-seo.js, pastikan"type": "module"dipackage.jsonatau aktifkan ESM lainnya.
2. Jalankan skrip sebelum Vite
Salin kode ke clipboard
{ "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.