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 hulpmiddel.

Gebruik die Translate komponent.
Gee vertalings binne 'n span element uit, en ondersteun die weergawing 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 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 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 dadelik 'n masjienvertaling terug. Alhoewel masjienvertalings oor die algemeen van laer gehalte is as ons KI-vertalings, bied hulle 'n vinnige aanvanklike reaksie.

Gelyktydig inisieer ons 'n asynchrone vertaaltaak om 'n hoë kwaliteit, geavanceerde KI-vertaling vir jou string te genereer. Sodra die KI-vertaling gereed is, sal dit die masjienvertaling vervang en sal dit gestuur word wanneer jy vertalings vir jou stringe versoek.

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

Gebruik van oorspronge

TacoTranslate-projekte bevat wat ons origins noem. Dink aan hulle as ingangspunte, 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 stringe in betekenisvolle houers te skei. Byvoorbeeld, jy kan een oorsprong hê vir dokumentasie en ’n ander vir jou bemarkingsbladsy.

Vir meer fyn beheer kan jy oorspronge op komponentvlak instel.

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

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

Uiteindelik is dit aan jou en jou behoeftes hoe jy stringe in origins verdeel. Let egter daarop dat 'n groot aantal stringe binne 'n enkele origin 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}});
}

Beheer van HTML-inhoud

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

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

Alle uitset word altyd met sanitize-html gesaniteer voordat dit weergegee 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.

Bedienerkant-weergawing

Gebruik van TacoTranslate

Hoe stringe vertaal word

Gebruik van oorspronge

Hantering van veranderlikes

Beheer van HTML-inhoud