Dokumentacija: Korištenje TacoTranslatea

Korištenje TacoTranslatea

Croatian

Prevođenje nizova

Trenutno postoje tri načina za prevođenje stringova: komponenta Translate, hook useTranslation, ili pomoćna funkcija 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!" />;
}

Možete promijeniti vrstu elementa, na primjer, koristeći as="p" na komponenti.

Korištenje useTranslation hooka.
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 pomoćnog alata translateEntries.
Prevedite stringove 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 stringovi stignu na naše poslužitelje, najprije ih provjerimo i pohranimo, a 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.

Istodobno pokrećemo asinkroni zadatak prevođenja kako bismo za vaš tekst generirali visokokvalitetan, najmoderniji 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 ručno preveli tekst, ti prijevodi imaju prednost i umjesto toga se vraćaju.

Korištenje izvora

TacoTranslate projekti sadrže ono što nazivamo izvorima. 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>
	);
}

Izvori vam omogućuju da razdvojite stringove u smislenije cjeline. Na primjer, možete imati jedan izvor za dokumentaciju i drugi za vašu marketinšku stranicu.

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

Da biste to postigli, razmislite o korištenju više TacoTranslate pružatelja unutar vašeg projekta.

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

U konačnici, kako razdvajate nizove u originima ovisi o vama i vašim potrebama. Međutim, imajte na umu da velik broj nizova u jednom originu 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 stringovima deklariraju se pomoću dvostrukih 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

Po zadanim postavkama, Translate komponenta podržava i renderira HTML sadržaj. Međutim, možete isključiti ovo ponašanje postavljanjem useDangerouslySetInnerHTML na false.

Snažno se preporučuje onemogućiti prikaz HTML-a prilikom prevođenja nepouzdanog sadržaja, poput sadržaja 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 TacoTranslatea

Kako se prevode stringovi

Korištenje izvora

Rukovanje varijablama

Upravljanje HTML sadržajem