Dokumentacija: Uporaba TacoTranslate

Uporaba TacoTranslate

Slovenian

Prevajanje nizov

Trenutno so na voljo trije načini za prevajanje nizov: komponenta Translate, hook useTranslation, ali orodje translateEntries.

Uporaba komponente Translate.
Prikaže prevode znotraj elementa span, in podpira renderiranje HTML.

import {Translate} from 'tacotranslate/react';

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

Vrsto elementa lahko spremenite, na primer z uporabo as="p" na komponenti.

Uporaba useTranslation hooka.
Vrne prevode kot navaden niz. Uporabno, na primer, v meta oznakah.

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>
	);
}

Uporaba orodja translateEntries.
Prevajajte nize na strežniški strani. Izboljš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)
	};
}

Ko nizi prispejo na naše strežnike, jih najprej preverimo in shranimo, nato pa takoj vrnemo strojni prevod. Čeprav so strojni prevodi na splošno slabše kakovosti kot naši prevodi z umetno inteligenco, zagotavljajo hiter začetni odziv.

Hkrati sprožimo asinhrono prevajalsko opravilo, da za vaš niz ustvarimo visokokakovosten, najsodobnejši AI prevod. Ko bo AI prevod pripravljen, bo zamenjal strojni prevod in ga bomo poslali vsakič, ko boste zahtevali prevode za svoje nize.

Če ste niz ročno prevedli, imajo ti prevodi prednost in bodo vrnjeni.

Uporaba izvorov

Projekti TacoTranslate vsebujejo tisto, čemur pravimo izvori. Razmislite o njih kot o vstopnih točkah, mapah ali skupinah za vaše nize in prevode.

import {TacoTranslate} from 'tacotranslate/react';

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

Origins vam omogočajo, da nize ločite v smiselne skupine. Na primer, lahko imate en origin za dokumentacijo in drugega za vašo marketinško stran.

Za bolj natančen nadzor lahko na ravni komponente nastavite izvore.

Da bi to dosegli, razmislite o uporabi več ponudnikov TacoTranslate v svojem projektu.

Upoštevajte, da lahko isti niz v različnih izvorih prejme različne prevode.

Na koncu je način, kako razdelite nize v različne izvore, odvisen od vas in vaših potreb. Vendar upoštevajte, da lahko veliko nizov v enem izvoru poveča čas nalaganja.

Ravnanje s spremenljivkami

Vedno uporabljajte spremenljivke za dinamično vsebino, kot so uporabniška imena, datumi, e-poštni naslovi in še več.

Spremenljivke v nizih se deklarirajo z dvojnimi oglatimi oklepaji, na primer {{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 vsebine

Privzeto komponenta Translate podpira in upodablja HTML vsebino. Vendar lahko to vedenje izključite tako, da nastavite useDangerouslySetInnerHTML na false.

Močno priporočamo onemogočanje upodabljanja HTML pri prevajanju nepouzdane vsebine, na primer vsebine, ki jo ustvarijo uporabniki.

Vsi izhodi se pred prikazom vedno očistijo s sanitize-html.

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}
		/>
	);
}

Zgornji primer bo prikazan kot navadno besedilo.

Upodabljanje na strežniški strani

Uporaba TacoTranslate

Kako se prevajajo nizi

Uporaba izvorov

Ravnanje s spremenljivkami

Upravljanje HTML vsebine