Dokumentacija: TacoTranslate naudojimas

Naudojant TacoTranslate

Lithuanian

Eilučių vertimas

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

Naudojant Translate komponentą.
Rodo vertimus span elemente ir palaiko HTML atvaizdavimą.

import {Translate} from 'tacotranslate/react';

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

Galite pakeisti elemento tipą, pavyzdžiui, komponente nurodydami as="p".

Naudojant useTranslation hook'ą.
Grąžina 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į.
Versti tekstines eilutes serveryje. 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, o tada iš karto grąžiname mašininį vertimą. Nors mašininiai vertimai paprastai yra prastesnės kokybės nei mūsų dirbtinio intelekto vertimai, jie suteikia greitą pradinį atsakymą.

Tuo pačiu metu mes inicijuojame asinchroninę vertimo užduotį, kad sugeneruotume aukštos kokybės, naujausios kartos DI vertimą jūsų eilutei. Kai DI vertimas bus paruoštas, jis pakeis mašininį vertimą ir bus siunčiamas kiekvieną kartą, kai paprašysite vertimų savo eilutėms.

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

Originų naudojimas

TacoTranslate projektai turi tai, ką mes vadiname originais. Laikykite juos kaip įė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 eilutes į prasmingas grupes. Pavyzdžiui, galite turėti vieną originą dokumentacijai ir kitą — savo rinkodaros puslapiui.

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

Norint to pasiekti, apsvarstykite naudojant kelis TacoTranslate teikėjus savo projekte.

Atkreipkite dėmesį, kad ta pati eilutė gali būti išversta skirtingai skirtinguose šaltiniuose.

Galiausiai, kaip paskirstysite eilutes į konteinerius, priklauso nuo jūsų ir jūsų poreikių. Tačiau atkreipkite dėmesį, kad daug eilučių viename konteineryje gali padidinti krovimo laiką.

Darbas su kintamaisiais

Visada turėtumėte naudoti kintamuosius dinamiškam turiniui, pvz., vartotojų vardams, datoms, el. pašto adresams ir kt.

Kintamieji eilutėse deklaruojami naudojant dvigubus skliaustelius, 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.

Labai rekomenduojama išjungti HTML atvaizdavimą, kai verčiamas nepatikimas turinys, pavyzdžiui, vartotojų sukurtas turinys.

Visa išvestis visada išvaloma 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

Naudojant TacoTranslate

Kaip verčiamos eilutės

Originų naudojimas

Darbas su kintamaisiais

HTML turinio valdymas