Dokumentasyon: Paggamit ng TacoTranslate

Paggamit ng TacoTranslate

Filipino (Tagalog)

Pagsasalin ng mga string

Sa kasalukuyan, mayroong tatlong paraan upang isalin ang mga string: Ang Translate na component, ang useTranslation na hook, o ang translateEntries na utility.

Paggamit ng Translate na komponent.
Ipinapakita ang mga salin sa loob ng isang span na elemento, at sinusuportahan ang pag-render ng HTML.

import {Translate} from 'tacotranslate/react';

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

Maaari mong baguhin ang uri ng elemento gamit, halimbawa, as="p" sa component.

Paggamit ng useTranslation hook.
Nagbabalik ng mga salin bilang simpleng string. Kapaki-pakinabang sa, halimbawa, meta tags.

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>
	);
}

Paggamit ng translateEntries utility.
I-translate ang mga string sa server side. Palakasin ang iyong mga OpenGraph na larawan.

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)
	};
}

Paano isinasalin ang mga string

Kapag naabot ng mga string ang aming mga server, una naming sinusuri at ini-save ang mga ito, pagkatapos ay agad na ibinabalik ang isang machine translation. Bagaman ang mga machine translation ay karaniwang mas mababa ang kalidad kumpara sa aming AI translation, nagbibigay ang mga ito ng mabilis na paunang tugon.

Kasabay nito, sinisimulan namin ang isang asynchronous na gawain sa pagsasalin upang makabuo ng mataas na kalidad, makabago at makabagong AI na pagsasalin para sa iyong mga string. Kapag handa na ang AI na pagsasalin, ito ay papalitan ang machine translation at ipapadala sa tuwing hihilingin mo ang mga pagsasalin para sa iyong mga string.

Kung ikaw ay manu-manong nagsalin ng isang string, ang mga salin na iyon ang mauuna at ibabalik bilang kapalit.

Pagsasamantala sa mga pinagmulang lokasyon

Ang mga proyekto ng TacoTranslate ay naglalaman ng tinatawag naming origins. Isipin mo ito bilang mga entry points, folder, o grupo para sa iyong mga string at mga pagsasalin.

import {TacoTranslate} from 'tacotranslate/react';

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

Pinapahintulutan ka ng Origins na paghiwalayin ang mga string sa makabuluhang mga lalagyan. Halimbawa, maaari kang magkaroon ng isang origin para sa dokumentasyon at isa pa para sa iyong pahina ng marketing.

Para sa mas detalyadong kontrol, maaari kang mag-set up ng mga origin sa antas ng component.

Upang makamit ito, isaalang-alang ang paggamit ng maramihang TacoTranslate providers sa loob ng iyong proyekto.

Pakitandaan na ang parehong string ay maaaring makatanggap ng iba't ibang mga pagsasalin sa iba't ibang mga origin.

Sa huli, kung paano mo paghahatiin ang mga string sa mga origin ay nasa sa iyo at sa iyong mga pangangailangan. Gayunpaman, tandaan na ang pagkakaroon ng maraming string sa loob ng isang origin ay maaaring magpataas ng oras ng pag-load.

Pag-handle ng mga variable

Dapat palaging gumamit ng mga variable para sa dynamic na nilalaman, tulad ng mga pangalan ng gumagamit, petsa, mga e-mail address, at iba pa.

Ang mga variable sa mga string ay dineklara gamit ang dobleng panaklong, tulad ng {{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}});
}

Pamamahala ng nilalamang HTML

Sa default, sinusuportahan at nire-render ng Translate na component ang HTML na nilalaman. Gayunpaman, maaari mong i-disable ang pag-uugaling ito sa pamamagitan ng pagtatakda ng useDangerouslySetInnerHTML sa false.

Lubos na inirerekomenda ang pag-disable ng HTML rendering kapag nagsasalin ng hindi pinagkakatiwalaang nilalaman, tulad ng nilikhang nilalaman ng user.

Lahat ng output ay palaging nililinis gamit ang sanitize-html bago ipakita.

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}
		/>
	);
}

Ang halimbawa sa itaas ay ipapakita bilang simpleng teksto.

Pagseserbisyo ng server-side rendering