Dokumentacija: Korišćenje TacoTranslate

Korišćenje TacoTranslate

Serbian

Prevođenje stringova

Trenutno postoje tri načina za prevođenje stringova: komponenta Translate, hook useTranslation, ili alat translateEntries.

Korišćenje Translate komponente.
Prikazuje prevode unutar span elementa i podržava renderovanje HTML-a.

import {Translate} from 'tacotranslate/react';

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

Vrstu elementa možete promeniti, na primer, koristeći as="p" na komponenti.

Korišćenje useTranslation hook-a.
Vraća prevode kao običan string. Korisno je, na primer, u meta tagovima.

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

Korišćenje utiliteta translateEntries.
Prevodite stringove na serverskoj strani. Unapredite vaše OpenGraph slike.

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

Kada stringovi stignu na naše servere, prvo ih validiramo i sačuvamo, a zatim odmah vraćamo mašinski prevod. Iako su mašinski prevodi generalno nižeg kvaliteta u poređenju sa našim AI prevodima, oni obezbeđuju brz početni odgovor.

Istovremeno pokrećemo asinhroni zadatak prevođenja kako bismo generisali visokokvalitetan, najsavremeniji AI prevod za vaš tekst. Kada AI prevod bude spreman, zameniće mašinski prevod i biće poslat svaki put kada zatražite prevode za svoje tekstove.

Ako ste ručno preveli string, ti prevodi imaju prioritet i biće vraćeni.

Korišćenje origin-a

TacoTranslate projekti sadrže ono što mi nazivamo origins. Smatrajte ih ulaznim tačkama, mapama ili grupama za vaše stringove i prevode.

import {TacoTranslate} from 'tacotranslate/react';

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

Origins vam omogućavaju da razdvojite stringove u smislene kontejnere. Na primer, mogli biste imati jedan origin za dokumentaciju i drugi za vašu marketinšku stranicu.

Za detaljniju kontrolu, možete da podesite izvore na nivou komponente.

Da biste to postigli, razmislite o korišćenju više TacoTranslate provajdera u okviru vašeg projekta.

Imajte na umu da isti string može imati različite prevode u različitim originima.

Na kraju, način na koji razdvajate tekstove u originima zavisi od vas i vaših potreba. Imajte na umu da veliki broj tekstova u jednom originu može povećati vreme učitavanja.

Rukovanje promenljivima

Uvek treba da koristite varijable za dinamički sadržaj, kao što su korisnička imena, datumi, adrese e-pošte i slično.

Promenljive u stringovima se deklarišu pomoću dvostrukih zagrada, kao {{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}});
}

Upravljanje HTML sadržajem

Podrazumevano, Translate komponenta podržava i prikazuje HTML sadržaj. Međutim, možete isključiti ovo ponašanje postavljanjem useDangerouslySetInnerHTML na false.

Snažno se preporučuje onemogućavanje renderovanja HTML-a prilikom prevođenja nepouzdanog sadržaja, kao što je sadržaj koji generišu korisnici.

Sav izlaz se uvek sanitizuje pomoću sanitize-html pre nego što se prikaže.

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

Gornji primer biće prikazan kao običan tekst.

Renderovanje na serverskoj strani

Korišćenje TacoTranslate

Kako se prevode stringovi

Korišćenje origin-a

Rukovanje promenljivima

Upravljanje HTML sadržajem