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

Paket ini sedang dalam pengembangan. Lihat issue untuk informasi lebih lanjut. Tunjukkan minat Anda pada Intlayer untuk Solid dengan menyukai issue tersebut

Apa itu Intlayer?

Intlayer adalah pustaka internasionalisasi (i18n) open-source yang inovatif, dirancang untuk mempermudah 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.
• Manfaatkan fitur canggih, seperti deteksi dan pergantian locale secara dinamis.

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

Daftar Isi

Langkah 1: Instalasi Dependensi

Instal paket yang diperlukan menggunakan npm:

npm install intlayer solid-intlayernpm install vite-intlayer --save-dev

• intlayer

• intlayer

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

• solid-intlayer Paket yang mengintegrasikan Intlayer dengan aplikasi Solid. Paket ini menyediakan context providers dan hooks untuk internasionalisasi Solid.

• 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 react from "@vitejs/plugin-react-swc";import { intlayer } from "vite-intlayer";// https://vitejs.dev/config/export default defineConfig({  plugins: [react(), 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 di 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 appContent = {  key: "app",  content: {},} satisfies Dictionary;export default appContent;

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

Untuk detail lebih lanjut, lihat dokumentasi deklarasi konten.

Langkah 5: Gunakan Intlayer dalam Kode Anda

[untuk diselesaikan]

(Opsional) Langkah 6: Ubah bahasa konten Anda

[untuk diselesaikan]

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

[untuk diselesaikan]

(Opsional) Langkah 8: Ubah URL saat locale berubah

[untuk diselesaikan]

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

[untuk diselesaikan]

(Opsional) Langkah 10: Membuat Komponen Link yang Dilokalkan

[untuk diselesaikan]

Konfigurasi Git

Disarankan untuk mengabaikan 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:

# Abaikan file yang dihasilkan oleh Intlayer.intlayer

Ekstensi 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.
• Aksi cepat untuk dengan mudah membuat dan memperbarui terjemahan.

Untuk detail lebih lanjut tentang cara menggunakan ekstensi ini, lihat dokumentasi Ekstensi VS Code Intlayer.

Melangkah Lebih Jauh

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