Dokumentacija: Korištenje TacoTranslate

Korištenje TacoTranslate

Bosnian

Prevođenje stringova

Trenutno postoje tri načina za prevođenje tekstova: 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, na primjer, promijeniti tip elementa pomoću 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 pomoćnog alata.
Prevodite stringove na serverskoj strani. 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 servere, prvo ih provjerimo i sačuvamo, a zatim odmah vraćamo mašinski prijevod. Iako su mašinski prijevodi općenito lošijeg kvaliteta u odnosu na naše AI prijevode, oni pružaju brz početni odgovor.

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

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

Korištenje izvora

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

import {TacoTranslate} from 'tacotranslate/react';

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

Porijekla vam omogućavaju da razdvojite tekstove u smislenije kontejnere. Na primjer, možete imati jedno porijeklo za dokumentaciju i drugo za vašu marketinšku stranicu.

Za precizniju kontrolu, možete postaviti izvore na nivou komponente.

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

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

U konačnici, način na koji razdvajate stringove u originima ovisi o vama i vašim potrebama. Međutim, imajte na umu da veliki broj stringova u jednoj origini može povećati vrijeme učitavanja.

Rukovanje varijablama

Uvijek biste trebali koristiti varijable za dinamički sadržaj, kao što su imena korisnika, datumi, adrese e-pošte i slično.

Varijable u stringovima se deklariraju pomoću dvostrukih 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 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, kao što je sadržaj koji stvaraju korisnici.

Sav izlaz se uvijek sanitizira pomoću sanitize-html prije prikazivanja.

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 će biti prikazan kao običan tekst.

Renderiranje na serverskoj strani

Korištenje TacoTranslate

Kako se stringovi prevode

Korištenje izvora

Rukovanje varijablama

Upravljanje HTML sadržajem