ਡੌਕਯੂਮੈਂਟੇਸ਼ਨ: ਉੱਨਤ ਉਪਯੋਗ

ਉੱਨਤ ਵਰਤੋਂ

Punjabi

ਸੱਜੇ ਤੋਂ ਖੱਬੇ ਭਾਸ਼ਾਵਾਂ ਨੂੰ ਸੰਭਾਲਣਾ

TacoTranslate ਤੁਹਾਡੇ React ਐਪਲੀਕੇਸ਼ਨਾਂ ਵਿੱਚ ਅਰਬੀ ਅਤੇ ਹਿਬਰੂ ਵਰਗੀਆਂ ਸੱਜੇ-ਤੋਂ-ਖੱਬੇ (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 ਹੂਕ ਪੱਧਰਾਂ 'ਤੇ origin ਅਤੇ locale ਦੋਹਾਂ ਨੂੰ ਓਵਰਰਾਈਡ ਵੀ ਕਰ ਸਕਦੇ ਹੋ।

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” ਸਪੇਨੀ ਵਿੱਚ ਹੋ ਸਕਦਾ ਹੈ।

ਉੱਤਮ ਅਭਿਆਸ