Dokumentacija: Korištenje TacoTranslate

Korištenje TacoTranslate

Bosnian

Prevođenje nizova

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

Korištenje Translate komponente.
Prikazuje prijevode unutar span elementa i podržava renderovanje 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 hook-a.
Vraća prijevode kao običan tekst. 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 utilitija.
Prevodi tekstove 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 validiramo i sačuvamo, zatim odmah vraćamo mašinski prijevod. Iako su mašinski prijevodi obično nižeg kvaliteta u usporedbi s našim AI prijevodima, oni pružaju brzi početni odgovor.

Istovremeno, pokrećemo asinkroni prevodilački zadatak kako bismo generisali visokokvalitetan, najsavremeniji AI prevod za vaš niz. Kada AI prevod bude spreman, zamijeniće mašinski prevod i biće poslat svaki put kada zatražite prevode za svoje nizove.

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

Korištenje izvora

TacoTranslate projekti sadrže ono što nazivamo origins. Zamislite ih kao ulazne tačke, foldere ili grupe za vaše stringove i prevode.

import {TacoTranslate} from 'tacotranslate/react';

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

Origins vam omogućavaju da razdvojite stringove u smislenije kontejnere. Na primjer, možete imati jedan origin za dokumentaciju, a drugi za vašu marketinšku stranicu.

Za detaljniju kontrolu, možete postaviti originse na nivou komponenti.

Da biste to postigli, razmotrite korištenje više TacoTranslate provajdera unutar vašeg projekta.

Imajte na umu da ista riječ može imati različita prijevode u različitim izvorima.

Na kraju, kako ćete razdvojiti stringove u origin-e zavisi od vas i vaših potreba. Međutim, imajte na umu da veliki broj stringova unutar jednog origin-a 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 deklariraju korištenjem dvostrukih uglastih 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 defaultu, Translate komponenta podržava i prikazuje HTML sadržaj. Međutim, možete isključiti ovo ponašanje postavljanjem useDangerouslySetInnerHTML na false.

Isključivanje prikaza HTML-a se snažno preporučuje prilikom prevođenja nepouzdanog sadržaja, kao što je sadržaj koji generišu 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 će biti prikazan kao običan tekst.

Renderovanje na strani servera

Korištenje TacoTranslate

Kako se prevode stringovi

Korištenje izvora

Rukovanje varijablama

Upravljanje HTML sadržajem