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 komponent.
Naglalabas ng 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!" />;
}

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

Paggamit ng hook na useTranslation.
Nagbabalik ng mga pagsasalin bilang 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 kagamitang translateEntries.
Isalin ang mga string sa panig ng server. Pahusayin nang malaki ang iyong OpenGraph na mga 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, sinusuri at iniimbak muna namin ang mga ito, at agad naming ibinabalik ang isang pagsasaling makina. Bagaman karaniwang mas mababa ang kalidad ng mga pagsasaling makina kumpara sa aming mga AI na pagsasalin, nagbibigay ang mga ito ng mabilis na paunang tugon.

Kasabay nito, nagsisimula kami ng isang asinkronong trabaho sa pagsasalin upang makabuo ng mataas na kalidad, makabagong pagsasaling AI para sa iyong string. Kapag handa na ang pagsasaling AI, papalitan nito ang pagsasalin ng makina at ipapadala tuwing hihilingin mo ang 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 pinagmulan

Ang mga proyekto ng TacoTranslate ay naglalaman ng tinatawag naming origins. Isipin ang mga ito bilang mga panimulang punto, 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 ka ng mga origin na paghiwalayin ang mga string sa mga makabuluhang 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 origins sa antas ng component.

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

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

Sa huli, kung paano mo paghihiwalayin ang mga string sa mga origin ay nakasalalay sa iyo at sa iyong mga pangangailangan. Gayunpaman, tandaan na ang pagkakaroon ng maraming string sa loob ng isang origin ay maaaring magpahaba ng oras ng paglo-load.

Paghawak 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 dinideklara 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 nilalaman ng HTML

Bilang default, sinusuportahan at nire-render ng Translate na component ang nilalamang 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 nagsasalin ng hindi mapagkakatiwalaang nilalaman, tulad ng mga nilalamang ginawa ng mga gumagamit.

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 payak na teksto.

Pag-render sa server