Dokumentacija: Korištenje TacoTranslate

Korištenje TacoTranslate

Croatian

Prevođenje stringova

Trenutačno postoje tri načina za prevođenje nizova: komponenta Translate, hook useTranslation, ili pomoćna funkcija translateEntries.

Korištenje Translate komponente.
Ispisuje 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 vrstu elementa koristeći, na primjer, as="p" na komponenti.

Korištenje useTranslation hooka.
Vraća prijevode kao običan string. 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.
Prevodite nizove na strani poslužitelja. Poboljš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 stringovi stignu na naše poslužitelje, prvo ih provjerimo i spremimo, a zatim odmah vraćamo strojni prijevod. Iako su strojni prijevodi općenito manje kvalitetni u usporedbi s našim AI prijevodima, oni pružaju brz početni odgovor.

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

Ako ste string ručno preveli, ti prijevodi imaju prednost i bit će vraćeni umjesto toga.

Korištenje izvora

TacoTranslate projekti sadrže ono što nazivamo origins. Smatrajte ih ulaznim točkama, mapama ili skupinama za vaše stringove i prijevode.

import {TacoTranslate} from 'tacotranslate/react';

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

Izvori vam omogućuju da odvojite nizove u smislene kontejnere. Na primjer, možete imati jedan izvor za dokumentaciju i drugi za svoju marketinšku stranicu.

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

Da biste to postigli, razmotrite korištenje više TacoTranslate providera u vašem projektu.

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

U konačnici, kako raspodijelite tekstove po izvorima ovisi o vama i vašim potrebama. Međutim, imajte na umu da veliki broj tekstova u jednom izvoru 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 stringovima deklariraju se pomoću dvostrukih vitičastih zagrada, npr. {{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, komponenta Translate podržava i prikazuje HTML sadržaj. Međutim, ovo ponašanje možete onemogućiti postavljanjem useDangerouslySetInnerHTML na false.

Snažno se preporučuje onemogućiti prikaz HTML-a pri prevođenju nepouzdanog sadržaja, kao što je sadržaj koji stvaraju korisnici.

Sav izlaz se uvijek sanitizira pomoću sanitize-html prije nego što se prikaže.

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 stringovi

Korištenje izvora

Rukovanje varijablama

Upravljanje HTML sadržajem