Dokumentasie: Gebruik van TacoTranslate

Gebruik van TacoTranslate

Afrikaans

Vertaal stringe

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

Gebruik van 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 van 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 van die translateEntries nutsprogram.
Vertaal stringe op die bediener-kant. Versnel 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 gee dan onmiddellik ŉ masjienvertaling terug. Terwyl masjienvertalings oor die algemeen van laer kwaliteit is in vergelyking met ons KI-vertalings, bied hulle ŉ vinnige aanvanklike reaksie.

Terselfdertyd begin ons ’n asinkroniese vertaaltaak om ’n hoëgehalte, ultramoderne KI-vertaling vir jou string te genereer. Sodra die KI-vertaling gereed is, sal dit die masjienvertaling vervang en gestuur word wanneer jy vertalings vir jou stringe versoek.

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

Benut van oorspronge

TacoTranslate-projekte bevat wat ons oorspronge noem. Dink daaraan as toetspunte, 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 bemarkingsblad.

Vir meer fyn beheer kan jy oorspronge op komponentvlak instel.

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

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

Uiteindelik is dit aan u en u benodigdhede hoe u stringe in oorspronge verdeel. Hou egter in gedagte dat dit langer kan neem om te laai as daar baie stringe binne een oorsprong is.

Hantering van veranderlikes

Jy behoort altyd veranderlikes te 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

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

Dit word sterk aanbeveel om HTML-weergaweskakeling uit te skakel wanneer u nie-vertroude inhoud vertaal, soos gebruiker-gegenereerde inhoud.

Alle uitvoer word altyd gesuiwer met sanitize-html voordat dit gerender 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 bogenoemde voorbeeld sal as gewone teks vertoon word.

Bedienerkant-weergawes

Gebruik van TacoTranslate

Hoe snare vertaal word

Benut van oorspronge

Hantering van veranderlikes

Bestuur van HTML-inhoud