\n```\n\n> Jika Anda ingin menggunakan konten Anda dalam atribut `string`, seperti `alt`, `title`, `href`, `aria-label`, dll., Anda dapat menggunakan nilai fungsi, seperti:\n\n> ```html\n> \n> \n> \n> ```\n\n> **Catatan tentang Penyiapan Perutean:**\n> Struktur direktori yang Anda gunakan bergantung pada pengaturan `middleware.routing` di `intlayer.config.ts`:\n>\n> - **`prefix-no-default` (default):** Mempertahankan bahasa default di root (tanpa awalan) dan mengawali bahasa lainnya. Gunakan `[...locale]` untuk menangkap semua kasus.\n> - **`prefix-all`:** Semua URL mendapatkan awalan bahasa. Anda dapat menggunakan `[locale]` standar jika tidak perlu menangani root secara terpisah.\n> - **`search-param` atau `no-prefix`:** Direktori bahasa tidak diperlukan. Bahasa dikelola melalui parameter kueri atau cookie.\n\n### Langkah 6: Membuat Elemen Kustom Lit\n\nBuat elemen kustom Lit. Panggil `installIntlayer` di `connectedCallback` menggunakan atribut `locale` berbasis server untuk menginisialisasi singleton terjemahan sisi klien.\n\n```typescript fileName=\"src/components/lit/LitDemo.ts\"\nimport { LitElement, html } from \"lit\";\nimport { installIntlayer, useIntlayer, useLocale } from \"lit-intlayer\";\nimport { getLocalizedUrl, getLocaleName, type LocalesValues } from \"intlayer\";\n\nclass LitDemo extends LitElement {\n static properties = {\n locale: { type: String },\n };\n\n locale: LocalesValues = \"en\" as LocalesValues;\n\n private _content = useIntlayer(this, \"lit-demo\");\n private _localeCtrl = useLocale(this, {\n onLocaleChange: (newLocale: LocalesValues) => {\n window.location.href = getLocalizedUrl(\n window.location.pathname,\n newLocale\n );\n },\n });\n\n override connectedCallback() {\n super.connectedCallback();\n // Inisialisasi dengan bahasa yang dideteksi server\n installIntlayer({ locale: this.locale as any });\n }\n\n override render() {\n const { greeting, description } = this._content;\n const {\n locale: currentLocale,\n availableLocales,\n setLocale,\n } = this._localeCtrl;\n\n return html`\n \n `;\n }\n}\n\ncustomElements.define(\"lit-demo\", LitDemo);\n```\n\n> Atribut `locale` diteruskan dari halaman Astro (deteksi sisi server) dan digunakan di `connectedCallback` untuk melakukan bootstrap `installIntlayer`, menyetel bahasa awal untuk semua hook `ReactiveController` di dalam elemen.\n\n> `useIntlayer` terdaftar sebagai `ReactiveController`. Ini secara otomatis menginstruksikan komponen untuk merrender ulang saat bahasa berubah, sehingga tidak diperlukan logika langganan tambahan.\n\n### Langkah 7: Menambahkan Pengalih Bahasa\n\nFungsionalitas peralihan bahasa terintegrasi langsung ke dalam metode `render()` elemen kustom Lit (lihat Langkah 6 di atas). Fungsionalitas ini menggunakan `useLocale` dari `lit-intlayer` dan menavigasi ke URL yang dilokalkan saat pengguna memilih bahasa baru:\n\n```typescript fileName=\"src/components/lit/LitDemo.ts\"\n// Di dalam kelas LitElement, setelah pengaturan useLocale dari Langkah 6:\n\nprivate _localeCtrl = useLocale(this, {\n onLocaleChange: (newLocale: LocalesValues) => {\n // Navigasi ke URL yang dilokalkan saat perubahan bahasa\n window.location.href = getLocalizedUrl(window.location.pathname, newLocale);\n },\n});\n\noverride render() {\n const { locale: currentLocale, availableLocales, setLocale } = this._localeCtrl;\n\n return html`\n \n `;\n}\n```\n\n> **Catatan tentang Reaktivitas Lit:**\n> `useLocale` mengembalikan `ReactiveController`. Saat `setLocale` dipanggil, kontroler secara otomatis meminta pembaruan render, memperbarui status tombol tanpa manipulasi DOM manual.\n\n> **Catatan tentang Persistensi:**\n> Menggunakan `onLocaleChange` untuk mengarahkan ulang melalui `window.location.href` memastikan bahwa URL bahasa baru dikunjungi. Hal ini memungkinkan middleware Intlayer menyetel cookie bahasa dan mengingat preferensi pengguna untuk kunjungan mendatang.\n\n### Langkah 8: Sitemap dan Robots.txt\n\nIntlayer menawarkan utilitas untuk secara dinamis membuat peta situs yang dilokalkan dan file robots.txt Anda.\n\n#### Sitemap\n\nIntlayer comes with a built-in sitemap generator to help you create a sitemap for your application easily. It handles localized routes and adds the necessary metadata for search engines.\n\n> The Intlayer generated sitemap supports the `xhtml:link` namespace (Hreflang XML Extensions). Unlike the default sitemap generators that only list raw URLs, Intlayer automatically creates the required bidirectional links between all language versions of a page (e.g., `/about`, `/about?lang=fr`, and `/about?lang=es`). This ensures search engines correctly index and serve the right language version to the right audience.\n\nBuat `src/pages/sitemap.xml.ts` untuk menghasilkan peta situs yang mencakup semua rute yang dilokalkan.\n\n```typescript fileName=\"src/pages/sitemap.xml.ts\"\nimport type { APIRoute } from \"astro\";\nimport { generateSitemap, type SitemapUrlEntry } from \"intlayer\";\n\nconst pathList: SitemapUrlEntry[] = [\n { path: \"/\", changefreq: \"daily\", priority: 1.0 },\n { path: \"/about\", changefreq: \"monthly\", priority: 0.7 },\n];\n\nconst SITE_URL = import.meta.env.SITE ?? \"http://localhost:4321\";\n\nexport const GET: APIRoute = async ({ site }) => {\n const xmlOutput = generateSitemap(pathList, { siteUrl: SITE_URL });\n\n return new Response(xmlOutput, {\n headers: { \"Content-Type\": \"application/xml\" },\n });\n};\n```\n\n#### Robots.txt\n\nBuat `src/pages/robots.txt.ts` untuk mengontrol perayapan mesin pencari.\n\n```typescript fileName=\"src/pages/robots.txt.ts\"\nimport type { APIRoute } from \"astro\";\nimport { getMultilingualUrls } from \"intlayer\";\n\nconst getAllMultilingualUrls = (urls: string[]) =>\n urls.flatMap((url) => Object.values(getMultilingualUrls(url)) as string[]);\n\nconst disallowedPaths = getAllMultilingualUrls([\"/admin\", \"/private\"]);\n\nexport const GET: APIRoute = ({ site }) => {\n const robotsTxt = [\n \"User-agent: *\",\n \"Allow: /\",\n ...disallowedPaths.map((path) => `Disallow: ${path}`),\n \"\",\n `Sitemap: ${new URL(\"/sitemap.xml\", site).href}`,\n ].join(\"\\n\");\n\n return new Response(robotsTxt, {\n headers: { \"Content-Type\": \"text/plain\" },\n });\n};\n```\n\n### Konfigurasi TypeScript\n\nIntlayer menggunakan augmentasi modul (module augmentation) untuk memanfaatkan TypeScript, membuat basis kode Anda lebih kuat. Jika Anda menggunakan sintaks dekorator, pastikan Anda mengaktifkan `experimentalDecorators` di compiler options Anda.\n\n\n\n\n\nPastikan konfigurasi TypeScript Anda menyertakan tipe yang dibuat secara otomatis.\n\n```json5 fileName=\"tsconfig.json\"\n{\n compilerOptions: {\n // ...\n experimentalDecorators: true,\n useDefineForClassFields: false, // Diperlukan untuk dukungan dekorator di Lit\n },\n \"include\": [\n // ... konfigurasi TypeScript Anda yang sudah ada\n \".intlayer/**/*.ts\", // Sertakan tipe yang dibuat secara otomatis\n ],\n}\n```\n\n### Konfigurasi Git\n\nDisarankan untuk mengabaikan file yang dihasilkan oleh Intlayer. Ini mencegah file tersebut di-commit ke repositori Git Anda.\n\nTo melakukannya, tambahkan instruksi berikut ke file `.gitignore` Anda:\n\n```bash\n# Abaikan file yang dihasilkan oleh Intlayer\n.intlayer\n```\n\n### Ekstensi VS Code\n\nUntuk meningkatkan pengalaman pengembangan Anda dengan Intlayer, Anda dapat menginstal **ekstensi resmi Intlayer untuk VS Code**.\n\n[Instalasi dari VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)\n\nEkstensi ini menyediakan:\n\n- **Autocompletion** untuk kunci terjemahan.\n- **Deteksi kesalahan waktu nyata** untuk terjemahan yang hilang.\n- **Pratinjau inline** untuk konten yang diterjemahkan.\n- **Tindakan cepat** untuk membuat dan memperbarui terjemahan dengan mudah.\n\nUntuk informasi selengkapnya tentang cara menggunakan ekstensi, lihat [dokumentasi ekstensi VS Code](https://intlayer.org/doc/vs-code-extension).\n\n---\n\n### (Opsional) Langkah 1 : Ekstrak konten komponen Anda\n\nJika Anda memiliki basis kode yang ada, mengubah ribuan file bisa memakan waktu lama.\n\nUntuk memudahkan proses ini, Intlayer mengusulkan [compiler](/id/doc/compiler) / [extractor](/id/doc/concept/cli/extract) untuk mengubah komponen Anda dan mengekstrak kontennya.\n\nUntuk mengaturnya, Anda dapat menambahkan bagian `compiler` di file `intlayer.config.ts` Anda:\n\n```typescript fileName=\"intlayer.config.ts\" codeFormat={[\"typescript\", \"esm\", \"commonjs\"]}\nimport { type IntlayerConfig } from \"intlayer\";\n\nconst config: IntlayerConfig = {\n // ... Sisa konfigurasi Anda\n compiler: {\n /**\n * Menunjukkan apakah compiler harus diaktifkan.\n */\n enabled: true,\n\n /**\n * Menentukan jalur file output\n */\n output: ({ fileName, extension }) => `./${fileName}${extension}`,\n\n /**\n * Menunjukkan apakah komponen harus disimpan setelah diubah. Dengan begitu, compiler dapat dijalankan satu kali saja untuk mengubah aplikasi, lalu dapat dihapus.\n */\n saveComponents: false,\n\n /**\n * Prefiks kunci kamus\n */\n dictionaryKeyPrefix: \"\",\n },\n};\n\nexport default config;\n```\n\n\n \n\nJalankan extractor untuk mengubah komponen Anda dan mengekstrak kontennya\n\n```bash packageManager=\"npm\"\nnpx intlayer extract\n```\n\n```bash packageManager=\"pnpm\"\npnpm intlayer extract\n```\n\n```bash packageManager=\"yarn\"\nyarn intlayer extract\n```\n\n```bash packageManager=\"bun\"\nbun x intlayer extract\n```\n\n \n \n\nPerbarui `vite.config.ts` Anda untuk menyertakan plugin `intlayerCompiler`:\n\n```ts fileName=\"vite.config.ts\"\nimport { defineConfig } from \"vite\";\nimport { intlayer, intlayerCompiler } from \"vite-intlayer\";\n\nexport default defineConfig({\n plugins: [\n intlayer(),\n intlayerCompiler(), // Menambahkan plugin compiler\n ],\n});\n```\n\n```bash packageManager=\"npm\"\nnpm run build # Atau npm run dev\n```\n\n```bash packageManager=\"pnpm\"\npnpm run build # Or pnpm run dev\n```\n\n```bash packageManager=\"yarn\"\nyarn build # Or yarn dev\n```\n\n```bash packageManager=\"bun\"\nbun run build # Or bun run dev\n```\n\n \n\n\n---\n\n### Perdalam Pengetahuan Anda\n\nJika Anda ingin mempelajari lebih lanjut, Anda juga dapat menerapkan [Editor Visual](https://github.com/aymericzip/intlayer/blob/main/docs/id/intlayer_visual_editor.md) atau menggunakan [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/id/intlayer_CMS.md) untuk mengeksternalisasi konten Anda.\n","about":"Pelajari cara menambahkan internasionalisasi (i18n) ke situs Astro + Lit Anda menggunakan Intlayer. Ikuti panduan ini untuk membuat situs Anda multibahasa.","url":"https://intlayer.org/id/doc/environment/astro/lit","datePublished":"24-04-2026","dateModified":"06-05-2026","keywords":"internasionalisasi, dokumentasi, Intlayer, Astro, Lit, Web Components, i18n, JavaScript","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"Pengembang, Manajer Konten"}}

Dibuat:2026-04-24Terakhir diperbarui:2026-05-06