የከፍተኛ ደረጃ አጠቃቀም
የቀኝ እስከ ግራ ቋንቋዎችን አስተዳደር
TacoTranslate በReact መተግበሪያዎችዎ ውስጥ እንደ አረብኛና Hebrew ያሉ ከቀኝ ወደ ግራ (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';
// ...
}ትርጉምን ማጥፋት
የንዴት አንዳንድ ክፍሎችን ለማቋረጥ ወይም አንዳንድ ክፍሎች እንደነበሩ ለማረጋገጥ በሶስት አረጋዊ ንድፎች (triple square brackets) ማጠቀም ይችላሉ። ይህ ባለሚያስፈልጉት ስሞች፣ ቴክኒካዊ ቃላት ወይም ማንኛውም የማይተረጉም ይዘት የመለወጥ እንዳይፈጥር ለመጠበቅ ጠቃሚ ነው።
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 ሁከት ደረጃዎች ላይ የመነሻ (origin) እና ቋንቋ (locale) ሁለቱንም መቀየር ይችላሉ።
import {Translate, useTranslation} from 'tacotranslate/react';
function Greeting() {
const spanishHello = useTranslation('Hello!', {locale: 'es'});
return (
<>
{spanishHello}
<Translate string="What’s up?" origin="greeting" />
</>
);
}የመጫን አስተዳደር
በክላይንት ገጽ ላይ ቋንቋዎችን ሲቀይሩ፣ የትርጉም መረጃዎችን ማግኘት ከተጠቃሚው የኔትዎርክ ግንኙነት መሠረት ጥቂት ጊዜ ሊወስድ ይችላል። ለለውጥ ሂደት ወቅት የተጠቃሚውን ልምድ ለማሻሻል የጭነት ምልክት (loading indicator) ማሳየት ይቻላል።
import {useTacoTranslate} from 'tacotranslate/react';
function Component() {
const {isLoading} = useTacoTranslate();
return (
isLoading ? 'Translations are loading...' : null
);
}የብዙነት አወጣጥ
በተለያዩ ቋንቋዎች ውስጥ ብዛት ለውጥን (pluralization) መከታተልና በቁጥር የተመሠረቱ መለያዎችን ትክክለኛ ለማሳየት፣ ይህ እንደ ምርጥ ልምድ ይመከራል:
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>
);
}የትርጉም መለያዎችን መጠቀም
ለማንደኛው ቃል የተለያዩ ትርጉሞች ወይም ማለቶች ለማስተካከል ወደ 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” በስፓኒሽ።