Dokumentacija: Korištenje TacoTranslate

Korištenje TacoTranslate

Croatian

Prevođenje stringova

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

Korištenje Translate komponente.
Ispisuje prijevode unutar span elementa i podržava renderiranje HTML-a.

import {Translate} from 'tacotranslate/react';

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

Možete promijeniti tip elementa, na primjer, pomoću as="p" na komponenti.

Korištenje useTranslation hooka.
Vraća prijevode kao običan niz. Koristan je, 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 pomoćnog alata translateEntries.
Prevodi tekstove 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 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 niže kvalitete u usporedbi s našim AI prijevodima, pružaju brz početni odgovor.

Istovremeno pokrećemo asinkroni zadatak prevođenja kako bismo generirali visokokvalitetan, najsuvremeniji AI prijevod za vaš niz. Kada je AI prijevod spreman, zamijenit će strojni prijevod i bit će poslan kad god zatražite prijevode svojih nizova.

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

Korištenje izvora

TacoTranslate projekti sadrže ono što nazivamo porijeklima. Smatrajte ih ulaznim točkama, mapama ili grupama za vaše tekstove i prijevode.

import {TacoTranslate} from 'tacotranslate/react';

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

Porijekla vam omogućuju razdvajanje stringova u smislene kontejnere. Na primjer, možete imati jedno porijeklo za dokumentaciju i drugo za vašu marketinšku stranicu.

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

Da biste to postigli, razmislite o korištenju više TacoTranslate pružatelja u vašem projektu.

Imajte na umu da se isti niz može različito prevesti u različitim originima.

U konačnici, način na koji raspoređujete nizove po izvorima 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 stringovima deklariraju se pomoću dvostrukih vitičastih zagrada, 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, komponenta Translate podržava i prikazuje HTML sadržaj. Međutim, možete onemogućiti ovo ponašanje postavljanjem useDangerouslySetInnerHTML na false.

Snažno se preporučuje onemogućiti prikaz/renderiranje HTML-a pri prevođenju nepouzdanog sadržaja, poput sadržaja koji su stvorili 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 stringovi prevode

Korištenje izvora

Rukovanje varijablama

Upravljanje HTML sadržajem