Dokumentasie: Gebruik van TacoTranslate

Gebruik van TacoTranslate

Afrikaans

Vertaling van tekenreekse

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

Gebruik die Translate komponent.
Gee vertalings binne 'n span element uit, 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.

Die gebruik van die useTranslation haak.
Gee vertalings terug 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 teksreekse 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 dit eers, en stuur dan onmiddellik 'n masjienvertaling terug. Alhoewel masjienvertalings oor die algemeen laer van gehalte is in vergelyking met ons KI-vertalings, bied hulle 'n vinnige aanvanklike reaksie.

Terselfdertyd begin ons 'n asynchrone vertaaltaak om 'n hoëkwaliteit, toonaangewende AI-vertaling vir jou string te genereer. Sodra die AI-vertaling gereed is, sal dit die masjienvertaling vervang en aan jou gestuur word wanneer jy vertalings vir jou strings versoek.

As jy ’n string handmatig vertaal het, gaan daardie vertalings voor en word hulle in plaas daarvan teruggestuur.

Gebruik van oorspronge

TacoTranslate-projekte bevat wat ons oorspronge noem. Dink aan hulle as toegangspunte, vouers 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 teksstringe in sinvolle houers te skei. Byvoorbeeld, kan jy een oorsprong vir dokumentasie hê en 'n ander vir jou bemarkingsbladsy.

Vir meer fyn beheer kan jy oorspronge op komponentvlak instel.

Om dit te bereik, oorweeg die gebruik van verskeie TacoTranslate verskaffers binne jou projek.

Neem asseblief kennis dat dieselfde tekenreeks in verskillende oorspronge verskillende vertalings kan kry.

Uiteindelik hang dit van u en u behoeftes af hoe u stringe in oorspronge verdeel. Let egter daarop dat baie stringe binne een oorsprong die laaitye kan verhoog.

Hantering van veranderlikes

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

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

Bestuur van HTML-inhoud

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

Dit word sterk aanbeveel om HTML-rendering uit te skakel wanneer u onbetroubare inhoud vertaal, soos inhoud wat deur gebruikers geskep is.

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

Die voorbeeld hierbo sal as platte teks weergegee word.

Rendering aan die bedienerkant

Gebruik van TacoTranslate

Hoe stringe vertaal word

Gebruik van oorspronge

Hantering van veranderlikes

Bestuur van HTML-inhoud