Dokumentacija: Korištenje TacoTranslate

Korištenje TacoTranslate

Croatian

Prevođenje stringova

Trenutno postoje tri načina za prevođenje stringova: komponenta Translate, hook useTranslation, ili utilitet 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 tip elementa koristeći, na primjer, as="p" na komponenti.

Korištenje useTranslation hooka.
Vraća prijevode kao običan niz. 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 pomoćne funkcije translateEntries.
Prevedite nizove na strani poslužitelja. Poboljš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, najprije ih validiramo i spremimo, a zatim odmah vraćamo strojni prijevod. Iako su strojni prijevodi općenito lošije kvalitete u usporedbi s našim AI prijevodima, oni pružaju brz početni odgovor.

Istovremeno pokrećemo asinkroni 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 kad god zatražite prijevode svojih tekstova.

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

Korištenje podrijetala

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

Izvori vam omogućuju razdvajanje tekstova u smislenije spremnike. Na primjer, možete imati jedan izvor za dokumentaciju i drugi za vašu 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 usluge TacoTranslate unutar vašeg projekta.

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

Na kraju, način na koji tekstove raspodijelite po izvorima ovisi o vama i vašim potrebama. Međutim, imajte na umu da veliki broj tekstova unutar jednog izvora 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 još mnogo toga.

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 renderira HTML sadržaj. Međutim, možete isključiti to 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 se izlaz uvijek 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 bit će prikazan kao običan tekst.

Renderiranje na strani poslužitelja

Korištenje TacoTranslate

Kako se prevode tekstovi

Korištenje podrijetala

Rukovanje varijablama

Upravljanje HTML sadržajem