תיעוד: שימוש ב-TacoTranslate

שימוש ב-TacoTranslate

Hebrew

תרגום מחרוזות

כרגע יש שלוש דרכים לתרגם מחרוזות: הרכיב Translate, הוק useTranslation, או הכלי translateEntries.

שימוש ברכיב Translate.
מציג תרגומים בתוך אלמנט span, ותומך בהצגת HTML.

import {Translate} from 'tacotranslate/react';

function Page() {
	return <Translate string="Hello, world!" />;
}

ניתן לשנות את סוג האלמנט, למשל על ידי שימוש ב־as="p" ברכיב.

שימוש בהוק useTranslation.
מחזיר תרגומים כמחרוזת רגילה. שימושי, למשל, בתגיות 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 שלנו, אך הם מספקים תגובה ראשונית מהירה.

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

אם תרגמת מחרוזת באופן ידני, תרגומים אלה יקבלו עדיפות ויוחזרו במקום זאת.

שימוש במקורות

פרויקטי 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}
		/>
	);
}

הדוגמה שלמעלה תוצג כטקסט פשוט.

רינדור בצד השרת