Dokumentacija: Korištenje TacoTranslate

Korištenje TacoTranslate

Bosnian

Prevođenje nizova

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

Korištenje Translate komponente.
Prikazuje prijevode unutar span elementa, i podržava prikaz HTML-a.

import {Translate} from 'tacotranslate/react';

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

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

Korištenje useTranslation hook-a.
Vraća prijevode kao običan tekst. Korisno, na primjer, u meta oznakama.

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štenje translateEntries utility-ja.
Prevodi stringove na serverskoj strani. Dajte dodatnu snagu svojim OpenGraph slikama.

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 tekstovi stignu na naše servere, prvo ih validiramo i sačuvamo, a zatim odmah vraćamo mašinski prijevod. Iako su mašinski prijevodi generalno nižeg kvaliteta u poređenju sa našim AI prijevodima, oni pružaju brz početni odgovor.

Istovremeno, pokrećemo asinhroni posao prevođenja kako bismo generisali visokokvalitetan, najsavremeniji AI prevod za vaš string. Kada AI prijevod bude spreman, zamijenit će mašinski prijevod i bit će poslan svaki put kada zatražite prijevode za svoje stringove.

Ako ste ručno preveli niz, ti prijevodi imaju prioritet i vraćaju se umjesto toga.

Korištenje 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 razdvojite stringove u smislene kontejnere. Na primjer, mogli biste imati jedan origin za dokumentaciju, a drugi za vašu marketinšku stranicu.

Za detaljniju kontrolu, možete postaviti originse na nivou komponenti.

Da biste to postigli, razmotrite korištenje više TacoTranslate provajdera unutar vašeg projekta.

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

Na kraju, način na koji razdvajate stringove u origini zavisi od vas i vaših potreba. Međutim, imajte na umu da veći broj stringova unutar jedne origine može povećati vrijeme učitavanja.

Rukovanje varijablama

Uvijek biste trebali koristiti varijable za dinamički sadržaj, kao što su imena korisnika, datumi, e-mail adrese i slično.

Varijable u stringovima se deklariraju koristeći dvostruke vitičaste zagrade, poput {{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 prikazuje HTML sadržaj. Međutim, možete isključiti ovo ponašanje postavljanjem useDangerouslySetInnerHTML na false.

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

Sav sav izlaz se uvijek sanitizira pomoću sanitize-html prije prikaza.

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

Renderovanje na strani servera

Korištenje TacoTranslate

Kako se stringovi prevode

Korištenje izvora

Rukovanje varijablama

Upravljanje HTML sadržajem