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

שימוש ב-TacoTranslate

Hebrew

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

כרגע ישנן שלוש דרכים לתרגם מחרוזות: הרכיב Translate, ה-hook 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)
	};
}

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

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

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

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

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

import {TacoTranslate} from 'tacotranslate/react';

function Menu() {
	return (
		<TacoTranslate origin="application-menu">
			// ...
		</TacoTranslate>
	);
}

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

לשליטה מדויקת יותר, תוכל להגדיר מקורות ברמת הרכיב.

כדי להשיג זאת, שקול להשתמש במספר ספקי 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}
		/>
	);
}

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

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

שימוש ב-TacoTranslate

כיצד מתורגמות המחרוזות

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

טיפול במשתנים

ניהול תוכן HTML