ලේඛනය: උසස් භාවිතය

උසස් භාවිතය

Sinhala

දකුණෙන් වමට කියවෙන භාෂා කළමනාකරණය

TacoTranslate ඔබගේ React යෙදුම්වල අරාබි និង හෙබ්‍රූ වැනි දකුණින් වමට (RTL) කියවන භාෂා සඳහා සහාය ලබා දීමට පහසු කරයි. RTL භාෂාවන් නිසි ලෙස සැලකිල්ලට ගත් විට, දකුණින් වමට කියවන පරිශීලකයින්ට ඔබගේ අන්තර්ගතය නිවැරදි ලෙස ප්‍රදර්ශනය වන බව নিশ্চিত කරයි.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

ඔබට ලබා දී ඇති isRightToLeftLocaleCode ක්‍රියාවලියද භාවිතා කර React පිටත වර්තමාන භාෂාව පරීක්ෂා කළ හැක.

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

පරිවර්තනය අක්‍රිය කිරීම

පෙළේ විශේෂ කොටස් කිහිපයකට පරිවර්තනය අක්‍රීය කිරීමට හෝ ඒ කොටස් එවැනි පරිදිම රඳවා තබා ගැනීමට, ඔබට triple square brackets භාවිතා කළ හැක. මෙම විශේෂාංගය නම්, නම්, තාක්ෂණික පද හෝ පරිවර්තනය නොකල යුතු වෙනත් ඕනෑම අන්තර්ගතයක මුල් ආකෘතිය රැක ගැනීමට ප්‍රයෝජනවත් වේ.

import {Translate} from 'tacotranslate/react';

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

මෙම උදාහරණයේ, “TacoTranslate” යන වචනය පරිවර්තනයේදී වෙනස් නොවී පවතිනු ඇත.

බහු TacoTranslate සපයන්නන්

අපි ඔබගේ යෙදුමේදී බහු TacoTranslate සැපයුම්කරුවන් භාවිතා කරන ලෙස දැඩිවම ප්‍රෝත්සාහ කරමු. මෙය ඔබගේ පරිවර්තන සහ පෙළ විවිධ මූලාශ්‍රවලට — උදාහරණයක් ලෙස ශීර්ෂ කොටස, පාද කොටස හෝ විශේෂ කොටස් — වෙන් කර සංවිධානය කිරීමට උපයෝගී වේ.

ඔබට මෙහි origins භාවිතය පිළිබඳ වැඩිදුර කියවිය හැක.

TacoTranslate සැපයුම්කරුවන් ඕනෑම මව් සැපයුම්කරුවෙකුගෙන් සැකසුම් උරුම කර ගනී, එබැවින් ඔබට වෙනත් සැකසුම් නැවත සඳහන් කිරීමට අවශ්‍ය නොවේ.

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>
	);
}

Origin හෝ locale මාරු කිරීම

බහු TacoTranslate සපයන්නන් භාවිත කිරීමට අමතරව, ඔබට Translate කොම්පෝනන්ට් මට්ටම සහ useTranslation හුක් මට්ටම මත මූලාශ්‍රය සහ ප්‍රදේශීය සැකසුම් දෙකම වෙනස් කළ හැක.

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

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

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

ලෝඩ් තත්ත්වය කළමනාකරණය

ග්‍රාහක පැත්තේ භාෂා වෙනස් කරන විට, පරිශීලකයාගේ සම්බන්ධතාවය අනුව පරිවර්තන ලබා ගැනීමට කීප තත්පර ගත විය හැක. මාරුවීම් අතරතුර දෘශ්‍ය ප්‍රතිචාරයක් ලබා දීමෙන් පරිශීලක අත්දැකීම වඩාත් හොඳ කර ගැනීමට ඔබට ලෝඩින් දර්ශකයක් පෙන්විය හැක.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

බහුවචන කිරීම

විවිධ භාෂාවල බහුලීකරණය සමඟ ගණන-මත පදනම් වූ ලේබල් නිවැරදිව ප්‍රදර්ශනය කිරීම සඳහා, මෙය හොඳම ක්‍රියාපටිපාටියක් ලෙස සැළකේ:

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

බහු භාෂා

එම යෙදුම තුළ එකවරම බහු භාෂා සහාය ලබා දීමට, ඔබට විවිධ locale අගයන් ඇති බහු TacoTranslate සැපයුම්කරුවන් භාවිතා කළ හැකිය පහත දැක්වෙන පරිදි:

ඔබට locale component හෝ hook මට්ටමේදී override කළ හැක.

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>
	);
}

පරිවර්තන ID භාවිතය

ඔබට එකම පෙළ සඳහා වෙනත් පරිවර්තන හෝ අර්ථ කළමනාකරණය කිරීමට Translate කොම්පෝනන්ට්ට id එකක් එක් කළ හැක. එකම පෙළක් අදහස් අනුව වෙනස් පරිවර්තන අවශ්‍ය වන අවස්ථාවල මෙය විශේෂයෙන් ප්‍රයෝජනවත් වේ. අද්විතීය ID ප්‍රදානය කිරීමෙන්, පෙළේ එක් එක් උදාහරණය එහි නිශ්චිත අර්ථය අනුව නිවැරදිව පරිවර්තනය වීම ඔබට සහතික කළ හැක.

import {Translate} from 'tacotranslate/react';

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

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

උදාහරණයක් ලෙස, හෙඩර් පිවිසුම “Iniciar sesión” සහ ෆූටර් පිවිසුම “Acceder” ලෙස ස්පාඤ්ඤ භාෂාවට පරිවර්තනය විය හැක.

හොඳ අභ්‍යාස