Dokumentasyon: Paggamit ng TacoTranslate

Paggamit ng TacoTranslate

Filipino (Tagalog)

Pagsasalin ng mga string

Sa kasalukuyan, may tatlong paraan upang isalin ang mga string: Ang Translate komponente, ang useTranslation hook, o ang translateEntries utility.

Paggamit ng Translate na komponent.
Naglalabas ng mga pagsasalin 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, halimbawa gamit ang as="p" sa komponent.

Paggamit ng hook na useTranslation.
Nagbabalik ng mga pagsasalin bilang isang simpleng string. Kapaki-pakinabang, halimbawa, sa mga tag na 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>
	);
}

Paggamit ng utility na translateEntries.
Isalin ang mga string sa server-side. Palakasin ang iyong mga OpenGraph imahe.

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 dumating ang mga string sa aming mga server, una naming beripikahin at i-save ang mga ito, at agad naming ibabalik ang isang pagsasalin ng makina. Bagaman karaniwang mas mababa ang kalidad ng mga pagsasalin ng makina kumpara sa aming mga AI na pagsasalin, 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, makabagong AI na pagsasalin para sa iyong string. Kapag handa na ang AI na pagsasalin, papalitan nito ang awtomatikong pagsasalin at ipapadala tuwing hihilingin mo ang mga pagsasalin para sa iyong mga string.

Kung mano-manong isinalin mo ang isang string, mauuna ang mga salin na iyon at sila ang ibabalik.

Paggamit ng mga pinagmulan

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

import {TacoTranslate} from 'tacotranslate/react';

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

Pinapayagan ng Origins na paghatiin 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 mong itakda ang mga origins sa antas ng komponento.

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

Pakitandaan na ang parehong string ay maaaring magkaroon ng magkakaibang pagsasalin sa iba't ibang pinagmulan.

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

Paghawak ng mga variable

Dapat mong laging gumamit ng mga variable para sa dinamikong nilalaman, tulad ng mga pangalan ng gumagamit, mga petsa, mga email address, at iba pa.

Idineklara ang mga variable sa mga string gamit ang dobleng bracket, 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 nilalaman ng HTML

Bilang default, sinusuportahan at nirender ng Translate component ang nilalaman ng HTML. Gayunpaman, maaari mong piliing huwag paganahin ang pag-uugaling ito sa pamamagitan ng pagtatakda ng useDangerouslySetInnerHTML sa false.

Lubos na inirerekomenda na huwag paganahin ang pag-render ng HTML kapag isinasalin ang hindi pinagkakatiwalaang nilalaman, tulad ng nilikhang nilalaman ng mga gumagamit.

Lahat ng output ay laging nililinis gamit ang sanitize-html bago ito 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 payak na teksto.

Pag-render sa server