Dokumentasi: Menggunakan TacoTranslate

Menggunakan TacoTranslate

Malay

Menterjemah rentetan

Terdapat tiga cara untuk menterjemah rentetan teks: Komponen Translate, kait useTranslation, atau utiliti translateEntries.

Menggunakan komponen Translate.
Memaparkan 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, contohnya, as="p" pada komponen tersebut.

Menggunakan useTranslation hook.
Memulangkan 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 rentetan pada 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 serta-merta mengembalikan terjemahan mesin. Walaupun terjemahan mesin biasanya mempunyai kualiti yang lebih rendah berbanding dengan terjemahan AI kami, ia memberikan tindak balas awal yang cepat.

Serentak, kami memulakan tugasan penterjemahan secara tak segerak untuk menghasilkan penterjemahan AI berkualiti tinggi dan canggih bagi rentetan anda. Setelah penterjemahan AI sedia, ia akan menggantikan penterjemahan mesin dan dihantar setiap kali anda meminta penterjemahan bagi rentetan anda.

Jika anda telah menterjemah sesuatu string secara manual, terjemahan tersebut akan diutamakan dan dikembalikan sebagai gantinya.

Menggunakan origins

Projek TacoTranslate mengandungi apa yang kami panggil origins. Anggap ia sebagai titik kemasukan, 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 bekas yang bermakna. Contohnya, anda boleh mempunyai satu origin untuk dokumentasi dan satu lagi untuk halaman pemasaran anda.

Untuk kawalan yang lebih terperinci, anda boleh menetapkan origins pada tahap 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 origins yang berbeza.

Akhirnya, cara anda memisahkan rentetan ke dalam asal-usul terpulang kepada anda dan keperluan anda. Walau bagaimanapun, perlu diingat bahawa mempunyai banyak rentetan dalam satu asal mungkin akan meningkatkan masa pemuatan.

Mengendalikan pembolehubah

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

Pembolehubah 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.

Penggunaan penonaktifan render HTML sangat disarankan apabila menterjemah kandungan yang tidak dipercayai, seperti kandungan yang dijana 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