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äminen.
Tulostaa 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, validoimme ja tallennamme ne ensin ja palautamme välittömästi konekäännöksen. Vaikka konekäännökset ovat yleensä laadultaan heikompia kuin AI-käännöksemme, ne tarjoavat nopean alustavan vastauksen.

Samanaikaisesti 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ähetämme sen aina, kun pyydät käännöksiä merkkijonoillesi.

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

Originien hyödyntäminen

TacoTranslate-projektit sisältävät sen, mitä kutsumme origins-iksi. Pidä 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 jakaa merkkijonoja merkityksellisiin säiliöihin. Esimerkiksi voit käyttää yhtä originia dokumentaatiolle ja toista markkinointisivullesi.

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

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

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

Viime kädessä se, miten jaat merkkijonot origin-ryhmiin, riippuu sinusta ja tarpeistasi. Huomaa kuitenkin, että jos yhdessä originissa on paljon merkkijonoja, latausajat saattavat kasvaa.

Muuttujien käsittely

Sinun pitäisi aina käyttää muuttujia dynaamiseen sisältöön, kuten käyttäjänimiin, päivämääriin, sähköpostiosoitteisiin ja muuhun.

Muutujat merkkijonoissa määritellään käyttämällä kaksoisia aaltosulkuja, 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:n renderoinnin poistaminen käytöstä on erittäin suositeltavaa, kun käännetään epäluotettavaa sisältöä, kuten käyttäjien luomaa sisältöä.

Kaikki tulosteet puhdistetaan aina sanitize-html ennen niiden renderöintiä.

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

TacoTranslaten käyttäminen

Miten merkkijonot käännetään

Originien hyödyntäminen

Muuttujien käsittely

HTML-sisällön hallinta