Dokumentacija: TacoTranslate naudojimas

Naudojant TacoTranslate

Lithuanian

Vertimas eilutėmis

Šiuo metu yra trys būdai versti tekstines 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!" />;
}

Jūs galite pakeisti elemento tipą, pavyzdžiui, naudodami as="p" komponente.

Naudojant useTranslation kablį.
Grąžina vertimus kaip paprastą tekstą. 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. Padidinkite savo OpenGraph paveikslėlių galimybes.

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, jas pirmiausia patikriname ir išsaugome, tada iš karto grąžiname mašininį vertimą. Nors mašininiai vertimai paprastai yra mažesnės kokybės, palyginti su mūsų DI vertimais, jie suteikia greitą pradinį atsaką.

Vienu metu mes pradedame asinchroninį vertimo užduotį, kad sugeneruotume aukštos kokybės, modernią DI vertimą jūsų tekstui. Kai DI vertimas bus paruoštas, jis pakeis mašininį vertimą ir bus pateiktas kiekvieną kartą, kai paprašysite vertimų savo tekstams.

Jei rankiniu būdu išvertėte tekstinę eilutę, šie vertimai turi prioritetą ir vietoje jos grąžinami.

Naudojant origenus

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

Šaknys leidžia atskirti tekstus į prasmingas talpyklas. Pavyzdžiui, galite turėti vieną šaknį dokumentacijai ir kitą savo rinkodaros puslapiui.

Dėl tikslesnės kontrolės galite nustatyti origins komponente.

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

Atkreipkite dėmesį, kad tas pats tekstas gali turėti skirtingus vertimus skirtinguose šaltiniuose.

Galų gale, kaip atskirsite tekstus į *origins* priklauso nuo jūsų ir jūsų poreikių. Tačiau atkreipkite dėmesį, kad daug tekstų viename *origin* gali pailginti įkėlimo laiką.

Kintamųjų tvarkymas

Visada turėtumėte naudoti kintamuosius dinaminiam turiniui, pavyzdžiui, naudotojų vardams, datoms, el. pašto adresams ir pan.

Kintamieji eilutėse deklaruojami naudojant dvigubas kabliataškes, 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ų sukurtą turinį.

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

Serverinis atvaizdavimas

Naudojant TacoTranslate

Kaip verčiamos eilutės

Naudojant origenus

Kintamųjų tvarkymas

HTML turinio valdymas