Dokumentasi: Menggunakan TacoTranslate

Menggunakan TacoTranslate

Malay

Menterjemah rentetan

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

Menggunakan komponen Translate.
Menghasilkan terjemahan dalam elemen span, dan menyokong rendering HTML.

import {Translate} from 'tacotranslate/react';

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

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

Menggunakan kait useTranslation.
Mengembalikan terjemahan sebagai rentetan biasa. Berguna dalam, contohnya, 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 string di sisi pelayan. Perkasakan 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 mengesahkan dan menyimpannya, kemudian segera memulangkan terjemahan mesin. Walaupun terjemahan mesin biasanya kurang berkualiti berbanding terjemahan AI kami, ia memberikan tindak balas awal yang pantas.

Serentak, kami memulakan tugasan terjemahan secara tak segerak untuk menghasilkan terjemahan AI berkualiti tinggi dan terkini bagi rentetan anda. Sebaik sahaja terjemahan AI siap, ia akan menggantikan terjemahan mesin dan dihantar setiap kali anda meminta terjemahan bagi rentetan anda.

Jika anda telah menterjemahkan string secara manual, terjemahan tersebut akan diberi keutamaan dan dikembalikan sebagai gantinya.

Menggunakan origins

Projek TacoTranslate mengandungi apa yang kami panggil asal. Anggapkan 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 kepada bekas 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 menetapkan origins pada peringkat komponen.

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

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

Akhirnya, bagaimana anda memisahkan rentetan ke dalam origins terpulang kepada anda dan keperluan anda. Namun, perlu diingat bahawa mempunyai banyak rentetan dalam satu origin mungkin akan meningkatkan masa pemuatan.

Mengendalikan pemboleh ubah

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

Pembolehubah dalam string 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}});
}

Menguruskan kandungan HTML

Secara lalai, komponen Translate menyokong dan memaparkan kandungan HTML. Walau bagaimanapun, anda boleh keluar dari tingkah laku ini dengan menetapkan useDangerouslySetInnerHTML kepada false.

Mematikan rendering HTML sangat disyorkan semasa menterjemah kandungan yang tidak dipercayai, seperti kandungan yang dihasilkan oleh pengguna.

Semua output 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.

Penyajian sisi pelayan