Menggunakan TacoTranslate
Menerjemahkan string
Saat ini ada tiga cara untuk menerjemahkan string: Komponen Translate
, hook useTranslation
, atau utilitas translateEntries
.
Menggunakan komponen Translate
.
Menghasilkan terjemahan di dalam elemen span
, dan mendukung render HTML.
import {Translate} from 'tacotranslate/react';
function Page() {
return <Translate string="Hello, world!" />;
}
Anda dapat mengubah jenis elemen menggunakan, misalnya, as="p"
pada komponen.
Menggunakan hook useTranslation
.
Mengembalikan terjemahan sebagai string biasa. Berguna misalnya dalam tag meta
.
import {useEffect} from 'react';
import {useTranslation} from 'tacotranslate/react';
function Page() {
const helloWorld = useTranslation('Hello, world!');
useEffect(() => {
alert(helloWorld);
}, [helloWorld]);
return (
<title>{useTranslation('My page title')}</title>
);
}
Menggunakan utilitas translateEntries
.
Terjemahkan string di sisi server. Tingkatkan performa gambar OpenGraph Anda.
import {createEntry, translateEntries} from 'tacotranslate';
async function generateMetadata(locale = 'es') {
const title = createEntry({string: 'Hello, world!'});
const description = createEntry({string: 'TacoTranslate on the server'});
const translations = await translateEntries(
tacoTranslate,
{origin: 'opengraph', locale},
[title, description]
);
return {
title: translations(title),
description: translations(description)
};
}
Bagaimana string diterjemahkan
Ketika string sampai di server kami, kami pertama-tama memvalidasi dan menyimpannya, kemudian segera mengembalikan terjemahan mesin. Meskipun terjemahan mesin umumnya memiliki kualitas yang lebih rendah dibandingkan dengan terjemahan AI kami, terjemahan ini memberikan respons awal yang cepat.
Secara bersamaan, kami memulai pekerjaan terjemahan asynchronous untuk menghasilkan terjemahan AI berkualitas tinggi dan mutakhir untuk string Anda. Setelah terjemahan AI siap, terjemahan tersebut akan menggantikan terjemahan mesin dan akan dikirim setiap kali Anda meminta terjemahan untuk string Anda.
Jika Anda telah menerjemahkan sebuah string secara manual, terjemahan tersebut akan didahulukan dan dikembalikan sebagai gantinya.
Memanfaatkan origins
Proyek TacoTranslate berisi apa yang kami sebut origins. Anggap saja sebagai titik masuk, folder, atau grup untuk string dan terjemahan Anda.
import {TacoTranslate} from 'tacotranslate/react';
function Menu() {
return (
<TacoTranslate origin="application-menu">
// ...
</TacoTranslate>
);
}
Origins memungkinkan Anda memisahkan string menjadi kontainer yang bermakna. Misalnya, Anda bisa memiliki satu origin untuk dokumentasi dan origin lain untuk halaman pemasaran Anda.
Untuk kontrol yang lebih rinci, Anda dapat mengatur origins pada tingkat komponen.
Untuk mencapai ini, pertimbangkan menggunakan beberapa penyedia TacoTranslate dalam proyek Anda.
Harap dicatat bahwa string yang sama mungkin menerima terjemahan yang berbeda di origin yang berbeda.
Pada akhirnya, bagaimana Anda memisahkan string ke dalam origins tergantung pada Anda dan kebutuhan Anda. Namun, perhatikan bahwa memiliki banyak string dalam satu origin dapat meningkatkan waktu pemuatan.
Menangani variabel
Anda harus selalu menggunakan variabel untuk konten dinamis, seperti nama pengguna, tanggal, alamat e-mail, dan lainnya.
Variabel dalam string dinyatakan menggunakan tanda kurung ganda, seperti {{variable}}
.
import {Translate} from 'tacotranslate/react';
function Greeting() {
const name = 'Juan';
return <Translate string="Hello, {{name}}!" variables={{name}} />;
}
import {useTranslation} from 'tacotranslate/react';
function useGreeting() {
const name = 'Juan';
return useTranslation('Hello, {{name}}!', {variables: {name}});
}
Mengelola konten HTML
Secara default, komponen Translate
mendukung dan merender konten HTML. Namun, Anda dapat memilih untuk tidak menggunakan perilaku ini dengan mengatur useDangerouslySetInnerHTML
ke false
.
Menonaktifkan rendering HTML sangat disarankan saat menerjemahkan konten yang tidak tepercaya, seperti konten yang dibuat pengguna.
Semua output selalu disanitasi dengan sanitize-html sebelum dirender.
import {Translate} from 'tacotranslate/react';
function Page() {
return (
<Translate
string={`
Welcome to <strong>my</strong> website.
I’m using <a href="{{url}}">TacoTranslate</a> to translate text.
`}
variables={{url: 'https://tacotranslate.com'}}
useDangerouslySetInnerHTML={false}
/>
);
}
Contoh di atas akan dirender sebagai teks biasa.