TacoTranslate ಬಳಸುವುದು
ಸ್ಟ್ರಿಂಗ್ಗಳನ್ನು ಅನುವಾದಿಸುವುದು
ಪ್ರಸ್ತುತ, ಸ್ಟ್ರಿಂಗ್ಗಳನ್ನು ಅನುವಾದಿಸಲು ಮೂರು ಮಾರ್ಗಗಳಿವೆ: 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 ಅನುವಾದವನ್ನು ರಚಿಸಲು asynchronous ಅನುವಾದ ಕೆಲಸವನ್ನು ಪ್ರಾರಂಭಿಸುತ್ತೇವೆ. ಒಮ್ಮೆ AI ಅನುವಾದ ತಯಾರಾದ ಮೇಲೆ, ಅದು ಯಂತ್ರ ಅನುವಾದವನ್ನು ಬದಲಾಯಿಸಿ ನಿಮ್ಮ ಸ್ಟ್ರಿಂಗ್ಗಳಿಗೆ ಅನುವಾದಗಳನ್ನು ನೀವು ಕೇಳಿದಾಗ ಕಳುಹಿಸಲಾಗುತ್ತದೆ.
ನೀವು ಕೈಯಿಂದ ಯಾವುದೇ 문자열ವನ್ನು ಅನುವಾದಿಸಿದ್ದು ಇದ್ದರೆ, ಆ ಅನುವಾದಗಳು ಪ್ರಾಮುಖ್ಯತೆಯನ್ನು ಹೊಂದಿದ್ದು ಅವುವೇ ಬದಲಾಗಿ ಮರಳಿಸಲಾಗುತ್ತವೆ.
ಮೂಲಗಳನ್ನು ಬಳಸುವುದು
TacoTranslate ಪ್ರಾಜೆಕ್ಟುಗಳು ನಾವು ಮೂಲೆಗಳು ಎಂದು ಕರೆಯುವವನ್ನೊಳಗೊಂಡಿರುವವು. ನಿಮ್ಮ ಸ್ಟ್ರಿಂಗ್ಗಳು ಮತ್ತು ಭಾಷಾಂತರಗಳಿಗಾಗಿ ಅವುಗಳನ್ನು ಪ್ರವೇಶ ಬಿಂದುಗಳು, ಫೋಲ್ಡರ್ಗಳು ಅಥವಾ ಗುಂಪುಗಳಾಗಿಯೇ ಪರಿಗಣಿಸಿ.
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}
/>
);
}
ಮೇಲಿನ ಉದಾಹರಣೆ ಸರಳ ಪಠ್ಯವಾಗಿ ಪ್ರದರ್ಶಿಸಲಾಗುವುದು.