Dokumentacija: Korištenje TacoTranslate

Korištenje TacoTranslate

Croatian

Prevođenje stringova

Trenutno postoje tri načina za prevođenje nizova: komponenta Translate, kuka useTranslation ili utilitarna funkcija translateEntries.

Korištenje Translate komponente.
Prikazuje prijevode unutar span elementa i podržava prikaz HTML-a.

import {Translate} from 'tacotranslate/react';

function Page() {
	return <Translate string="Hello, world!" />;
}

Vrstu elementa možete promijeniti 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 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 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 nizovi stignu na naše poslužitelje, prvo ih provjeravamo i spremamo, zatim odmah vraćamo strojni prijevod. Iako su strojni prijevodi općenito niže 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, vrhunski AI prijevod vašeg teksta. Kad je AI prijevod spreman, zamijenit će strojni prijevod i bit će poslan svaki put kada zatražite prijevode za svoje tekstove.

Ako ste ručno preveli string, 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 točke, mape ili grupe za vaše stringove i prijevode.

import {TacoTranslate} from 'tacotranslate/react';

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

Origins vam omogućuju da razdvojite nizove u smislenije spremnike. 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 razini komponente.

Za postizanje toga, razmislite o korištenju više TacoTranslate pružatelja usluga unutar vašeg projekta.

Imajte na umu da ista fraza može dobiti različite prijevode u različitim izvorima.

Na kraju, način na koji razdvajate stringove u sourceove ovisi o vama i vašim potrebama. Međutim, imajte na umu da veći broj stringova unutar jednog sourcea može povećati vrijeme učitavanja.

Rukovanje varijablama

Uvijek biste trebali koristiti varijable za dinamički sadržaj, poput korisničkih imena, datuma, e-mail adresa i slično.

Varijable u nizovima deklariraju se pomoću 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, komponenta Translate 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 generiraju korisnici.

Sav izlaz je uvijek očišćen 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 stringovi

Korištenje izvora

Rukovanje varijablama

Upravljanje HTML sadržajem