Dokumentacija: Kaip naudoti TacoTranslate

Naudojant TacoTranslate

Lithuanian

Vertimas eilutėmis

Šiuo metu yra trys būdai versti eilutes: Translate komponentas, useTranslation kabliukas arba translateEntries įrankis.

Naudojant Translate komponentą.
Išveda vertimus span elemente ir palaiko HTML atvaizdavimą.

import {Translate} from 'tacotranslate/react';

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

Elementų tipą galite pakeisti, pavyzdžiui, naudojant as="p" komponentą.

Naudojant useTranslation kabliuką.
Grazina vertimus kaip paprastą eilutę. Naudinga, pavyzdžiui, meta žymėse.

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

Naudojant translateEntries įrankį.
Išverskite eilutes serverio pusėje. Pagerinkite savo OpenGraph paveikslėlius.

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

Kai tekstai pasiekia mūsų serverius, mes juos pirmiausia patikriname ir išsaugome, tada iš karto pateikiame mašininį vertimą. Nors mašininiai vertimai paprastai būna žemesnės kokybės nei mūsų dirbtinio intelekto vertimai, jie suteikia greitą pradinį atsakymą.

Vienu metu pradedame asinchroninį vertimo darbą, kad sugeneruotume aukštos kokybės, pažangiausią dirbtinio intelekto vertimą jūsų eilutei. Kai DI vertimas bus paruoštas, jis pakeis mašininį vertimą ir bus siunčiamas kiekvieną kartą, kai užklausiėte vertimų savo eilutėms.

Jei rankiniu būdu išvertėte tekstą, tie vertimai turi pirmenybę ir yra grąžinami vietoj jų.

Naudojant šaltinius

TacoTranslate projektai turi tai, ką vadiname šaltiniais. Galvokite apie juos kaip įėjimo taškus, aplankus ar grupes jūsų tekstams ir vertimams.

import {TacoTranslate} from 'tacotranslate/react';

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

Origins leidžia atskirti eilutes į prasmingas talpyklas. Pavyzdžiui, galite turėti vieną origin dokumentacijai ir kitą savo rinkodaros svetainei.

Dėl tikslesnės kontrolės galite nustatyti origins komponento lygyje.

Norėdami to pasiekti, apsvarstykite galimybę naudoti kelis TacoTranslate tiekėjus savo projekte.

Atkreipkite dėmesį, kad ta pati frazė gali turėti skirtingus vertimus skirtinguose šaltiniuose.

Galutinis sprendimas, kaip atskirti eilutes į originus, priklauso nuo jūsų ir jūsų poreikių. Tačiau atkreipkite dėmesį, kad daug eilučių viename origine gali padidinti įkėlimo laiką.

Kintamųjų valdymas

Jūs visada turėtumėte naudoti kintamuosius dinamiškam turiniui, tokiam kaip vartotojų vardai, datos, el. pašto adresai ir kt.

Kintamieji eilutėse deklaruojami naudojant dvigubas skliausteles, pavyzdžiui, {{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}});
}

HTML turinio valdymas

Pagal numatytuosius nustatymus Translate komponentas palaiko ir atvaizduoja HTML turinį. Tačiau galite atsisakyti šio elgesio nustatydami useDangerouslySetInnerHTML į false.

Stipriai rekomenduojama išjungti HTML atvaizdavimą verčiant nepatikimą turinį, pvz., vartotojų sukurtą turinį.

visas išvestis visada yra išvaloma naudojant sanitize-html prieš ją atvaizduojant.

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

Aukščiau pateiktas pavyzdys bus atvaizduotas kaip paprastas tekstas.

Serverio pusės atvaizdavimas

Naudojant TacoTranslate

Kaip verčiami tekstai

Naudojant šaltinius

Kintamųjų valdymas

HTML turinio valdymas