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 component, ang useTranslation hook, o ang translateEntries utility.

Paggamit ng Translate na component.
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!" />;
}

Halimbawa, maaari mong baguhin ang uri ng elemento gamit ang as="p" sa komponent.

Paggamit ng useTranslation hook.
Nagbabalik ng mga pagsasalin bilang isang simpleng string. Kapaki-pakinabang, halimbawa, sa mga meta tag.

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 kagamitang translateEntries.
Isalin ang mga string sa panig ng server. Palakasin ang iyong mga larawan ng OpenGraph.

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, unang sinusuri at iniimbak namin ang mga ito, pagkatapos ay agad naming ibinabalik ang isang awtomatikong pagsasalin. Bagaman karaniwang mas mababa ang kalidad ng mga awtomatikong pagsasalin kumpara sa aming mga pagsasalin ng AI, nagbibigay ang mga ito ng mabilis na paunang tugon.

Kasabay nito, sinisimulan namin ang isang asynchronous na trabaho ng pagsasalin upang makabuo ng mataas na kalidad at makabagong AI na pagsasalin para sa iyong string. Kapag handa na ang AI na pagsasalin, papalitan nito ang pagsasaling-makina at ipapadala sa tuwing humihiling ka ng mga pagsasalin para sa iyong mga string.

Kung manu-manong isinalin mo ang isang string, mauuna ang mga pagsasaling iyon at iyon ang ibabalik.

Paggamit ng mga origin

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

import {TacoTranslate} from 'tacotranslate/react';

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

Ang mga pinagmulan ay nagpapahintulot sa iyo na paghiwalayin ang mga string sa mga makabuluhang lalagyan. Halimbawa, maaari kang magkaroon ng isang pinagmulan para sa dokumentasyon at isa pa para sa iyong pahina ng marketing.

Para sa mas detalyadong kontrol, maaari mong i-set up ang origins sa antas ng component.

Upang magawa ito, isaalang-alang ang paggamit ng maraming TacoTranslate provider sa loob ng 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 kung paano mo hahatiin ang mga string sa mga origin. Gayunpaman, tandaan na ang pagkakaroon ng maraming string sa loob ng isang origin ay maaaring magpataas 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 e-mail address, at iba pa.

Ang mga variable sa mga string ay dinideklara 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 ini-render ng Translate komponent ang nilalamang HTML. Gayunpaman, maaari mong huwag paganahin ang pag-uugaling ito sa pamamagitan ng pagtatakda ng useDangerouslySetInnerHTML sa false.

Lubhang inirerekomenda na huwag paganahin ang pag-render ng HTML kapag isinasalin ang hindi mapagkakatiwalaang nilalaman, tulad ng nilalaman na ginawa ng mga gumagamit.

Lahat ng output ay palaging nililinis gamit ang sanitize-html bago ito i-render.

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