Menerjemahkan HTML dan JavaScript menggunakan Weblate CDN¶

Mulai dari Weblate 4.2, dimungkinkan untuk mengekspor lokalisasi ke CDN menggunakan pengaya CDN lokalisasi JavaScript.

Catatan

Fitur ini dikonfigurasikan di Hosted Weblate. Fitur ini memerlukan konfigurasi tambahan pada pemasangan Anda, lihat LOCALIZE_CDN_URL dan LOCALIZE_CDN_PATH.

Setelah dipasang ke komponen Anda, ia akan mendorong terjemahan yang dikomit (lihat Komit malas) ke CDN dan ini dapat digunakan di halaman web Anda untuk melokalisasikannya.

Membuat komponen¶

Pertama, Anda perlu membuat komponen ekabahasa yang akan menampung string Anda, lihat Menambahkan proyek dan komponen terjemahan untuk petunjuk umum tentang itu.

Jika Anda sudah memiliki repositori untuk memulai (misalnya repositori yang berisi berkas HTML), buatlah berkas JSON kosong untuk bahasa sumber (lihat Bahasa sumber) di repositori, misalnya locales/en.json. Kontennya harus {} untuk mengindikasikan objek kosong. Setelah Anda memilikinya, repositori dapat diimpor ke Weblate dan Anda dapat memulai dengan konfigurasi pengaya.

Petunjuk

Jika Anda memiliki terjemahan yang ada, Anda dapat menempatkannya ke dalam berkas JSON bahasa dan terjemahan tersebut akan digunakan di Weblate.

Bagi mereka yang tidak ingin menggunakan repositori yang ada (atau tidak memilikinya), pilih Mulai dari awal saat membuat komponen dan pilih berkas JSON sebagai format berkas (tidak masalah untuk memilih format ekabahasa apa pun pada tahap ini).

Mengkonfigurasikan pengaya Weblate CDN¶

Pengaya CDN lokalisasi JavaScript menyediakan beberapa opsi konfigurasi.

Ambang batas terjemahan: Terjemahan yang diterjemahkan di atas ambang batas ini akan disertakan dalam CDN.
Pemilih CSS: Mengatur string mana dari dokumen HTML yang dapat diterjemahkan, lihat Ekstraksi string untuk Weblate CDN dan Lokalisasi HTML menggunakan Weblate CDN.
Nama kuki bahasa: Nama kuki yang berisi bahasa yang dipilih oleh pengguna. Digunakan dalam cuplikan JavaScript untuk Lokalisasi HTML menggunakan Weblate CDN.
Ekstrak string dari berkas HTML: Daftar berkas dalam repositori atau URL tempat Weblate akan mencari string yang dapat diterjemahkan dan menawarkannya untuk terjemahan, lihat Ekstraksi string untuk Weblate CDN.

Ekstraksi string untuk Weblate CDN¶

String terjemahan harus ditampilkan di Weblate. Anda dapat baik mengelola ini secara manual, menggunakan API untuk membuat mereka atau mendaftar berkas atau URL menggunakan Ekstrak string dari berkas HTML dan Weblate akan mengekstrak mereka secara otomatis. Berkas harus ditampilkan di repositori atau berisi URL jarak jauh yang akan diunduh dan diurai secara reguler oleh Weblate. URL jarak jauh dibatasi oleh ALLOWED_ASSET_DOMAINS, mencakup target pengarahan apa pun.

Konfigurasi bawaan untuk Pemilih CSS mengekstrak elemen dengan kelas CSS l10n, misalnya akan mengekstrak dua string dari cuplikan kode berikut:

<section class="content">
    <div class="row">
        <div class="wrap">
            <h1 class="section-title min-m l10n">Maintenance in progress</h1>
            <div class="page-desc">
                <p class="l10n">We're sorry, but this site is currently down for maintenance.</p>
            </div>
        </div>
    </div>
</section>

Jika Anda tidak ingin mengubah kode yang ada, Anda juga dapat menggunakan * sebagai pemilih untuk memproses semua elemen.

Catatan

Saat ini, hanya teks elemen yang diekstraksi. Pengaya ini tidak mendukung lokalisasi atribut elemen atau elemen dengan turunan.

Lokalisasi HTML menggunakan Weblate CDN¶

To localize an HTML document, you need to load the weblate.js script:

<script src="https://weblate-cdn.com/a5ba5dc29f39498aa734528a54b50d0a/weblate.js" async></script>

Setelah dimuat, ini akan secara otomatis menemukan semua elemen terjemahan yang cocok (berdasarkan konfigurasi Pemilih CSS) dan mengganti teksnya dengan terjemahan.

Bahasa pengguna dideteksi dari kuki yang dikonfigurasikan dan kembali ke bahasa pilihan pengguna yang dikonfigurasikan dalam peramban.

Nama kuki bahasa dapat berguna untuk integrasi dengan aplikasi lain (misalnya pilih django_language saat menggunakan Django).

Lokalisasi JavaScript¶

Terjemahan individual ditampilkan sebagai berkas JSON dwibahasa di bawah CDN. Untuk mengambilnya, Anda dapat menggunakan kode berikut:

fetch(("https://weblate-cdn.com/a5ba5dc29f39498aa734528a54b50d0a/cs.json")
  .then(response => response.json())
  .then(data => console.log(data));

Logika lokalisasi yang sebenarnya perlu diimplementasikan dalam kasus ini.