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.
Izlaz prevoda 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 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)
	};
}

Kada 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 brz početni odgovor.

Istovremeno započinjemo asinkroni zadatak prevođenja kako bismo generirali visokokvalitetan, vrhunski AI prijevod za vaš tekst. Kada AI prijevod bude spreman, zamijenit će strojni prijevod i bit će poslan svaki put kada zatražite prijevode za vaše tekstove.

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

Korištenje izvora

TacoTranslate projekti sadrže ono što nazivamo izvori. 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 cjeline. Na primjer, možete imati jedan origin za dokumentaciju, a drugi za vašu marketinšku stranicu.

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

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

Molimo imajte na umu da ista tekstualna jedinica može dobiti različite prijevode u različitim izvorima.

Na kraju, način na koji odvajate nizove u izvore ovisi o vama i vašim potrebama. Ipak, imajte na umu da veći broj nizova unutar jednog izvora može povećati vrijeme učitavanja.

Rukovanje varijablama

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

Varijable u nizovima deklariraju se pomoću dvostrukih vitičastih 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

U zadanim postavkama, Translate komponenta podržava i prikazuje HTML sadržaj. Međutim, možete onemogućiti ovu funkcionalnost postavljanjem useDangerouslySetInnerHTML na false.

Onemogućavanje prikaza HTML-a toplo se preporučuje pri prevođenju nepouzdanog sadržaja, kao što je sadržaj koji generiraju korisnici.

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.

Renderiranje na strani poslužitelja

Korištenje TacoTranslate

Kako se prevode nizovi

Korištenje izvora

Rukovanje varijablama

Upravljanje HTML sadržajem