TacoTranslate
/
תיעודתמחור
 
  1. מבוא
  2. התחלה
  3. הגדרה ותצורה
  4. שימוש ב-TacoTranslate
  5. הרנדור בצד השרת
  6. שימוש מתקדם
  7. שיטות עבודה מומלצות
  8. טיפול בשגיאות וניתוח שגיאות
  9. שפות נתמכות

שימוש מתקדם

טיפול בשפות מימין לשמאל

TacoTranslate מקל על תמיכה בשפות מימין לשמאל (RTL), כגון ערבית ועברית, באפליקציות React שלך. טיפול נכון בשפות 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)}}
		/>
	);
}

שפות מרובות

כדי לתמוך במספר שפות בו זמנית בתוך אותן אפליקציה, ניתן להשתמש במספר ספקי TacoTranslate עם ערכי locale שונים כפי שמופיע למטה:

כמו כן, ניתן לעקוף את locale ברמת הקומפוננטה או ה-hook.

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>
	);
}

שימוש ב-translation IDs

אתה יכול להוסיף id לרכיב Translate כדי לטפל בתרגומים או במשמעויות שונות עבור אותה מחרוזת. זה שימושי במיוחד כאשר אותו טקסט דורש תרגומים שונים בהתאם להקשר. על ידי הקצאת מזהים ייחודיים, אתה מבטיח שכל מופע של המחרוזת יתורגם באופן מדויק לפי משמעותו הספציפית.

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” בספרדית.

שיטות עבודה מומלצות

מוצר של Nattskiftet