Dokumentacija: TacoTranslate naudojimas

Naudojant TacoTranslate

Lithuanian

Vertimas eilutės

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

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, naudojant as="p" komponente.

Naudojant useTranslation kabliuką.
Grąžina vertimus kaip paprastą tekstą. Naudinga, pavyzdžiui, meta žymose.

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. Pagerinkite 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 pateikiame mašininį vertimą. Nors mašininių vertimų kokybė paprastai yra žemesnė nei mūsų DI vertimų, jie suteikia greitą pradinį atsaką.

Tuo pačiu metu mes pradedame asinchroninį vertimo procesą, kad sugeneruotume aukštos kokybės, modernų DI vertimą jūsų tekstui. Kai DI vertimas bus paruoštas, jis pakeis mašininį vertimą ir bus siunčiamas kiekvieną kartą, kai paprašysite savo tekstų vertimų.

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

Naudojant šaltinius

TacoTranslate projektuose yra tai, ką mes vadiname šaknimis. Galvokite apie jas 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>
	);
}

Origins leidžia atskirti tekstus į prasmingas grupes. Pavyzdžiui, galite turėti vieną origin dokumentacijai, o kitą – jūsų rinkodaros puslapiui.

Didesnei kontrolei galite nustatyti originus komponento lygyje.

Norint tai pasiekti, apsvarstykite galimybę naudoti kelis TacoTranslate teikėjus savo projekte.

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

Galutiniame rezultate, kaip atskirsite tekstus į originus, priklauso nuo jūsų ir jūsų poreikių. Tačiau atkreipkite dėmesį, kad didelis tekstų kiekis viename origine gali padidinti įkėlimo laiką.

Kintamųjų tvarkymas

Jūs visada turėtumėte naudoti kintamuosius dinamiškai 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, komponentas Translate palaiko ir atvaizduoja HTML turinį. Tačiau galite atsisakyti šio elgesio nustatydami useDangerouslySetInnerHTML į false.

HTML atvaizdavimo išjungimas yra labai rekomenduojamas, kai verčiate nepatikimą turinį, pavyzdžiui, vartotojų generuotą turinį.

Visa 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 renderinimas

Naudojant TacoTranslate

Kaip vertinami tekstai

Naudojant šaltinius

Kintamųjų tvarkymas

HTML turinio valdymas