Dokumentaatio: TacoTranslaten käyttäminen

TacoTranslaten käyttäminen

Finnish

Merkkijonojen kääntäminen

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

Translate-komponentin käyttö.
Tuottaa käännökset span-elementin sisälle 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. Hyödyllinen 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 apuohjelman 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)
	};
}

Kun merkkijonot saapuvat palvelimillemme, tarkistamme ja tallennamme ne ensin ja palautamme välittömästi konekäännöksen. Vaikka konekäännökset ovat yleensä laadultaan heikompia kuin tekoälykäännöksemme, ne tarjoavat nopean alustavan vastauksen.

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

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

Originien käyttö

TacoTranslate-projekteissa on sitä, mitä kutsumme origins. Ajattele niitä sisäänkäyntipisteinä, kansioina tai ryhminä merkkijonoillesi ja käännöksillesi.

import {TacoTranslate} from 'tacotranslate/react';

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

Originien avulla voit erotella merkkijonot merkityksellisiin säilöihin. Esimerkiksi voit määrittää yhden originin dokumentaatiolle ja toisen markkinointisivullesi.

Tarkempaa hallintaa varten voit määrittää originit komponenttitasolla.

Saavuttaaksesi tämän, harkitse projektissasi useiden TacoTranslate-palveluntarjoajien käyttöä.

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

Viime kädessä se, miten jaat merkkijonot originien välillä, on sinun ja tarpeidesi päätettävissä. Huomaa kuitenkin, että jos yhdessä originissa on paljon merkkijonoja, latausaika saattaa kasvaa.

Muuttujien käsittely

Käytä aina muuttujia dynaamiseen sisältöön, kuten käyttäjänimiin, päivämääriin, sähköpostiosoitteisiin ja muihin vastaaviin.

Merkkijonoissa olevat muuttujat ilmoitetaan käyttämällä kaksinkertaisia aaltosulkeita, 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

Oletusarvoisesti Translate komponentti tukee ja renderöi HTML-sisältöä. Voit kuitenkin poistaa tämän käytöstä asettamalla useDangerouslySetInnerHTML arvoksi false.

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

Kaikki tulosteet puhdistetaan aina sanitize-html ennen kuin ne renderöidään.

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 esitetään pelkkänä tekstinä.

Palvelinpuolen renderöinti

TacoTranslaten käyttäminen

Miten merkkijonot käännetään

Originien käyttö

Muuttujien käsittely

HTML-sisällön hallinta