Dokumentacija: Korištenje TacoTranslate

Korištenje TacoTranslate

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 pomoću, na primjer, as="p" na komponenti.

Korištenje hooka useTranslation.
Vraća prijevode kao običan niz. 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 uslužnog programa.
Prevedite nizove 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, prvo ih validiramo i spremimo, a zatim odmah vratimo strojni prijevod. Iako su strojni prijevodi općenito manje kvalitetni u usporedbi s našim AI prijevodima, oni pružaju brz početni odgovor.

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

Korištenje izvora

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

Origins vam omogućuju da razdvojite nizove u smislene spremnike. Na primjer, mogli biste imati jedan origin za dokumentaciju i drugi za svoju marketinšku stranicu.

Za detaljniju kontrolu možete postaviti origins na razini komponente.

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

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

U konačnici, način na koji razdvajate nizove u origins ovisi o vama i vašim potrebama. Međutim, imajte na umu da veliki broj nizova u jednom originu 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, adrese e-pošte i slično.

Varijable u stringovima deklariraju se pomoću dvostrukih vitičastih 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

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

Snažno se preporučuje onemogućiti prikaz HTML-a pri prevođenju nepouzdanog sadržaja, poput sadržaja koji generiraju 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 bit će prikazan kao običan tekst.

Renderiranje na strani poslužitelja

Korištenje TacoTranslate

Kako se prevode stringovi

Korištenje izvora

Rukovanje varijablama

Upravljanje HTML sadržajem