Dokumentaatio: TacoTranslate:n käyttäminen

TacoTranslate:n käyttäminen

Finnish

Merkkijonojen kääntäminen

Tällä hetkellä on kolme tapaa kääntää merkkijonoja: Translate -komponentti, useTranslation -koukku 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 koukun 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äminen.
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, validoimme ja tallennamme ne ensin, ja palautamme sitten välittömästi konekäännöksen. Vaikka konekäännökset ovat yleensä laadultaan heikompia verrattuna tekoälykäännöksiimme, ne tarjoavat nopean alkuvastauksen.

Samaan aikaan aloitamme asynkronisen käännöstehtävän tuottaaksemme korkealaatuisen, huippuluokan 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 menevät etusijalle ja ne palautetaan sen sijaan.

Lähteiden hyödyntäminen

TacoTranslate-projekteissa on niin sanotut alkuperät. 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 avulla voit erotella merkkijonot merkityksellisiin kokonaisuuksiin. Esimerkiksi voit käyttää yhtä originia dokumentaatiolle ja toista markkinointisivustollesi.

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

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

Huomaa, että sama merkkijono saattaa saada eri käännökset eri lähtölähteissä.

Lopulta, miten erotat merkkijonot alkuperiin, riippuu sinusta ja tarpeistasi. Huomaathan kuitenkin, että monien merkkijonojen pitäminen yhdessä alkuperässä 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.

Merkkijonojen muuttujat ilmoitetaan kaksoissuluilla, 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 luopua tästä käytöstä asettamalla useDangerouslySetInnerHTML arvoksi false.

HTML:n renderöinnin poistaminen käytöstä on vahvasti suositeltavaa, kun käännetään luottamattomia sisältöjä, kuten käyttäjien luomaa sisältöä.

Kaikki tulosteet puhdistetaan aina sanitize-html -kirjastolla 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ä.

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