Dogfennaeth: Defnydd Uwch

Defnydd uwch

Welsh

Delio ag ieithoedd o'r dde i'r chwith

Mae TacoTranslate yn ei gwneud yn hawdd cefnogi ieithoedd sy'n cael eu darllen o'r dde i'r chwith (RTL), megis Arabeg ac Hebraeg, mewn eich cymwysiadau React. Pan fydd iaithoedd RTL yn cael eu trin yn gywir, mae'n sicrhau bod eich cynnwys yn cael ei arddangos yn iawn 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 atal cyfieithu ar gyfer rhannau penodol o llinyn neu i sicrhau bod segmentau penodol yn cael eu cadw fel y maent, gallwch ddefnyddio braciadau sgwâr tripl. Mae’r nodwedd hon yn ddefnyddiol i gadw 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 eich annog yn gryf i ddefnyddio sawl darparwr TacoTranslate yn eich cymhwysiad. Mae hyn yn ddefnyddiol ar gyfer trefnu eich cyfieithiadau a'ch llinynnau mewn tarddiadau gwahanol, megis eich penawd, troedyn, neu adrannau penodol.

Gallwch ddarllen rhagor am ddefnyddio tarddiadau yma.

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

Disodli tarddiad neu leoliad

Yn ogystal â defnyddio sawl darparwr TacoTranslate, gallwch hefyd 'override' y ddau origin a locale 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 â'r llwytho

Wrth newid ieithoedd ar ochr y cleient, gallai llwytho cyfieithiadau gymryd ychydig eiliadau, yn dibynnu ar gysylltiad y defnyddiwr. Gallwch ddangos 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
	);
}

Lluosogi

Er mwyn delio â lluosogrwydd a dangos labeli sy'n seiliedig ar y nifer 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 ap, gallwch ddefnyddio sawl ddarparwr TacoTranslate gyda gwahanol werthoedd locale fel y dangosir isod:

Gallwch hefyd drosysgrifennu'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 cydran 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 roi IDau unigryw, gwnewch yn siŵr bod pob enghraifft 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, gallai mewngofnodi yn y pennawd gyfieithu i “Iniciar sesión”, tra gallai mewngofnodi yn y troedyn gyfieithu i “Acceder” yn Sbaeneg.

Ymarferion gorau