Dokumentacija: Korištenje TacoTranslate

Korištenje TacoTranslate

Croatian

Prevođenje nizova

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

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

import {Translate} from 'tacotranslate/react';

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

Vrstu elementa možete promijeniti 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.
Prevodi stringove na strani servera. 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 nizovi stignu na naše poslužitelje, prvo ih provjerimo i spremimo, a zatim odmah vratimo strojni prijevod. Iako su strojni prijevodi općenito slabije kvalitete 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 kad zatražite prijevode za vaše nizove.

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

Korištenje izvora

TacoTranslate projekti sadrže ono što naziva 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 da razdvojite nizove u smislene kontejnere. Na primjer, možete imati jedan origin za dokumentaciju, a drugi za vašu marketinšku stranicu.

Za precizniju kontrolu, možete postaviti originse na razini komponenti.

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

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

U konačnici, način na koji razdvajate nizove u izvore ovisi o vama i vašim potrebama. Međutim, imajte na umu da veliki 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 korisničkih imena, datuma, e-mail adresa i slično.

Varijable u nizovima deklariraju se pomoću dvostrukih zagrada, kao što su {{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 se odjaviti od ovog ponašanja postavljanjem vrijednosti useDangerouslySetInnerHTML na false.

Onemogućavanje prikaza HTML-a snažno se preporučuje pri prevođenju nepouzdanog sadržaja, poput sadržaja koji stvaraju korisnici.

Sav izlaz uvijek se 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.

Rendering na strani poslužitelja

Korištenje TacoTranslate

Kako se prevode nizovi

Korištenje izvora

Rukovanje varijablama

Upravljanje HTML sadržajem