ਦਸਤਾਵੇਜ਼: ਉੱਨਤ ਵਰਤੋਂ

ਉੱਨਤ ਉਪਯੋਗ

Punjabi

ਸੱਜੇ-ਤੋਂ-ਖੱਬੇ ਲਿਖਣ ਵਾਲੀਆਂ ਭਾਸ਼ਾਵਾਂ ਦੀ ਸੰਭਾਲ

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

Origin ਜਾਂ locale ਨੂੰ ਓਵਰਰਾਈਡ ਕਰਨਾ

ਕਈ TacoTranslate ਪ੍ਰਦਾਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਦੇ ਇਲਾਵਾ, ਤੁਸੀਂ Translate ਕੰਪੋਨੈਂਟ ਅਤੇ useTranslation ਹੂਕ ਪੱਧਰਾਂ 'ਤੇ ਮੂਲ (origin) ਅਤੇ ਲੋਕੇਲ ਦੋਹਾਂ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰ ਸਕਦੇ ਹੋ।

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

ਅਨੁਵਾਦ ID ਦੀ ਵਰਤੋਂ

ਤੁਸੀਂ id ਨੂੰ Translate ਕੰਪੋਨੈਂਟ ਵਿੱਚ ਜੋੜ ਸਕਦੇ ਹੋ ਤਾਂ ਕਿ ਇੱਕੋ ਹੀ ਲਿਖਤ ਲਈ ਵੱਖ-ਵੱਖ ਅਨੁਵਾਦ ਜਾਂ ਅਰਥ ਸੰਭਾਲੇ ਜਾ ਸਕਣ। ਇਹ ਖਾਸ ਕਰਕੇ ਲਾਭਦਾਇਕ ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਇੱਕੋ ਹੀ ਲਿਖਤ ਨੂੰ ਸੰਦਰਭ ਦੇ ਅਧਾਰ 'ਤੇ ਵੱਖ-ਵੱਖ ਅਨੁਵਾਦਾਂ ਦੀ ਲੋੜ ਹੋਵੇ। ਅਨੋਖੇ 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” ਸਪੇਨੀ ਵਿੱਚ।

ਸਰਵੋਤਮ ਅਭਿਆਸ