Dokumentasi: Menggunakan TacoTranslate

Menggunakan TacoTranslate

Malay

Menterjemahkan rentetan

Terdapat tiga cara untuk menterjemah rentetan pada masa ini: Komponen Translate, hook useTranslation, atau utiliti translateEntries.

Menggunakan komponen Translate.
Memaparkan terjemahan di dalam elemen span, dan menyokong penyajian HTML.

import {Translate} from 'tacotranslate/react';

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

Anda boleh menukar jenis elemen, contohnya menggunakan as="p" pada komponen.

Menggunakan hook useTranslation.
Mengembalikan terjemahan sebagai rentetan biasa. Berguna, contohnya, 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 utiliti translateEntries.
Terjemahkan rentetan di sisi pelayan. Tingkatkan imej 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 rentetan diterjemahkan

Apabila rentetan sampai ke pelayan kami, kami terlebih dahulu mengesahkannya dan menyimpannya, kemudian segera mengembalikan terjemahan mesin. Walaupun terjemahan mesin secara amnya berkualiti lebih rendah berbanding terjemahan AI kami, ia memberikan respons awal yang pantas.

Secara serentak, kami memulakan tugas penterjemahan tak segerak untuk menghasilkan terjemahan AI bertaraf tinggi dan canggih bagi rentetan anda. Sebaik sahaja terjemahan AI itu siap, ia akan menggantikan terjemahan mesin dan akan dihantar setiap kali anda meminta terjemahan bagi rentetan anda.

Jika anda telah menterjemahkan rentetan secara manual, terjemahan tersebut diutamakan dan akan dikembalikan sebagai gantinya.

Memanfaatkan origin

Projek TacoTranslate mengandungi apa yang kami panggil origins. Anggaplah ia sebagai titik masuk, folder, atau kumpulan untuk rentetan dan terjemahan anda.

import {TacoTranslate} from 'tacotranslate/react';

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

Origins membolehkan anda memisahkan rentetan ke dalam kontena yang bermakna. Sebagai contoh, anda boleh mempunyai satu origin untuk dokumentasi dan satu lagi untuk halaman pemasaran anda.

Untuk kawalan yang lebih terperinci, anda boleh menyediakan origins pada peringkat komponen.

Untuk mencapai ini, pertimbangkan menggunakan pelbagai penyedia TacoTranslate dalam projek anda.

Sila ambil perhatian bahawa rentetan yang sama mungkin menerima terjemahan yang berbeza dalam origin yang berbeza.

Akhirnya, bagaimana anda memisahkan rentetan ke dalam origin terpulang kepada anda dan keperluan anda. Walau bagaimanapun, ambil perhatian bahawa mempunyai banyak rentetan dalam satu origin boleh meningkatkan masa pemuatan.

Mengendalikan pembolehubah

Anda harus sentiasa menggunakan pembolehubah untuk kandungan dinamik, seperti nama pengguna, tarikh, alamat e-mel, dan lain-lain.

Pemboleh ubah dalam rentetan diisytiharkan menggunakan kurungan berganda, 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}});
}

Mengurus kandungan HTML

Secara lalai, komponen Translate menyokong dan memaparkan kandungan HTML. Walau bagaimanapun, anda boleh memilih untuk tidak menggunakan tingkah laku ini dengan menetapkan useDangerouslySetInnerHTML kepada false.

Menonaktifkan rendering HTML sangat disarankan apabila menterjemah kandungan yang tidak dipercayai, seperti kandungan yang dihasilkan oleh pengguna.

Semua keluaran sentiasa disanitasi dengan sanitize-html sebelum dipaparkan.

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 dipaparkan sebagai teks biasa.

Rendering di sisi pelayan