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 renderiranje HTML-a.

import {Translate} from 'tacotranslate/react';

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

Tip 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 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 alata.
Prevedite nizove na serverskoj strani. 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)
	};
}

Kada nizovi stignu na naše poslužitelje, prvo ih provjerimo i spremimo, zatim odmah vratimo strojni prijevod. Iako su strojni prijevodi općenito niže kvalitete u usporedbi s našim AI prijevodima, pružaju brz početni odgovor.

Istovremeno pokrećemo asinhroni zadatak prevođenja kako bismo generirali visokokvalitetan, vrhunski AI prijevod za vaš tekst. Kada je AI prijevod spreman, zamijenit će strojni prijevod i bit će poslan kad god zatražite prijevode za vaše tekstove.

Ako ste ručno preveli niz, te prijevode se smatra prioritetnima i oni se vraćaju umjesto toga.

Korištenje izvora

TacoTranslate projekti sadrže ono što nazivamo originima. 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 omogućuju da razdvojite stringove u smislenije kontejnere. Na primjer, možete imati jedan origin za dokumentaciju, a drugi za vašu marketinšku stranicu.

Za precizniju kontrolu možete postaviti origins na razini komponente.

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

Imajte na umu da isti tekst može dobiti različite prijevode u različitim prihodima.

U konačnici, način na koji razdvajate nizove u izvore ovisi o vama i vašim potrebama. Međutim, imajte na umu da imati mnogo nizova unutar jednog izvora može povećati vrijeme učitavanja.

Rukovanje varijablama

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

Varijable u nizovima se deklariraju koristeći dvostruke uglate zagrade, 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

Prema zadanim postavkama, Translate komponenta podržava i prikazuje HTML sadržaj. Međutim, možete se odjaviti od ovog ponašanja postavljanjem useDangerouslySetInnerHTML na false.

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

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.

Prikaz na strani poslužitelja

Korištenje TacoTranslate

Kako se prevode nizovi

Korištenje izvora

Rukovanje varijablama

Upravljanje HTML sadržajem