Dogfennaeth: Defnydd uwch

Defnyddio uwch

Welsh

Delio â ieithoedd o dde i ochr ddeuol

Mae TacoTranslate yn gwneud hi'n hawdd i gefnogi ieithoedd o dde i dde (RTL), fel Arabeg a Hebraeg, yn eich cymwysiadau React. Mae trin ieithoedd RTL yn iawn yn sicrhau bod eich cynnwys yn cael ei arddangos yn gywir i ddefnyddwyr sy'n darllen o'r dde i'r chwith.

import {useTacoTranslate} from 'tacotranslate/react';

function Document() {
	const {locale, isRightToLeft} = useTacoTranslate();

	return (
		<html lang={locale} dir={isRightToLeft ? 'rtl' : 'ltr'}>
			<body>
				// ...
			</body>
		</html>
	);
}

Gallwch hefyd ddefnyddio'r swyddogaeth a ddarparwyd isRightToLeftLocaleCode i wirio'r iaith bresennol y tu allan i React.

import {isRightToLeftLocaleCode} from 'tacotranslate';

function foo(locale = 'es') {
	const direction = isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr';
	// ...
}

Analluogi cyfieithu

I analluogi cyfieithu ar gyfer rhannau penodol o linyn neu i sicrhau bod rhannau penodol yn cael eu cadw fel y mae, gallwch ddefnyddio cromfachau sgwâr trippiedig. Mae’r nodwedd hon yn ddefnyddiol i gynnal fformat gwreiddiol enwau, termau technegol, neu unrhyw gynnwys arall na ddylid ei gyfieithu.

import {Translate} from 'tacotranslate/react';

function Component() {
	return (
		<Translate string="Hello, [[[TacoTranslate]]]!" />
	);
}

Yn yr enghraifft hon, bydd y gair “TacoTranslate” yn aros heb ei newid yn y cyfieithiad.

Darparwyr TacoTranslate Lluosog

Rydym yn annog yn gryf i ddefnyddio sawl darparwr TacoTranslate yn eich ap. Mae hyn yn ddefnyddiol i drefnu eich cyfieithiadau a’ch llinynnau i wahanol wreiddiau, megis eich pennawd, troedyn, neu adrannau penodol.

Gallwch ddarllen mwy am ddefnyddio tarddiadau yma.

Mae darparwyr TacoTranslate yn etifeddu gosodiadau oddi wrth unrhyw ddarparwr rhieni, felly ni fydd angen i chi ailadrodd unrhyw osodiadau eraill.

import createTacoTranslateClient from 'tacotranslate';
import {TacoTranslate} from 'tacotranslate/react';

const tacoTranslateClient = createTacoTranslateClient({apiKey: 'YOUR_API_KEY'});

function Header() {
	return (
		<TacoTranslate origin="header">
			// ...
		</TacoTranslate>
	);
}

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

export default function App() {
	return (
		<TacoTranslate client={tacoTranslateClient} origin="page" locale="es">
			<Header />
			<Menu />
		</TacoTranslate>
	);
}

Gorlwytho tarddiad neu lleoliad

Yn ogystal â defnyddio sawl darparwr TacoTranslate, gallwch hefyd oresgyn y ddau wreiddyn ac ardal iaith ar lefelau cydran Translate a chwifio useTranslation.

import {Translate, useTranslation} from 'tacotranslate/react';

function Greeting() {
	const spanishHello = useTranslation('Hello!', {locale: 'es'});

	return (
		<>
			{spanishHello}
			<Translate string="What’s up?" origin="greeting" />
		</>
	);
}

Delio â llwytho

Wrth newid ieithoedd ar ochr y cleient, gall ymgynnull cyfieithiadau gymryd ychydig eiliadau yn dibynnu ar gysylltiad y defnyddiwr. Gallwch arddangos dangosydd llwytho i wella profiad y defnyddiwr trwy ddarparu adborth gweledol yn ystod y newid.

import {useTacoTranslate} from 'tacotranslate/react';

function Component() {
	const {isLoading} = useTacoTranslate();

	return (
		isLoading ? 'Translations are loading...' : null
	);
}

Lluosogi

I ddelio â lluosogaeth ac i arddangos labeli seiliedig ar gyfrif yn gywir mewn gwahanol ieithoedd, ystyriwyd hyn yn arfer gorau:

import {Translate, useLocale} from 'tacotranslate/react';

function PhotoCount() {
	const locale = useLocale();
	const count = 1;

	return count === 0 ? (
		<Translate string="You have no photos." />
	) : count === 1 ? (
		<Translate string="You have 1 photo." />
	) : (
		<Translate
			string="You have {{count}} photos."
			variables={{count: count.toLocaleString(locale)}}
		/>
	);
}

Ieithoedd lluosog

I gefnogi sawl iaith ar yr un pryd o fewn yr un cais, gallwch ddefnyddio sawl darparwr TacoTranslate gyda gwerthoedd locale gwahanol fel y dangosir isod:

Gallwch hefyd goresgyn y locale ar lefel y cydran neu'r gostyn.

import createTacoTranslateClient from 'tacotranslate';
import {TacoTranslate, Translate} from 'tacotranslate/react';

const tacoTranslateClient = createTacoTranslateClient({apiKey: 'YOUR_API_KEY'});

function Spanish() {
	return (
		<TacoTranslate locale="es">
			<Translate string="Hello, world in Spanish!" />
		</TacoTranslate>
	);
}

function Norwegian() {
	return (
		<TacoTranslate locale="no">
			<Translate string="Hello, world in Norwegian!" />
		</TacoTranslate>
	);
}

export default function App() {
	return (
		<TacoTranslate client={tacoTranslateClient} origin="page" locale="es">
			<Spanish />
			<Norwegian />
		</TacoTranslate>
	);
}

Defnyddio IDau cyfieithu

Gallwch ychwanegu id i'r cydran Translate i drin cyfieithiadau neu ystyron gwahanol ar gyfer y llinyn testun un. Mae hyn yn arbennig o ddefnyddiol pan fydd yr un testun yn gofyn am gyfieithiadau gwahanol yn dibynnu ar gyd-destun. Drwy ddyfarnu IDau unigryw, rydych yn sicrhau bod pob enghraifft o'r llinyn yn cael ei chyfieithu'n gywir yn unol â'i ystyr penodol.

import {Translate} from 'tacotranslate/react';

function Header() {
	return (
		<Translate id="header" string="Login" />
	);
}

function Footer() {
	return (
		<Translate id="footer" string="Login" />
	);
}

Er enghraifft, efallai y bydd mewngofnodi penawd yn cyfieithu i “Iniciar sesión”, a mewngofnodi troedyn yn cyfieithu i “Acceder” yn Sbaeneg.

Ymarferion gorau