ಆಧುನಿಕ ಬಳಕೆ
ಬಲದಿಂದ ಎಡಕ್ಕೆ ಭಾಷೆಗಳ ನಿರ್ವಹಣೆ
TacoTranslate ನಿಮ್ಮ React ಅಪ್ಲಿಕೇಶನ್ಗಳಲ್ಲಿ ಅರೇಬಿಕ್ ಮತ್ತು ಹೆಬ್ರೂ ಹಾಗುವಂತೆ ಬಲದಿಂದ ಎಡಕ್ಕೆ (RTL) ಓದುವ ಭಾಷೆಗಳನ್ನು ಬೆಂಬಲಿಸಲು ಸುಲಭಗೊಳಿಸುತ್ತದೆ. 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';
// ...
}
ಭವನಗಳನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸುವುದು
ಒಂದು ಸ್ಟ್ರಿಂಗ್ನ ನಿರ್ದಿಷ್ಟ ಭಾಗಗಳ ಅನುವಾದವನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲು ಅಥವಾ ಕೆಲವು ವಿಭಾಗಗಳನ್ನು ಹೀಗೆಯೇ ಉಳಿಸುವುದನ್ನು ಖಚಿತಪಡಿಸಲು, ನೀವು ತ್ರಿಗುಣ ಚೌಕಾಕಾರದ ಕೊಂಬುಗಳನ್ನು ಬಳಸಬಹುದು. ಈ ವೈಶಿಷ್ಟ್ಯವು ಹೆಸರುಗಳು, ತಾಂತ್ರಿಕ ಪದಗಳು ಅಥವಾ ಅನುವಾದಿಸಬಾರದ ಯಾವುದೇ ಇತರೆ ವಿಷಯಗಳ ಮೂಲ ಸ್ವರೂಪವನ್ನು ಕಾಪಾಡಲು ಉಪಯುಕ್ತವಾಗಿದೆ.
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
ಹೂಕ್ ಮಟ್ಟಗಳಲ್ಲಿ ಮೂಲ ಮತ್ತು ಸ್ಥಳೀಯತೆ ಹೇಗೆ ಮಾರ್ಪಡಿಸಬಹುದು.
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)}}
/>
);
}
ಬಹು ಭಾಷೆಗಳು
ಒಂದು ಅದೇ ಅನ್ವಯಿಕೆಯಲ್ಲಿ ಒಂದೇ ಸಮಯದಲ್ಲಿ ಹಲವಾರು ಭಾಷೆಗಳ ಬೆಂಬಲಕ್ಕಾಗಿ, ನೀವು ವಿಭಿನ್ನ locale
ಮೌಲ್ಯಗಳೊಂದಿಗೆ ಹಲವಾರು TacoTranslate வழங்கುವವರನ್ನು ಬಳಕೆ ಮಾಡಬಹುದು, ಕೆಳಗಿರಿಸುವಂತೆ:
ನೀವು 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 ಗಳನ್ನು ಬಳಸುವುದು
ನೀವು 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” ಎಂದು ಅನುವಾದಿಸಬಹುದು.