Dokumentasi: Menggunakan TacoTranslate

Menggunakan TacoTranslate

Indonesian

Menerjemahkan string

Saat ini ada tiga cara untuk menerjemahkan string: komponen Translate, hook useTranslation, atau utilitas translateEntries.

Menggunakan Translate komponen.
Menampilkan terjemahan dalam elemen span, dan mendukung penyajian HTML.

import {Translate} from 'tacotranslate/react';

function Page() {
	return <Translate string="Hello, world!" />;
}

Anda dapat mengubah tipe elemen, misalnya dengan menggunakan as="p" pada komponen.

Menggunakan hook useTranslation.
Mengembalikan terjemahan sebagai string biasa. Berguna, misalnya, pada 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 mencapai server kami, kami terlebih dahulu memvalidasi dan menyimpannya, lalu segera mengembalikan terjemahan mesin. Meskipun terjemahan mesin umumnya berkualitas lebih rendah dibandingkan terjemahan AI kami, terjemahan tersebut memberikan respons awal yang cepat.

Secara bersamaan, kami memulai pekerjaan terjemahan asinkron untuk menghasilkan terjemahan AI berkualitas tinggi dan mutakhir untuk string Anda. Setelah terjemahan AI siap, terjemahan itu 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 memiliki prioritas dan akan dikembalikan sebagai gantinya.

Memanfaatkan origins

Proyek TacoTranslate berisi apa yang kami sebut origins. Anggaplah mereka sebagai titik masuk, folder, atau kelompok untuk teks dan terjemahan Anda.

import {TacoTranslate} from 'tacotranslate/react';

function Menu() {
	return (
		<TacoTranslate origin="application-menu">
			// ...
		</TacoTranslate>
	);
}

Origins memungkinkan Anda memisahkan string ke dalam wadah yang bermakna. Misalnya, Anda bisa memiliki satu origin untuk dokumentasi dan satu lagi untuk halaman pemasaran Anda.

Untuk kontrol yang lebih terperinci, Anda dapat mengatur origins pada tingkat komponen.

Untuk mencapai hal ini, pertimbangkan menggunakan beberapa penyedia TacoTranslate di dalam proyek Anda.

Harap dicatat bahwa teks yang sama mungkin memiliki terjemahan yang berbeda di origin yang berbeda.

Pada akhirnya, bagaimana Anda memisahkan string ke dalam origin terserah pada Anda dan kebutuhan Anda. Namun, perlu diingat 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 email, dan lainnya.

Variabel dalam string dideklarasikan menggunakan 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 menonaktifkan perilaku ini dengan mengatur useDangerouslySetInnerHTML menjadi false.

Sangat disarankan untuk menonaktifkan perenderan HTML saat menerjemahkan konten yang tidak tepercaya, seperti konten yang dibuat oleh 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 ditampilkan sebagai teks biasa.

Rendering di sisi server