Dokumentacija: Korišćenje TacoTranslate

Korišćenje TacoTranslate

Serbian

Prevođenje nizova

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

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

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

Korišćenje useTranslation hook-a.
Vraća prevode kao običan tekst. 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>
	);
}

Koristeći translateEntries alat.
Prevodi stringove na serverskoj strani. Poboljšajte 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 nizovi stignu na naše servere, prvo ih validiramo i sačuvamo, zatim odmah vraćamo mašinski prevod. Iako su mašinski prevodi uglavnom lošijeg kvaliteta u poređenju sa našim AI prevodima, oni pružaju brzu početnu reakciju.

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

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

Korišćenje izvora

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

import {TacoTranslate} from 'tacotranslate/react';

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

Origins vam omogućavaju da odvojite stringove u smisleno organizovane kontejnere. Na primer, možete imati jedan origin za dokumentaciju i drugi za vašu marketinšku stranicu.

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

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 dobiti različita prevoda u različitim originima.

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

Rukovanje promenljivim

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

Varijable u stringovima se deklarišu upotrebom dvostrukih zagrada, kao što je {{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

Po defaultu, Translate komponenta podržava i renderuje HTML sadržaj. Međutim, možete isključiti ovo ponašanje tako što ćete podesiti useDangerouslySetInnerHTML na false.

Isključivanje prikaza HTML-a se toplo preporučuje prilikom prevođenja nepouzdanog sadržaja, kao što je sadržaj koji generišu korisnici.

Sav izlaz je uvek očišćen pomoću sanitize-html pre prikazivanja.

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 će biti prikazan kao običan tekst.

Rendering sa serverske strane

Korišćenje TacoTranslate

Kako se prevode stringovi

Korišćenje izvora

Rukovanje promenljivim

Upravljanje HTML sadržajem