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" u komponenti.

Korištenje useTranslation hooka.
Vraća prijevode kao običan string. 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 pomoćnog alata.
Prevedite stringove 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 stringovi stignu na naše servere, prvo ih validiramo i sačuvamo, a zatim odmah vraćamo mašinski prijevod. Iako su mašinski prijevodi obično niže kvalitete u poređenju 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 vašeg teksta. Kada AI prijevod bude spreman, zamijenit će strojni prijevod i bit će poslan svaki put kada zatražite prijevode za svoje tekstove.

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

Korištenje izvora

TacoTranslate projekti 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 smislenije kontejnere. Na primjer, možete imati jedno porijeklo za dokumentaciju i drugo za vašu marketinšku stranicu.

Za detaljniju kontrolu, možete postaviti origins na nivou komponente.

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

Imajte na umu da isti niz može dobiti 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, međutim, da veliki broj stringova unutar jednog origina može povećati vrijeme učitavanja.

Rukovanje varijablama

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

Varijable u stringovima se deklarišu koristeći dvostruke vitičaste zagrade, 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, komponenta Translate podržava i renderira HTML sadržaj. Međutim, možete onemogućiti ovo ponašanje postavljanjem useDangerouslySetInnerHTML na false.

Snažno se preporučuje onemogućiti renderiranje HTML-a pri prevođenju 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 će biti prikazan kao običan tekst.

Renderovanje na serverskoj strani

Korištenje TacoTranslate

Kako se stringovi prevode

Korištenje izvora

Rukovanje varijablama

Upravljanje HTML sadržajem