Dokumentaatio: TacoTranslate käyttö

TacoTranslate:n käyttäminen

Finnish

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ä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. 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 -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 heti konekäännöksen. Vaikka konekäännökset ovat yleensä laadultaan heikompia verrattuna AI-käännöksiimme, ne tarjoavat nopean alkuvastauksen.

Samaan aikaan aloitamme asynkronisen käännöstyön luodaksemme korkealaatuisen, huipputeknologisen tekoälykäännöksen merkillesi. Kun tekoälykäännös on valmis, se korvaa konekäännöksen ja lähetetään aina, kun pyydät käännöksiä merkeillesi.

Jos olet kääntänyt merkkijonon manuaalisesti, nämä käännökset menevät etusijalle ja palautetaan sen sijaan.

Lähteiden hyödyntäminen

TacoTranslate-projektit sisältävät niin sanottuja origins-alkuperiä. Ajattele niitä sisäänkäynteinä, kansioina tai ryhminä merkkijonoillesi ja käännöksillesi.

import {TacoTranslate} from 'tacotranslate/react';

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

Origins antaa sinun erotella merkkijonot merkityksellisiin säiliöihin. Esimerkiksi voit käyttää yhtä originia dokumentaatiolle ja toista markkinointisivullesi.

Tarkempaan hallintaan voit määrittää origins-tasot komponenttikohtaisesti.

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

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

Lopulta tapa, jolla jaat merkkijonot alkuperiin, on sinun ja tarpeidesi päätettävissä. Huomaa kuitenkin, että monien merkkijonojen pitäminen yhdessä alkuperässä saattaa lisätä 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 muulle.

Merkkijonojen muuttujat ilmoitetaan käyttämällä kaksoiset hakasulkeet, 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 kieltäytyä tästä asettamalla useDangerouslySetInnerHTML arvoksi false.

HTML-renderöinnin poistamista käytöstä suositellaan vahvasti epäluotettavan sisällön, kuten käyttäjien tuottaman sisällön, kääntämisessä.

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

Palvelinpuolen renderöinti

TacoTranslate:n käyttäminen

Kuinka merkkijonot käännetään

Lähteiden hyödyntäminen

Muuttujien käsittely

HTML-sisällön hallinta