Dokumentacija: Korištenje TacoTranslate

Korištenje TacoTranslate

Croatian

Prevođenje nizova

Trenutno postoje tri načina za prevođenje nizova: 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 hooka.
Vraća prijevode kao običan tekst. Korisno, na primjer, 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štenje translateEntries pomoćnog alata.
Prevedite stringove na strani poslužitelja. Unaprijedite 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 tekstovi stignu na naše poslužitelje, prvo ih validiramo i spremamo, a zatim odmah vraćamo strojni prijevod. Iako su strojni prijevodi općenito niže kvalitete u usporedbi s našim AI prijevodima, oni pružaju brz početni odgovor.

Istovremeno pokrećemo asinkroni prijevodni zadatak za generiranje visokokvalitetnog, najsuvremenijeg AI prijevoda vašeg retka. Kad AI prijevod bude spreman, zamijenit će strojni prijevod i bit će poslan kad god zatražite prijevode za svoje retke.

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

Korištenje origina

Projekti TacoTranslate sadrže ono što nazivamo podrijetlima. Razmislite o njima kao o ulaznim točkama, mapama ili grupama za vaše nizove i prijevode.

import {TacoTranslate} from 'tacotranslate/react';

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

Origini vam omogućuju da odvojite nizove u smislenije kontejnere. Na primjer, mogli biste imati jednu origin za dokumentaciju, a drugu za vašu marketinšku stranicu.

Za detaljniju kontrolu, možete postaviti originse na razini komponente.

Za postizanje toga, razmotrite korištenje više TacoTranslate pružatelja usluga unutar vašeg projekta.

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

Na kraju, kako ćete razvrstati nizove u izvore ovisi o vama i vašim potrebama. Međutim, imajte na umu da veliki broj nizova u jednom izvoru može povećati vrijeme učitavanja.

Rukovanje varijablama

Uvijek biste trebali koristiti varijable za dinamički sadržaj, poput korisničkih imena, datuma, e-mail adresa i slično.

Varijable u nizovima se deklariraju korištenjem dvostrukih zagrada, 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 zadanom, Translate komponenta podržava i prikazuje HTML sadržaj. Međutim, možete isključiti ovo ponašanje postavljanjem vrijednosti useDangerouslySetInnerHTML na false.

Onemogućavanje prikaza HTML-a snažno se preporučuje prilikom prevođenja nepouzdanog sadržaja, poput sadržaja koji stvaraju korisnici.

Sav izlaz uvijek se filtrira 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 će primjer biti prikazan kao običan tekst.

Rendering na strani poslužitelja

Korištenje TacoTranslate

Kako se prevode nizovi

Korištenje origina

Rukovanje varijablama

Upravljanje HTML sadržajem