Dokumentacija: TacoTranslate naudojimas

TacoTranslate naudojimas

Lithuanian

Eilučių vertimas

Šiuo metu yra trys būdai versti eilutes: Translate komponentas, useTranslation hook'as, 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!" />;
}

Elemento tipą galite pakeisti, pavyzdžiui, nustatydami as="p" komponente.

Naudojant useTranslation hook'ą.
Grąžina vertimus kaip paprastą eilutę. Naudinga, pavyzdžiui, meta žymėms.

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į.
Versti eilutes serverio pusėje. Patobulinkite savo OpenGraph vaizdus.

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 eilutės pasiekia mūsų serverius, mes jas pirmiausia patikriname ir išsaugome, tada iš karto grąžiname mašininį vertimą. Nors mašininių vertimų kokybė paprastai yra žemesnė nei mūsų dirbtinio intelekto vertimų, jie suteikia greitą pradinį atsakymą.

Vienu metu mes inicijuojame asinchroninę vertimo užduotį, kad sugeneruotume aukštos kokybės, pažangų AI vertimą jūsų eilutei. Kai AI vertimas bus paruoštas, jis pakeis mašininį vertimą ir bus išsiųstas kiekvieną kartą, kai paprašysite vertimų savo eilutėms.

Jei eilutę išvertėte rankiniu būdu, tie vertimai turi pirmenybę ir bus grąžinti.

Originų naudojimas

TacoTranslate projektuose yra tai, ką mes vadiname originais. Galvokite apie juos kaip apie įėjimo taškus, aplankus arba grupes jūsų eilutėms ir vertimams.

import {TacoTranslate} from 'tacotranslate/react';

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

Originai leidžia suskirstyti tekstines eilutes į prasmingus konteinerius. Pavyzdžiui, vieną originą galite skirti dokumentacijai, o kitą — savo rinkodaros puslapiui.

Norėdami detalesnės kontrolės, galite nustatyti originus komponento lygyje.

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

Atkreipkite dėmesį, kad ta pati eilutė skirtinguose originuose gali turėti skirtingus vertimus.

Galiausiai, kaip suskirstysite eilutes į originus, priklauso nuo jūsų ir jūsų poreikių. Tačiau atkreipkite dėmesį, kad daug eilutų viename origine gali pailginti įkėlimo laiką.

Kintamųjų tvarkymas

Visada turėtumėte naudoti kintamuosius dinaminiam turiniui, pavyzdžiui, vartotojų vardams, datoms, el. pašto adresams 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į, pavyzdžiui, vartotojų sukurtą turinį.

Visas išvesties turinys visada yra sanitizuojamas naudojant sanitize-html prieš atvaizdavimą.

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

TacoTranslate naudojimas

Kaip verčiamos eilutės

Originų naudojimas

Kintamųjų tvarkymas

HTML turinio valdymas