Dogfennaeth: Defnydd Uwch

Defnydd uwch

Welsh

Delio ag ieithoedd o'r dde i'r chwith

Mae TacoTranslate yn gwneud hi'n hawdd i gefnogi ieithoedd sy'n darllen o'r dde i'r chwith (RTL), megis Arabeg a Hebreig, yn eich cymwysiadau React. Mae trin ieithoedd RTL yn briodol 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 gyfredol y tu allan i React.

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

Analluogi cyfieithu

Er mwyn analluogi cyfieithu ar ran benodol o linyn neu i sicrhau y caiff rhannau penodol eu cadw heb eu newid, gallwch ddefnyddio bracedi sgwâr triphlyg. Mae'r nodwedd hon yn ddefnyddiol i gynnal fformat gwreiddiol enwau, termau technegol neu unrhyw gynnwys arall nad 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.

Amryw o ddarparwyr TacoTranslate

Rydym yn eich annog yn gryf i ddefnyddio sawl ddarparwr TacoTranslate yn eich ap. Mae hyn yn ddefnyddiol ar gyfer trefnu eich cyfieithiadau a’ch llinynnau testun mewn gwahanol darddiadau, megis eich pennawd, troedyn neu adrannau penodol.

Gallwch darllen mwy am ddefnyddio tarddiadau yma.

Mae darparwyr TacoTranslate yn etifeddu gosodiadau oddi wrth unrhyw ddarparwr rhiant, 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>
	);
}

Amnewid tarddiad neu lleoliad

Yn ogystal â defnyddio sawl ddarparwr TacoTranslate, gallwch hefyd newid y tarddiad a'r lleoliad ar lefelau'r gydran Translate a'r hook 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 iaith ar ochr y cleient, efallai y bydd yn cymryd ychydig o eiliadau i lwytho'r cyfieithiadau, yn dibynnu ar gysylltiad y defnyddiwr. Gallwch ddangos dangosydd llwytho i wella profiad y defnyddiwr trwy gynnig adborth gweledol yn ystod y newid.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Lluosogrwydd

I drin lluosogrwydd a dangos labeli sy'n seiliedig ar nifer yn gywir mewn ieithoedd gwahanol, ystyrir mai hwn yw'r 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

Er mwyn cefnogi sawl iaith ar yr un pryd o fewn yr un cais, gallwch defnyddio sawl ddarparwr TacoTranslate gyda gwahanol werthoedd locale fel a ganlyn:

Gallwch hefyd newid locale ar lefel y cydran neu'r hook.

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 at y gydran Translate i drin cyfieithiadau neu ystyron gwahanol ar gyfer yr un llinyn. Mae hyn yn arbennig o ddefnyddiol pan fo'r un testun yn gofyn am gyfieithiadau gwahanol yn dibynnu ar y cyd-destun. Drwy neilltuo IDau unigryw, rydych yn sicrhau bod pob achos o'r llinyn yn cael ei gyfieithu'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 caiff y mewngofnodi yn y pennawd ei gyfieithu i “Iniciar sesión”, a'r mewngofnodi yn y troedyn ei gyfieithu i “Acceder” yn Sbaeneg.

Ymarferion gorau