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 omogoča upodabljanje HTML-ja.

import {Translate} from 'tacotranslate/react';

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

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

Uporaba useTranslation hooka.
Vrne prevode kot navaden niz. Uporabno je, 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 pripomočka translateEntries.
Prevedite nize na strežniški strani. Izboljšajte svoje slike OpenGraph.

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 manj kakovostni kot naši AI-prevodi, zagotavljajo hiter začetni odgovor.

Hkrati sprožimo asinhrono nalogo prevajanja, da za vaš niz ustvarimo visokokakovosten, najsodobnejši AI prevod. Ko bo AI prevod pripravljen, bo nadomestil strojni prevod in ga bomo poslali vsakič, ko boste zahtevali prevode svojih nizov.

Če ste niz ročno prevedli, imajo ti prevodi prednost in se namesto tega vrnejo.

Uporaba originov

Projekti TacoTranslate vsebujejo tisto, čemur pravimo izvori. Predstavljajte si jih kot vstopne točke, mape ali skupine vaših nizov in prevodov.

import {TacoTranslate} from 'tacotranslate/react';

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

Izvori vam omogočajo razdelitev nizov v smiselne vsebnike. Na primer, lahko imate en izvor za dokumentacijo in drugega za vašo marketinško stran.

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

Da bi to dosegli, razmislite o uporabi več ponudnikov TacoTranslate v vašem projektu.

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

Na koncu je, kako nize razdelite v posamezne izvore, odvisno 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 drugo.

Spremenljivke v nizih se deklarirajo z dvojnimi viti 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 prikazuje HTML vsebino. Vendar to vedenje lahko izključite tako, da nastavite useDangerouslySetInnerHTML na false.

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

Vse izhodne vsebine so vedno očiščene z sanitize-html pred prikazom.

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žniku

Uporaba TacoTranslate

Kako se prevajajo nizi

Uporaba originov

Ravnanje s spremenljivkami

Upravljanje HTML-vsebine