ከፍተኛ አጠቃቀም
ከቀኝ ወደ ግራ ቋንቋዎችን አስተዳደር
TacoTranslate በ React መተግበሪያዎችዎ ውስጥ እንደ Arabic እና 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" />
</>
);
}የመጫን አስተዳደር
በክላይንት ጎን ቋንቋዎችን ሲቀይሩ፣ የትርጉም መረጃዎችን ማግኘት የተጠቃሚው ኮኔክሽን ፍጥነት ላይ የተመሰረተ ጥቂት ጊዜ ሊወስድ ይችላል። ለተጠቃሚው የተሻሻለ ተሞክሮ ለማቅረብ፣ በማቀየር ጊዜ የሚኖረውን ሁኔታ በማሳየት የሎዲንግ ምልክት ማሳየት ይችላሉ።
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)}}
/>
);
}ብዙ ቋንቋዎች
በአንድ መተግበሪያ ውስጥ በተመሳሳይ ጊዜ ብዙ ቋንቋዎችን ለመደገፍ፣ የብዙ TacoTranslate አቅራቢዎችን መጠቀም በተለያዩ locale ዋጋዎች እንደሚከተለው ይችላሉ:
እንዲሁም በኮምፖነንት ወይም ሁክ ደረጃ ላይ የ 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” በስፓኒሽ።