TacoTranslate ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ
ਸਤਰਾਂ ਦਾ ਅਨੁਵਾਦ ਕਰਨਾ
ਹਾਲ ਹੀ ਵਿੱਚ ਤਿੰਨ ਤਰੀਕੇ ਹਨ ਸਟਰਿੰਗਜ਼ ਦਾ ਅਨੁਵਾਦ ਕਰਨ ਦੇ ਲਈ: 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)
};
}
ਸਟਰਿੰਗਾਂ ਕਿਵੇਂ ਅਨੁਵਾਦਿਤ ਕੀਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨ
ਜਦੋਂ ਸਟਰਿੰਗਸ ਸਾਡੇ ਸਰਵਰਾਂ ਤੱਕ ਪਹੁੰਚਦੀਆਂ ਹਨ, ਅਸੀਂ ਪਹਿਲਾਂ ਉਨ੍ਹਾਂ ਦੀ ਜਾਂਚ ਕਰਦੇ ਹਾਂ ਅਤੇ ਸੰਭਾਲਦੇ ਹਾਂ, ਫਿਰ ਤੁਰੰਤ ਇੱਕ ਮਸ਼ੀਨ ਅਨੁਵਾਦ ਵਾਪਸ ਕਰਦੇ ਹਾਂ। ਜਦ ਕਿ ਮਸ਼ੀਨ ਅਨੁਵਾਦ ਸਧਾਰਨ ਤੌਰ 'ਤੇ ਸਾਡੇ AI ਅਨੁਵਾਦਾਂ ਨਾਲੋਂ ਘੱਟ ਗੁਣਵੱਤਾ ਵਾਲੇ ਹੁੰਦੇ ਹਨ, ਪਰ ਇਹ ਤੇਜ਼ ਪਹਿਲਾ ਜਵਾਬ ਮੁਹੱਈਆ ਕਰਵਾਉਂਦੇ ਹਨ।
ਇੱਕੋ ਸਮੇਂ, ਅਸੀਂ ਤੁਹਾਡੇ ਸਤਰ ਲਈ ਉੱਚ-ਗੁਣਵੱਤਾ ਵਾਲੀ, ਅਧੁਨਿਕ AI ਅਨੁਵਾਦ ਬਣਾਉਣ ਲਈ ਇੱਕ ਅਸਿੰਕ੍ਰੋਨਸ ਅਨੁਵਾਦ ਕੰਮ ਸ਼ੁਰੂ ਕਰਦੇ ਹਾਂ। ਜਿਵੇਂ ਹੀ AI ਅਨੁਵਾਦ ਤਿਆਰ ਹੋ ਜਾਵੇਗਾ, ਇਹ ਮਸ਼ੀਨ ਅਨੁਵਾਦ ਦੀ جگہ ਲੈ ਲਵੇਗਾ ਅਤੇ ਜਦੋਂ ਵੀ ਤੁਸੀਂ ਆਪਣੇ ਸਤਰਾਂ ਲਈ ਅਨੁਵਾਦ ਮੰਗੋਂਗੇ, ਭੇਜਿਆ ਜਾਵੇਗਾ।
ਜੇ ਤੁਸੀਂ ਕਿਸੇ ਸਤਰ ਨੂੰ ਹੱਥੋਂ ਅਨੁਵਾਦ ਕੀਤਾ ਹੈ, ਤਾਂ ਉਹ ਅਨੁਵਾਦ ਪ੍ਰਾਥਮਿਕਤਾ ਪ੍ਰਾਪਤ ਕਰਦੇ ਹਨ ਅਤੇ ਉਹੀ ਵਾਪਸ ਕੀਤੇ ਜਾਂਦੇ ਹਨ।
ਮੂਲਾਂ ਦਾ ਉਪਯੋਗ ਕਰਨਾ
TacoTranslate ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ ਉਹ ਹੁੰਦੇ ਹਨ ਜਿਨ੍ਹਾਂ ਨੂੰ ਅਸੀਂ origins ਕਹਿੰਦੇ ਹਾਂ। ਇਨ੍ਹਾਂ ਨੂੰ ਆਪਣੇ ਸਟਰਿੰਗਾਂ ਅਤੇ ਅਨੁਵਾਦਾਂ ਲਈ ਐਂਟਰੀ ਪੁਆਇੰਟ, ਫੋਲਡਰ ਜਾਂ ਗਰੁੱਪ ਸਮਝੋ।
import {TacoTranslate} from 'tacotranslate/react';
function Menu() {
return (
<TacoTranslate origin="application-menu">
// ...
</TacoTranslate>
);
}
ਮੂਲ ਤੁਹਾਨੂੰ ਸਤਰਾਂ ਨੂੰ ਮਤਲਬਪੂਰਨ ਕੰਟੇਨਰਾਂ ਵਿੱਚ ਵੰਡਣ ਦੀ ਆਗਿਆ ਦਿੰਦੇ ਹਨ। ਉਦਾਹਰਨ ਲਈ, ਤੁਹਾਡੇ ਕੋਲ ਇੱਕ ਮੂਲ ਦਸਤਾਵੇਜ਼ਾਂ ਲਈ ਅਤੇ ਦੂਜਾ ਤੁਸੀਂ ਦੇ ਮਾਰਕੀਟਿੰਗ ਪੰਨੇ ਲਈ ਹੋ ਸਕਦਾ ਹੈ।
ਹੋਰ ਵਿਸਤ੍ਰਿਤ ਨਿਯੰਤਰਣ ਲਈ, ਤੁਸੀਂ ਕੰਪੋਨੇਟ ਪੱਧਰ ਤੇ origins ਸੈੱਟ ਕਰ ਸਕਦੇ ਹੋ।
ਇਸਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ, ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਕਈ TacoTranslate ਪ੍ਰਦਾਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਬਾਰੇ ਸੋਚੋ.
ਕਿਰਪਾ ਕਰਕੇ ਨੋਟ ਕਰ ਲੋ ਕਿ ਇੱਕੋ ਸਤਰ ਨੂੰ ਵੱਖ-ਵੱਖ ਮੂਲਾਂ ਵਿੱਚ ਵੱਖ-ਵੱਖ ਅਨੁਵਾਦ ਮਿਲ ਸਕਦੇ ਹਨ।
ਆਖ਼ਿਰਕਾਰ, ਤੁਸੀਂ ਕਿਵੇਂ ਸਤਰਾਂ ਨੂੰ ਬਿਨਾਂ ਵੱਡੇ ਢੰਗ ਨਾਲ ਕੱਟਦੇ ਹੋ, ਇਹ ਤੁਹਾਡੇ ਤੇ ਤੁਹਾਡੇ ਜ਼ਰੂਰਤਾਂ 'ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ। ਹਾਲਾਂਕਿ, ਇਹ ਧਿਆਨ ਵਿੱਚ ਰੱਖੋ ਕਿ ਇੱਕ ਹੀ ਜਥੇ ਵਿੱਚ ਬਹੁਤ ਸਾਰੀਆਂ ਸਤਰਾਂ ਹੋਣ ਕਾਰਨ ਲੋਡ ਹੋਣ ਦਾ ਸਮਾਂ ਵੱਧ ਸਕਦਾ ਹੈ।
ਚਲ ਕਿਸਮਾਂ ਨੂੰ ਸੰਭਾਲਣਾ
ਤੁਹਾਨੂੰ ਹਮੇਸ਼ਾਂ ਗਤੀਸ਼ੀਲ ਸਮੱਗਰੀ ਲਈ ਵੈਰੀਏਬਲ ਵਰਤਣੇ ਚਾਹੀਦੇ ਹਨ, ਜਿਵੇਂ ਕਿ ਯੂਜ਼ਰ ਨਾਂ, ਤਾਰੀਖਾਂ, ਈ-ਮੇਲ ਪਤੇ, ਅਤੇ ਹੋਰ।
ਸਤਰਾਂ ਵਿੱਚ ਵੈਰੀਏਬਲ ਦੋਹਰਿਆਂ ਕੋਠੜੀਆਂ ਦੀ ਵਰਤੋਂ ਨਾਲ ਘੋਸ਼ਿਤ ਕੀਤੇ ਜਾਂਦੇ ਹਨ, ਜਿਵੇਂ {{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}
/>
);
}
ਉਪਰ ਦਿੱਤਾ ਉਦਾਹਰਨ ਸਾਫ਼ ਸਧਾਰਣ ਲਿਖਤ ਵਜੋਂ ਦਰਸਾਇਆ ਜਾਵੇਗਾ।