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 funkcija 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!" />;
}

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

Korišćenje useTranslation hook-a.
Vraća prevode kao običan string. Korisno, 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 translateEntries alata.
Prevodite stringove na serverskoj strani. Unapredite svoje 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 validujemo i sačuvamo, a zatim odmah vraćamo mašinski prevod. Iako su mašinski prevodi obično nižeg kvaliteta u poređenju sa našim AI prevodima, oni pružaju brz početni odgovor.

Istovremeno, pokrećemo asinhroni zadatak prevođenja da bismo generisali visokokvalitetan, najsavremeniji AI prevod za vaš tekst. Kada AI prevod bude spreman, on će zameniti mašinski prevod i biće poslat kad god zatražite prevode za svoje tekstove.

Ako ste neki string ručno preveli, ti prevodi imaju prednost i biće vraćeni umesto toga.

Korišćenje origin-a

TacoTranslate projekti sadrže ono što nazivamo origins. Posmatrajte ih kao ulazne tačke, foldere ili grupe za vaše tekstove i prevode.

import {TacoTranslate} from 'tacotranslate/react';

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

Porekla vam omogućavaju da razdvojite tekstove u smislenije kontejnere. Na primer, možete imati jedno poreklo za dokumentaciju i drugo za vašu marketinšku stranicu.

Za detaljniju kontrolu, možete podesiti origins na nivou komponente.

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

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

Na kraju, kako ćete podeliti stringove u okviru origins-a zavisi od vas i vaših potreba. Međutim, imajte na umu da veliki broj stringova unutar jednog origins-a može povećati vreme učitavanja.

Rukovanje promenljivima

Uvek treba koristiti promenljive za dinamički sadržaj, kao što su korisnička imena, datumi, e‑mail adrese i slično.

Promenljive u stringovima se deklarišu koristeći dvostruke vitičaste zagrade, 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, komponenta Translate podržava i prikazuje HTML sadržaj. Međutim, možete isključiti ovo ponašanje tako što ćete postaviti useDangerouslySetInnerHTML na false.

Snažno se preporučuje onemogućavanje renderovanja HTML-a pri prevođenju nepouzdanog sadržaja, kao što je sadržaj koji kreiraju 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