Dokumentasi

Menerjemahkan konten

Tandai konten yang ingin Anda terjemahkan Magic Translate. Konten asli ditampilkan sampai terjemahan dimuat.

Elemen <t>

Masukkan teks dalam elemen <t> untuk menerjemahkannya. Ini dapat berisi HTML:

<t>This content will be translated</t>


<t>Click <a href="/sale">here</a> to see <b>today's</b> deals.</t>

<mt-translate> berfungsi juga, jika Anda lebih suka nama elemen khusus.

Atribut data-t

Jika Anda tidak dapat menambahkan elemen pembungkus, tambahkan data-t ke elemen yang ada untuk menerjemahkan kontennya:

<title data-t>My online shop</title>


<select>
  <option data-t>Small</option>
  <option data-t>Large</option>
</select>

Atribut

Buat daftar atribut yang akan diterjemahkan di data-t-attrs, dipisahkan oleh spasi:

<input placeholder="Search products" data-t-attrs="placeholder" />


<img src="team.jpg" alt="Our team" title="Say hi" data-t-attrs="alt title" />

Variabel

Masukkan nilai yang berubah, seperti nama atau hitungan, di data-v sebagai objek JSON, dan referensikan sebagai $name:

<t data-v='{"name": "Bob", "count": 7}'>Hi $name, you have $count new messages</t>


<input placeholder="Search $count products" data-t-attrs="placeholder" data-v='{"count": 3}' />

Magic Translate menerjemahkan teks di sekitar nilai sekali, sebagai Hi {0}, you have {1} new messages, dan menempatkan nilai-nilai kembali di halaman. Terjemahan di-cache dan berfungsi untuk setiap nama dan setiap hitungan, dan nilai-nilai itu sendiri tidak pernah dikirim ke Magic Translate.

Untuk menampilkan nilai baru, ubah data-v. Terjemahan cache digunakan kembali dan tidak ada permintaan yang dibuat:

element.dataset.v = JSON.stringify({ name: 'Bob', count: 8 });

Nilai-nilai diberi nomor dalam urutan pertama kali muncul. Terjemahan dapat memindahkannya ke mana pun bahasa membutuhkannya, misalnya {1} neue Nachrichten fĂźr {0}.

Beberapa aturan:

  • Hanya kunci data-v yang diganti, jadi teks seperti $5 tetap apa adanya. Jika dua tombol dimulai dengan cara yang sama, seperti count dan counts, yang terpanjang menang.
  • Nama yang sama dapat muncul lebih dari sekali.
  • Nilai dimasukkan sebagai teks, tidak pernah sebagai HTML. Letakkan markup di teks di sekitarnya sebagai gantinya: Hi <b>$name</b>.
  • Dalam konten, variabel diganti dalam teks saja, bukan dalam atribut seperti href atau title.
  • Jika data-v bukan objek JSON yang valid, teks dibiarkan tidak diterjemahkan dan peringatan dicatat. Kunci yang tidak muncul dalam teks mencatat peringatan juga.
  • $name terlihat sampai skrip dimuat. Muat skrip di awal halaman, atau sembunyikan elemen-elemen ini sampai saat itu.

Pilihan

Gunakan atribut ini untuk mengatur opsi untuk satu elemen:

AtributNilaiDeskripsi
data-formalityinformal atau formalMenetapkan formalitas terjemahan.
data-langkode bahasaMengganti bahasa halaman.
data-t-idsebuah idMemungkinkan Anda mengedit penggunaan teks ini sendiri. Ini berlaku untuk konten elemen, bukan untuk data-t-attrs-nya.
<t data-lang="fr" data-formality="formal">How are you?</t>

Konten yang berubah

Konten yang ditambahkan ke halaman nanti, atau diubah oleh skrip Anda, diterjemahkan juga. Ini berfungsi untuk konten yang dirender oleh JavaScript, misalnya dengan htmx atau jQuery.

Semua terjemahan yang diminta pada saat yang sama dikirim ke API dalam satu permintaan, dan terjemahan di-cache. Anda dapat menandai elemen sebanyak yang Anda suka.

Keterbatasan

Isi elemen tunggal tidak boleh melebihi 10 KB, yaitu sekitar 5.000 karakter. Elemen bersarang diterjemahkan sebagai bagian dari elemen <t> induknya.

SebelumnyaJavaScriptBerikutnyaJavaScript API