Dokumentasie: Gebruik van TacoTranslate

Gebruik van TacoTranslate

Afrikaans

Vertaling van stringe

Daar is tans drie maniere om stringe te vertaal: die Translate komponent, die useTranslation hook, of die translateEntries nutsfunksie.

Gebruik die Translate komponent.
Gee vertalings uit binne 'n span element en ondersteun die weergawe van HTML.

import {Translate} from 'tacotranslate/react';

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

Jy kan die elementtipe verander deur byvoorbeeld as="p" op die komponent te gebruik.

Gebruik die useTranslation hook.
Gee vertalings as 'n gewone string. Nuttig in, byvoorbeeld, meta tags.

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>
	);
}

Gebruik die translateEntries hulpmiddel.
Vertaal stringe aan die bedienerkant. Versterk jou OpenGraph beelde.

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)
	};
}

Wanneer stringe by ons bedieners aankom, valideer en stoor ons hulle eers en stuur dan onmiddellik 'n masjienvertaling terug. Alhoewel masjienvertalings oor die algemeen van laer gehalte is as ons KI-vertalings, bied hulle 'n vinnige aanvanklike reaksie.

Tegelyk begin ons 'n asinkrone vertaaltaak om 'n hoogwaardige, toonaangewende KI-vertaling van jou tekenreeks te genereer. Sodra die KI-vertaling gereed is, sal dit die masjienvertaling vervang en dit sal gestuur word wanneer jy vertalings van jou tekenreekse versoek.

As u 'n string handmatig vertaal het, het daardie vertalings voorrang en word hulle in plaas daarvan teruggegee.

Gebruik van oorspronge

TacoTranslate-projekte bevat wat ons oorspronge noem. Beskou dit as toegangspunte, mappe of groepe vir jou stringe en vertalings.

import {TacoTranslate} from 'tacotranslate/react';

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

Oorspronge laat jou toe om stringe in sinvolle houers te skei. Byvoorbeeld, jy kan een oorsprong vir dokumentasie hê en 'n ander vir jou bemarkingsblad.

Vir meer fyn beheer kan jy oorspronge op die komponentvlak opstel.

Om dit te bereik, oorweeg om meerdere TacoTranslate verskaffers te gebruik binne jou projek.

Neem asseblief kennis dat dieselfde string in verskillende oorspronge verskillende vertalings kan ontvang.

Uiteindelik is dit aan u en u behoeftes hoe u stringe in oorspronge verdeel. Let egter daarop dat die laaitye kan toeneem as daar baie stringe in een oorsprong is.

Hantering van veranderlikes

Jy moet altyd veranderlikes vir dinamiese inhoud gebruik, soos gebruikersname, datums, e-posadresse en meer.

Veranderlikes in stringe word met dubbele hakies verklaar, soos {{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}});
}

Beheer van HTML-inhoud

Standaard ondersteun die Translate komponent en gee HTML-inhoud weer. Jy kan egter hierdie gedrag uitskakel deur useDangerouslySetInnerHTML op false te stel.

Dit word sterk aanbeveel om HTML-rendering uit te skakel wanneer u onbetroubare inhoud vertaal, soos gebruikersgegenereerde inhoud.

Alle uitvoer word altyd met sanitize-html gesuiwer voordat dit vertoon word.

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}
		/>
	);
}

Bogenoemde voorbeeld sal as gewone teks weergegee word.

Bedienerkant-weergawing

Gebruik van TacoTranslate

Hoe stringe vertaal word

Gebruik van oorspronge

Hantering van veranderlikes

Beheer van HTML-inhoud