Dokumentacija: Korištenje TacoTranslate

Korištenje TacoTranslate

Croatian

Prevođenje tekstova

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

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

import {Translate} from 'tacotranslate/react';

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

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

Upotreba useTranslation hooka.
Vraća prijevode kao običan niz znakova. 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 stringove 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 strojni prijevodi obično imaju nižu kvalitetu u usporedbi s našim AI prijevodima, oni pružaju brz početni odgovor.

Istovremeno pokrećemo asinhroni zadatak prevođenja kako bismo generirali visokokvalitetan, najmoderniji AI prijevod za vaš niz. Kada AI prijevod bude spreman, zamijenit će strojni prijevod i bit će poslan svaki put kada zatražite prijevode za vaše nizove.

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

Korištenje izvora

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

import {TacoTranslate} from 'tacotranslate/react';

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

Origins vam omogućuju razdvajanje tekstova u smislenije spremnike. Na primjer, možete imati jedan origin za dokumentaciju, a drugi za svoju 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 isti niz može imati različite prijevode u različitim izvorima.

U konačnici, način na koji razdvajate stringove u originima ovisi o vama i vašim potrebama. Imajte na umu da velika količina stringova unutar jednog origina može povećati vrijeme učitavanja.

Rukovanje varijablama

Uvijek biste trebali koristiti varijable za dinamički sadržaj, poput korisničkih imena, datuma, adresa e-pošte i slično.

Varijable u nizovima deklariraju se pomoću dvostrukih zagrada, kao što je {{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 renderira 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, poput sadržaja koji stvaraju 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 stringovi

Korištenje izvora

Rukovanje varijablama

Upravljanje HTML sadržajem