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

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