Dokumentacija: Korištenje TacoTranslate

Korištenje TacoTranslate

Bosnian

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.
Prikazuje 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 koristeći, na primjer, as="p" na komponenti.

Korištenje useTranslation hooka.
Vraća prijevode kao običan tekstualni niz. Koristan je, 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 alata.
Prevodi nizove na serverskoj strani. 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 tekstovi stignu na naše servere, prvo ih provjeravamo i spremimo, a zatim odmah vraćamo mašinski prijevod. Iako su mašinski prijevodi općenito lošijeg kvaliteta u usporedbi s našim AI prijevodima, pružaju brz početni odgovor.

Istovremeno pokrećemo asinkroni zadatak prevođenja kako bismo za vaš string generirali visokokvalitetan, najsavremeniji AI prijevod. Kada AI prijevod bude spreman, zamijenit će mašinski prijevod i bit će poslan kad god zatražite prijevode za svoje stringove.

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

Korištenje izvora

Projekti TacoTranslatea sadrže ono što nazivamo origins. 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 odvojite stringove u smislene 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 unutar vašeg projekta.

Molimo imajte na umu da isti string može imati različite prijevode u različitim izvorima.

Na kraju, kako rasporedite stringove po originima zavisi od vas i vaših potreba. Međutim, imajte na umu da veliki broj stringova 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 se deklariraju koristeći dvostruke vitičaste zagrade, 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

Komponenta Translate po zadanim postavkama 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 renderovanje HTML-a prilikom prevođenja nepouzdanog sadržaja, kao što je sadržaj koji kreiraju 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 prevode stringovi

Korištenje izvora

Rukovanje varijablama

Upravljanje HTML sadržajem