Dogfennaeth: Defnydd uwch

Defnydd uwch

Welsh

Delio ag ieithoedd o'r dde i'r chwith

Mae TacoTranslate yn gwneud hi’n hawdd cefnogi ieithoedd sy’n darllen o’r dde i’r chwith (RTL), megis Arabeg ac Hebraeg, 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 isRightToLeftLocaleCode a ddarperir 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 gyfer rhannau penodol o llinyn neu i sicrhau bod rhai segmentau’n cael eu cadw fel y maent, gallwch ddefnyddio cromfachau sgwâr triphlyg. 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.

Llu o ddarparwyr TacoTranslate

Rydym yn eich annog yn fawr i ddefnyddio sawl TacoTranslate darparwr yn eich ap. Mae hyn yn ddefnyddiol i drefnu eich cyfieithiadau a'ch stringiau i wahanol darddiadau, megis eich pennawd, troedyn, neu adrannau penodol.

Gallwch ddarllen rhagor 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>
	);
}

Gorchymyn dros yr origen neu leoliad

Yn ogystal â defnyddio sawl darparwr TacoTranslate, gallwch hefyd ormodi'r ddau wreiddyn a'r lokaeth ar lefelau'r gydran Translate a'r ganolfan 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, efallai y bydd yn cymryd ychydig eiliadau i lwytho’r cyfieithiadau, 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

Er mwyn trin ffurfiau lluosog a dangos labeli sy'n seiliedig ar gyfrif yn gywir mewn ieithoedd gwahanol, ystyrir 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

Er mwyn cefnogi sawl iaith ar yr un pryd yn yr un cais, gallwch defnyddio sawl darparwr TacoTranslate gyda gwerthoedd locale gwahanol fel y dangosir isod:

Gallwch hefyd disodli'r 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 er mwyn ymdrin â chyfieithiadau 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. Trwy neilltuo 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, gall 'header login' gyfieithu i “Iniciar sesión”, a gall 'footer login' gyfieithu i “Acceder” yn Sbaeneg.

Ymarferion gorau