பதிவுச்சீர்: மேம்பட்ட பயன்பாடு

உயர் நிலை பயன்பாடு

Tamil

இடத்தலைவெற்று வழியாக எழுதப்படும் மொழிகளை கையாளுதல்

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 வழங்குநர்களைப் பயன்படுத்த பலவிரும்புகிறோம். இது உங்கள் மொழிபெயர்ப்புகளையும் எழுத்துகளையும் தலைப்பு, காலணி அல்லது குறிப்பிட்ட பகுதிகளான வெவ்வேறு மூலங்களாக அமைப்பதற்கு பயனுள்ளதாகும்.

நீங்கள் மூலங்களை பயன்படுத்துவது பற்றி மேலும் படிக்கலாம்.

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

மூலத்தை அல்லது பகுதிகளை மீறல்

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

பல மொழிகள்

ஒரே செயலியில் பல மொழிகளை ஒரே நேரத்தில் ஆதரிக்க, நீங்கள் பல TacoTranslate வழங்குநர்களைப் பயன்படுத்தலாம் கீழே காட்டப்பட்டுள்ளபோல் வெவ்வேறு locale மதிப்புகளுடன்:

நீங்கள் locale ஐ கொம்பொனென்ட் அல்லது ஹுக் மட்டத்தில் கூட மாற்றலாம்.

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

மொழிபெயர்ப்பு ஐடிகள் பயன்படுத்துதல்

நீங்கள் ஒரே உரையின் வெவ்வேறு மொழிமாற்றங்கள் அல்லது அர்த்தங்களை கையாள Translate கூறில் id ஒன்றை சேர்க்கலாம். ஒரே உரை சூழல்பொருத்தம் அடிப்படையில் வெவ்வேறு மொழிமாற்றங்கள் வேண்டிய போது இது மிகவும் பயன்படுகிறது. தனித்துவமான IDs வழங்குவதன் மூலம், அந்த உரையின் ஒவ்வொரு நகலும் அதன் குறிப்பிட்ட அர்த்தம் படி துல்லியமாக மொழிமாற்றம் செய்யப்படுவதை நீங்கள் உறுதி செய்கிறீர்கள்.

import {Translate} from 'tacotranslate/react';

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

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

உதாரணமாக, header login என்பது ஸ்பானிஷ் மொழியில் “Iniciar sesión” ஆகவும், footer login என்பது “Acceder” ஆகவும் மொழிபெயர்க்கப்படும்.

சிறந்த நடைமுறைகள்