Dogfennaeth: Defnydd Uwch

Defnyddio uwch

Welsh

Delio ag iaith sy’n cael eu darllen o’r dde i’r chwith

Mae TacoTranslate yn gwneud hi'n hawdd i gefnogi ieithoedd o'r dde i'r chwith (RTL), megis Arabeg a Heberaidd, yn eich cymwysiadau React. Mae trin iaith RTL yn iawn yn sicrhau bod eich cynnwys yn cael ei ddangos 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 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 segmentau penodol yn cael eu cadw fel y maent, gallwch ddefnyddio cromfachau sgwâr triphlyg. Mae'r nodwedd hon yn ddefnyddiol ar gyfer cynnal fformat gwreiddiol enwau, termau technegol, neu unrhyw gynnwys arall nad oes angen ei gyfieithu.

import {Translate} from 'tacotranslate/react';

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

Yn y clich hwn, bydd y gair “TacoTranslate” yn aros heb ei newid yn y cyfieithiad.

Darparwyr TacoTranslate Lluosog

Rydym yn annog yn fawr iawn i ddefnyddio sawl darparwr TacoTranslate yn eich ap. Mae hyn yn ddefnyddiol ar gyfer trefnu eich cyfieithiadau a'ch llinynnau i wahanol 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>
	);
}

Goruchwilio tarddiad neu leoliad

Yn ogystal â defnyddio sawl darparwr TacoTranslate, gallwch hefyd orfodold y ddau origin a locale ar lefelau cydran Translate a chynffon 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 nôl cyfieithiadau yn dibynnu ar gysylltiad y defnyddiwr. Gallwch arddangos dangosydd llwytho i wella profiad y defnyddiwr drwy ddarparu adborth gweledol yn ystod y newid.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Lluosogiad

I drin lluosogedd 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)}}
		/>
	);
}

Sawl iaith

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 or-ysgrifennu’r locale ar lefel y cydran neu’r hwylusydd.

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

Ymarferion Gorau