ਡੌਕਯੂਮੈਂਟੇਸ਼ਨ: TacoTranslate ਦੀ ਵਰਤੋਂ

TacoTranslate ਦੀ ਵਰਤੋਂ

Punjabi

ਸਟ੍ਰਿੰਗਾਂ ਦਾ ਅਨੁਵਾਦ

ਫਿਲਹਾਲ ਸਟਰਿੰਗਾਂ ਦਾ ਅਨੁਵਾਦ ਕਰਨ ਦੇ ਤਿੰਨ ਤਰੀਕੇ ਹਨ: Translate ਕੰਪੋਨੈਂਟ, useTranslation ਹੂਕ, ਜਾਂ translateEntries ਯੂਟਿਲਿਟੀ।

Translate ਕੰਪੋਨੈਂਟ ਦੀ ਵਰਤੋਂ।
ਇਹ ਤਰਜਮਿਆਂ ਨੂੰ span ਐਲਿਮੈਂਟ ਦੇ ਅੰਦਰ ਆਉਟਪੁੱਟ ਕਰਦਾ ਹੈ, ਅਤੇ HTML ਰੇਂਡਰਿੰਗ ਦਾ ਸਹਿਯੋਗ ਕਰਦਾ ਹੈ।

import {Translate} from 'tacotranslate/react';

function Page() {
	return <Translate string="Hello, world!" />;
}

ਤੁਸੀਂ ਉਦਾਹਰਨ ਵਜੋਂ ਕੰਪੋਨੈਂਟ 'ਤੇ as="p" ਵਰਤ ਕੇ ਐਲਿਮੈਂਟ ਦੀ ਕਿਸਮ ਬਦਲ ਸਕਦੇ ਹੋ।

useTranslation ਹੂਕ ਦੀ ਵਰਤੋਂ।
ਅਨੁਵਾਦ ਇੱਕ ਸਧਾਰਣ ਸਟਰਿੰਗ ਵਜੋਂ ਵਾਪਸ ਕੀਤੇ ਜਾਂਦੇ ਹਨ। ਉਦਾਹਰਨ ਲਈ, meta ਟੈਗਾਂ ਵਿੱਚ ਇਹ ਲਾਭਦਾਇਕ ਹੈ।

import {useEffect} from 'react';
import {useTranslation} from 'tacotranslate/react';

function Page() {
	const helloWorld = useTranslation('Hello, world!');

	useEffect(() => {
		alert(helloWorld);
	}, [helloWorld]);

	return (
		<title>{useTranslation('My page title')}</title>
	);
}

translateEntries ਯੂਟਿਲਿਟੀ ਦੀ ਵਰਤੋਂ.
ਸਟ੍ਰਿੰਗਜ਼ ਨੂੰ ਸਰਵਰ ਪਾਸੇ ਅਨੁਵਾਦ ਕਰੋ। ਆਪਣੀਆਂ OpenGraph ਤਸਵੀਰਾਂ ਨੂੰ ਸੁਪਰਚਾਰਜ ਕਰੋ।

import {createEntry, translateEntries} from 'tacotranslate';

async function generateMetadata(locale = 'es') {
	const title = createEntry({string: 'Hello, world!'});
	const description = createEntry({string: 'TacoTranslate on the server'});

	const translations = await translateEntries(
		tacoTranslate,
		{origin: 'opengraph', locale},
		[title, description]
	);

	return {
		title: translations(title),
		description: translations(description)
	};
}

ਸਟ੍ਰਿੰਗਾਂ ਕਿਵੇਂ ਅਨੁਵਾਦ ਕੀਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨ

ਜਦੋਂ ਸਤਰਾਂ ਸਾਡੇ ਸਰਵਰਾਂ ਤੇ ਪਹੁੰਚਦੀਆਂ ਹਨ, ਅਸੀਂ ਸਭ ਤੋਂ ਪਹਿਲਾਂ ਉਹਨਾਂ ਦੀ ਜਾਂਚ ਕਰਕੇ ਸੇਵ ਕਰਦੇ ਹਾਂ, ਅਤੇ ਫਿਰ ਤੁਰੰਤ ਇੱਕ ਮਸ਼ੀਨੀ ਅਨੁਵਾਦ ਵਾਪਸ ਭੇਜਦੇ ਹਾਂ। ਹਾਲਾਂਕਿ ਮਸ਼ੀਨੀ ਅਨੁਵਾਦ ਆਮ ਤੌਰ 'ਤੇ ਸਾਡੇ ਏਆਈ ਅਨੁਵਾਦਾਂ ਨਾਲੋਂ ਘੱਟ ਗੁਣਵੱਤਾ ਵਾਲੇ ਹੁੰਦੇ ਹਨ, ਇਹ ਇੱਕ ਤੇਜ਼ ਸ਼ੁਰੂਆਤੀ ਪ੍ਰਤੀਕ੍ਰਿਆ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ।

ਇੱਕੋ ਸਮੇਂ, ਅਸੀਂ ਤੁਹਾਡੇ ਸਟ੍ਰਿੰਗ ਲਈ ਉੱਚ-ਗੁਣਵੱਤਾ, ਅਧੁਨਿਕ ਏ.ਆਈ. ਅਨੁਵਾਦ ਤਿਆਰ ਕਰਨ ਲਈ ਇੱਕ ਅਸਿੰਕ੍ਰੋਨਸ ਅਨੁਵਾਦ ਕਾਰਜ ਸ਼ੁਰੂ ਕਰਦੇ ਹਾਂ। ਜਦੋਂ ਏ.ਆਈ. ਅਨੁਵਾਦ ਤਿਆਰ ਹੋ ਜਾਵੇਗਾ, ਇਹ ਮਸ਼ੀਨ ਅਨੁਵਾਦ ਦੀ ਥਾਂ ਲੈ ਲਵੇਗਾ ਅਤੇ ਜਦੋਂ ਵੀ ਤੁਸੀਂ ਆਪਣੇ ਸਟ੍ਰਿੰਗਾਂ ਲਈ ਅਨੁਵਾਦ ਮੰਗੋਗੇ, ਇਹ ਭੇਜਿਆ ਜਾਵੇਗਾ।

ਜੇ ਤੁਸੀਂ ਕਿਸੇ ਸਟਰਿੰਗ ਦਾ ਮੈਨੁਅਲ ਅਨੁਵਾਦ ਕੀਤਾ ਹੋਇਆ ਹੈ, ਤਾਂ ਉਹ ਅਨੁਵਾਦ ਤਰਜੀਹ ਪ੍ਰਾਪਤ ਕਰਦੇ ਹਨ ਅਤੇ ਉਹੀ ਵਾਪਸ ਦਿੱਤੇ ਜਾਂਦੇ ਹਨ।

ਮੂਲਾਂ ਦੀ ਵਰਤੋਂ

TacoTranslate ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ ਉਹ ਹੁੰਦੇ ਹਨ ਜੋ ਅਸੀਂ origins ਕਹਿੰਦੇ ਹਾਂ। ਇਨ੍ਹਾਂ ਨੂੰ ਆਪਣੇ ਸਟ੍ਰਿੰਗਸ ਅਤੇ ਅਨੁਵਾਦਾਂ ਲਈ ਐਂਟਰੀ ਪੌਇੰਟ, ਫੋਲਡਰ, ਜਾਂ ਗਰੁੱਪ ਸਮਝੋ।

import {TacoTranslate} from 'tacotranslate/react';

function Menu() {
	return (
		<TacoTranslate origin="application-menu">
			// ...
		</TacoTranslate>
	);
}

Origins ਤੁਹਾਨੂੰ ਸਟ੍ਰਿੰਗਾਂ ਨੂੰ ਮਤਲਬਪੂਰਨ ਕੰਟੇਨਰਾਂ ਵਿੱਚ ਵੰਡਣ ਦਿੰਦੇ ਹਨ. ਉਦਾਹਰਨ ਵਜੋਂ, ਤੁਸੀਂ ਡੌਕੂਮੈਂਟੇਸ਼ਨ ਲਈ ਇੱਕ origin ਰੱਖ ਸਕਦੇ ਹੋ ਅਤੇ ਆਪਣੀ ਮਾਰਕੀਟਿੰਗ ਪੇਜ ਲਈ ਦੂਜਾ origin।

ਹੋਰ ਵਿਸਥਾਰਿਤ ਨਿਯੰਤਰਣ ਲਈ, ਤੁਸੀਂ ਕੰਪੋਨੈਂਟ ਪੱਧਰ 'ਤੇ origins ਸੈੱਟ ਕਰ ਸਕਦੇ ਹੋ।

ਇਸ ਨੂੰ ਹਾਸਲ ਕਰਨ ਲਈ, ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਕਈ TacoTranslate ਪ੍ਰਦਾਤਿਆਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਬਾਰੇ ਸੋਚੋ.

ਕਿਰਪਾ ਕਰਕੇ ਨੋਟ ਕਰੋ ਕਿ ਇੱਕੋ ਹੀ ਸਤਰ ਨੂੰ ਵੱਖ-ਵੱਖ origins ਵਿੱਚ ਵੱਖ-ਵੱਖ ਅਨੁਵਾਦ ਮਿਲ ਸਕਦੇ ਹਨ।

ਅੰਤ ਵਿੱਚ, ਤੁਸੀਂ strings ਨੂੰ ਕਿਵੇਂ origins ਵਿੱਚ ਵੰਡਦੇ ਹੋ, ਇਹ ਤੁਹਾਡੇ ਅਤੇ ਤੁਹਾਡੀਆਂ ਲੋੜਾਂ 'ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ। ਹਾਲਾਂਕਿ, ਧਿਆਨ ਰੱਖੋ ਕਿ ਇੱਕ origin ਦੇ ਅੰਦਰ ਬਹੁਤ ਸਾਰੀਆਂ strings ਹੋਣ ਨਾਲ ਲੋਡਿੰਗ ਸਮੇਂ ਵਿੱਚ ਵਾਧਾ ਹੋ ਸਕਦਾ ਹੈ।

ਵੈਰੀਏਬਲਾਂ ਨੂੰ ਸੰਭਾਲਣਾ

ਤੁਸੀਂ ਡਾਇਨਾਮਿਕ ਸਮੱਗਰੀ ਲਈ ਹਮੇਸ਼ਾਂ ਵੈਰੀਏਬਲਾਂ ਵਰਤਣੇ ਚਾਹੀਦੇ ਹੋ, ਜਿਵੇਂ ਕਿ ਉਪਭੋਗਤਾਵਾਂ ਦੇ ਨਾਮ, ਤਾਰੀਖਾਂ, ਈਮੇਲ ਪਤੇ ਆਦਿ।

ਸਟ੍ਰਿੰਗਾਂ ਵਿੱਚ ਵੈਰੀਏਬਲਾਂ ਨੂੰ ਦੋਹਰੇ ਬ੍ਰੈਕਟਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਘੋਸ਼ਿਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਜਿਵੇਂ {{variable}}.

import {Translate} from 'tacotranslate/react';

function Greeting() {
	const name = 'Juan';
	return <Translate string="Hello, {{name}}!" variables={{name}} />;
}

import {useTranslation} from 'tacotranslate/react';

function useGreeting() {
	const name = 'Juan';
	return useTranslation('Hello, {{name}}!', {variables: {name}});
}

HTML ਸਮੱਗਰੀ ਦਾ ਪ੍ਰਬੰਧ

ਡਿਫਾਲਟ ਤੌਰ 'ਤੇ, Translate ਕੰਪੋਨੈਂਟ HTML ਸਮੱਗਰੀ ਨੂੰ ਸਮਰਥਨ ਕਰਦਾ ਹੈ ਅਤੇ ਰੇਂਡਰ ਕਰਦਾ ਹੈ। ਹਾਲਾਂਕਿ, ਤੁਸੀਂ useDangerouslySetInnerHTML ਨੂੰ false 'ਤੇ ਸੈਟ ਕਰਕੇ ਇਸ ਵਿਵਹਾਰ ਤੋਂ ਇਨਕਾਰ ਕਰ ਸਕਦੇ ਹੋ।

ਅਣਭਰੋਸੇਯੋਗ ਸਮੱਗਰੀ, ਜਿਵੇਂ ਕਿ ਉਪਭੋਗਤਾ-ਉਤਪੰਨ ਸਮੱਗਰੀ, ਦਾ ਅਨੁਵਾਦ ਕਰਦੇ ਸਮੇਂ HTML ਰੇਂਡਰਿੰਗ ਨੂੰ ਬੰਦ ਕਰਨ ਦੀ ਜ਼ੋਰਦਾਰ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ।

ਸਾਰੇ ਆਉਟਪੁੱਟ ਨੂੰ ਰੈਂਡਰ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ ਹਮੇਸ਼ਾਂ sanitize-html ਨਾਲ ਸੈਨੀਟਾਈਜ਼ ਕੀਤਾ ਜਾਂਦਾ ਹੈ।

import {Translate} from 'tacotranslate/react';

function Page() {
	return (
		<Translate
			string={`
				Welcome to <strong>my</strong> website.
				I’m using <a href="{{url}}">TacoTranslate</a> to translate text.
			`}
			variables={{url: 'https://tacotranslate.com'}}
			useDangerouslySetInnerHTML={false}
		/>
	);
}

ਉੱਪਰ ਦਿੱਤੀ ਉਦਾਹਰਣ ਸਧਾਰਨ ਪਾਠ ਵਜੋਂ ਦਿਖਾਈ ਜਾਵੇगी।

ਸਰਵਰ-ਸਾਈਡ ਰੇਂਡਰਿੰਗ