Dokumentasie: Gebruik van TacoTranslate

Gebruik TacoTranslate

Afrikaans

Vertaling van stringe

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

Gebruik van die Translate komponent.
Lewer vertalings binne ’n span element, en ondersteun die rendering 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 haak.
Gee vertalings terug as ’n gewone string. Nutzig in, byvoorbeeld, meta etikette.

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

Die gebruik van die translateEntries nut](https://)iliteit.
Vertaal stringe aan die bedienerkant. 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 ons bedieners bereik, valideer en stoor ons dit eers, en gee dan onmiddellik ’n masjienvertaling terug. Alhoewel masjienvertalings oor die algemeen van laer gehalte is in vergelyking met ons KI-vertalings, bied dit ’n vinnige aanvanklike reaksie.

Terselfdertyd begin ons 'n asynchrone vertaaltaak om 'n hoëgehalte, ultra-moderne KI-vertaling vir jou string te genereer. Sodra die KI-vertaling gereed is, sal dit die masjienvertaling vervang en gestuur word elke keer as jy vertalings vir jou stringe versoek.

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

Gebruik van oorspronge

TacoTranslate-projekte bevat wat ons oorspronge noem. Dink aan hulle as toetspunte, vouers, of groepe vir jou strings en vertalings.

import {TacoTranslate} from 'tacotranslate/react';

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

Origins 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 die komponentevlak opstel.

Om dit te bereik, oorweeg dit om meervoudige 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 behoeftes om reekse in oorspronge te skei. Neem egter kennis dat die hou van baie reekse binne een oorsprong 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 dubbel 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

By verstek ondersteun en lewer die Translate komponent HTML-inhoud uit. U kan egter van hierdie gedrag ontslaan deur useDangerouslySetInnerHTML op false te stel.

Dit word sterk aanbeveel om HTML-weergawes te deaktiveer wanneer u onbetroubare inhoud vertaal, soos gebruiker-gegenereerde inhoud.

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

Bediener-kant rendering

Gebruik TacoTranslate

Hoe stringe vertaal word

Gebruik van oorspronge

Hantering van veranderlikes

Bestuur van HTML-inhoud