TacoTranslate:n käyttäminen

Merkkijonojen kääntäminen

Tällä hetkellä merkkijonojen kääntämiseen on kolme tapaa: Translate -komponentti, useTranslation -hook tai translateEntries -apuohjelma.


Translate komponentin käyttäminen.
Tuottaa käännökset span elementin sisällä ja tukee HTML:n renderöintiä.

import {Translate} from 'tacotranslate/react';

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

Voit muuttaa elementin tyyppiä käyttämällä esimerkiksi as="p" komponentissa.


useTranslation hookin käyttäminen.
Palauttaa käännökset tavallisena merkkijonona. Kätevä esimerkiksi meta tageissa.

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

translateEntries -apuvälineen käyttö.
Käännä merkkijonoja palvelinpuolella. Tehosta OpenGraph -kuviasi.

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

Miten merkkijonot käännetään

Kun merkkijonot saapuvat palvelimillemme, tarkistamme ne ensin ja tallennamme, minkä jälkeen palautamme välittömästi konekäännöksen. Vaikka konekäännökset ovat yleensä laadultaan heikompia verrattuna tekoälykäännöksiimme, ne tarjoavat nopean alkuvastauksen.

Samanaikaisesti käynnistämme asynkronisen käännöstehtävän tuottamaan korkealaatuisen, huipputeknisen tekoälykäännöksen merkkijonollesi. Kun tekoälykäännös on valmis, se korvaa konekäännöksen ja lähetetään aina, kun pyydät käännöksiä merkkijonoillesi.

Jos olet kääntänyt merkkijonon manuaalisesti, nämä käännökset ovat etusijalla ja ne palautetaan sen sijaan.

Alkuperien hyödyntäminen

TacoTranslate-projektit sisältävät niin sanottuja origins-kohteita. Voit ajatella niitä sisääntulopisteinä, kansioina tai ryhminä merkkijonoillesi ja käännöksillesi.

import {TacoTranslate} from 'tacotranslate/react';

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

Origins antavat sinun erotella merkkijonoja merkityksellisiin säilöihin. Esimerkiksi voit käyttää yhtä originia dokumentaatiolle ja toista markkinointisivullesi.

Tarkempaan hallintaan voit määrittää originit komponenttitasolla.

Tämän saavuttamiseksi harkitse useiden TacoTranslate -palveluntarjoajien käyttöä projektissasi.

Huomaa, että sama merkkijono saattaa saada erilaisia käännöksiä eri alkuperissä.

Lopulta merkkijonojen jakaminen origem-kokonaisuuksiin on sinun ja tarpeidesi mukaista. Huomaa kuitenkin, että suuri määrä merkkijonoja yhdessä originissa voi pidentää latausaikoja.

Muuttujien käsittely

Sinun tulisi aina käyttää muuttujia dynaamiselle sisällölle, kuten käyttäjänimille, päivämäärille, sähköpostiosoitteille ja muille.

Merkkijonoissa olevat muuttujat määritellään käyttämällä kaksoisyläkaarroksia, kuten {{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}});
}

HTML-sisällön hallinta

Oletuksena Translate -komponentti tukee ja renderöi HTML-sisältöä. Voit kuitenkin kytkeä tämän toiminnon pois päältä asettamalla useDangerouslySetInnerHTML arvoksi false.

HTML-renderöinnin poistamista käytöstä suositellaan vahvasti, kun käännetään epäluotettavaa sisältöä, kuten käyttäjien luomaa sisältöä.

Kaikki tulosteet puhdistetaan aina sanitize-html avulla ennen niiden näyttämistä.

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

Yllä oleva esimerkki renderöidään tavallisena tekstinä.

Tuote Nattskiftet -yritykseltäValmistettu Norjassa