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 translateEntries alatka.

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

Korišćenje translateEntries utilitija.
Prevedite stringove na serverskoj strani. Supernapajajte 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 validiramo i sačuvamo, potom odmah vraćamo mašinski prevod. Iako su mašinski prevodi generalno 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 kako bismo generisali visokokvalitetan, najsavremeniji AI prevod za vaš string. Kada AI prevod bude spreman, zameniće mašinski prevod i biće poslat svaki put kada zatražite prevode za vaše stringove.

Ako ste ručno preveli string, ti prevodi imaju prioritet i umesto toga se vraćaju.

Korišćenje origina

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

import {TacoTranslate} from 'tacotranslate/react';

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

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

Za precizniju kontrolu, možete podesiti origin-e na nivou komponenti.

Da biste to postigli, razmotrite korišćenje više TacoTranslate provajdera u okviru vašeg projekta.

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

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

Rukovanje promenljivim

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

Promenljive u nizovima se deklarišu korišćenjem 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 podešavanjem vrednosti 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}
		/>
	);
}

Gore navedeni primer biće prikazan kao običan tekst.

Renderovanje na serverskoj strani

Korišćenje TacoTranslate

Kako se prevode nizovi

Korišćenje origina

Rukovanje promenljivim

Upravljanje HTML sadržajem