Dokumentacija: TacoTranslate naudojimas

TacoTranslate naudojimas

Lithuanian

Tekstų 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!" />;
}

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

Naudojant useTranslation hook'ą.
Grąžina vertimus kaip paprastą tekstinę 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 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, o tada iš karto grąžiname mašininį vertimą. Nors mašininiai vertimai paprastai būna prastesni už mūsų dirbtinio intelekto vertimus, jie suteikia greitą pradinį atsaką.

Tuo pačiu metu pradedame asinchroninę vertimo užduotį, kad sugeneruotume aukštos kokybės, pažangiausią 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 savo eilutėms vertimų.

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

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 tekstus į prasmingas grupes. Pavyzdžiui, galite turėti vieną originą dokumentacijai ir kitą — savo rinkodaros puslapiui.

Norėdami tikslesnės kontrolės, galite sukonfigūruoti origins 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, tai, kaip paskirstote eilutes į originus, priklauso nuo jūsų ir jūsų poreikių. Tačiau atkreipkite dėmesį, kad daug eilutų viename origine gali padidinti užkrovimo laiką.

Kintamųjų tvarkymas

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

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

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

TacoTranslate naudojimas

Kaip verčiamos eilutės

Originų naudojimas

Kintamųjų tvarkymas

HTML turinio valdymas