Dokumentacija: Korištenje TacoTranslate

Korištenje TacoTranslate

Croatian

Prevođenje nizova

Trenutno postoje tri načina za prevođenje nizova: komponenta Translate, kuka useTranslation ili uslužni program 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!" />;
}

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

Korištenje useTranslation hooka.
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 pomoćnog alata.
Prevedite nizove na strani poslužitelja. Pojač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)
	};
}

Kad nizovi stignu na naše poslužitelje, prvo ih provjeravamo i spremamo, 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 brzi početni odgovor.

Istovremeno pokrećemo asinkroni zadatak prevođenja kako bismo generirali visokokvalitetni, vrhunski AI prijevod za vaš niz. Kada AI prijevod bude spreman, zamijenit će strojni prijevod i bit će poslan kad god zatražite prijevode za vaše nizove.

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

Korištenje izvora

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

import {TacoTranslate} from 'tacotranslate/react';

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

Origins vam dopuštaju da razdvojite nizove u smislenije kontejnere. Na primjer, mogli biste imati jedan origin za dokumentaciju i drugi za vašu marketinšku stranicu.

Za detaljniju kontrolu, možete postaviti izvore na razini komponenti.

Da biste to postigli, razmotrite korištenje više TacoTranslate pružatelja usluga unutar vašeg projekta.

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

Na kraju, način na koji razdvajate nizove u origini ovisi o vama i vašim potrebama. Međutim, imajte na umu da veći broj nizova unutar jedne origine 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 deklariraju se 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 defaultu, komponenta Translate podržava i prikazuje HTML sadržaj. Međutim, možete odustati od ovog ponašanja postavljanjem useDangerouslySetInnerHTML na false.

Isključivanje prikaza HTML-a se snažno preporučuje prilikom prevođenja nepouzdanog sadržaja, poput sadržaja koji korisnici kreiraju.

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

Prikaz na strani poslužitelja

Korištenje TacoTranslate

Kako se prevode nizovi

Korištenje izvora

Rukovanje varijablama

Upravljanje HTML sadržajem