ਦਸਤਾਵੇਜ਼: TacoTranslate ਦੀ ਵਰਤੋਂ

TacoTranslate ਦੀ ਵਰਤੋਂ

Punjabi

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

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

Translate ਕੰਪੋਨੈਂਟ ਦੀ ਵਰਤੋਂ।
ਇਹ span ਐਲਿਮੈਂਟ ਦੇ ਅੰਦਰ ਅਨੁਵਾਦ ਦਿਖਾਉਂਦਾ ਹੈ ਅਤੇ HTML ਰੇਂਡਰਿੰਗ ਦਾ ਸਮਰਥਨ ਕਰਦਾ ਹੈ।

import {Translate} from 'tacotranslate/react';

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

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

useTranslation hook ਦੀ ਵਰਤੋਂ।
ਅਨੁਵਾਦ ਇੱਕ ਸਧਾਰਣ ਸਟਰਿੰਗ ਵਜੋਂ ਵਾਪਸ ਕੀਤੇ ਜਾਂਦੇ ਹਨ। ਉਦਾਹਰਨ ਲਈ, 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)
	};
}

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

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

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

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

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

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

import {TacoTranslate} from 'tacotranslate/react';

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

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

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

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

ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਇੱਕੋ ਹੀ ਸਟਰਿੰਗ ਵੱਖ-ਵੱਖ ਉਤਪੱਤੀਆਂ (origins) ਵਿੱਚ ਵੱਖ-ਵੱਖ ਅਨੁਵਾਦ ਪ੍ਰਾਪਤ ਕਰ ਸਕਦੀ ਹੈ।

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

ਵੈਰੀਏਬਲਾਂ ਦੀ ਸੰਭਾਲ

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

ਸਟ੍ਰਿੰਗਾਂ ਵਿੱਚ ਵੈਰੀਏਬਲਾਂ ਨੂੰ ਦੋਹਰੇ ਬ੍ਰੈਕਟਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਘੋਸ਼ਿਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਜਿਵੇਂ {{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}
		/>
	);
}

ਉਪਰੋਕਤ ਉਦਾਹਰਣ ਸਧਾਰਨ ਪਾਠ ਵਜੋਂ ਰੈਂਡਰ ਕੀਤਾ ਜਾਵੇਗਾ।

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