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

Paggamit ng Translate na komponento.
Naglalabas ng mga pagsasalin sa loob ng isang span elemento, at sumusuporta sa 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, ang as="p" sa komponent.

Paggamit ng useTranslation hook.
Ibinabalik nito ang mga pagsasalin bilang isang simpleng string. Kapaki-pakinabang ito, 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. 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 naabot ng mga string ang aming mga server, unang sinusuri at iniimbak namin ang mga ito, pagkatapos ay agad naming ibinabalik ang isang awtomatikong pagsasalin. Bagaman ang mga awtomatikong pagsasalin ay karaniwang mas mababa ang kalidad 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 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 sa tuwing hihilingin mo ang mga pagsasalin para sa iyong mga string.

Kung manu-mano mong isinalin ang isang string, inuuna ang mga pagsasaling iyon at ang mga iyon ang ibinabalik.

Paggamit ng mga pinagmulan

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

import {TacoTranslate} from 'tacotranslate/react';

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

Pinahihintulutan ka ng Origins 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 pinong kontrol, maaari mong itakda ang mga origins sa antas ng component.

Upang makamit 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, kung paano mo paghihiwalayin ang mga string sa mga origin ay nasa 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 pag-load.

Pangangasiwa ng mga variable

Dapat mong laging gumamit ng mga variable para sa dinamikong nilalaman, tulad ng mga pangalan ng gumagamit, mga petsa, mga address ng e-mail, 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 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.

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

Lahat ng output ay palaging 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