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

שימוש ב-TacoTranslate

Hebrew

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

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

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

import {Translate} from 'tacotranslate/react';

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

באפשרותך לשנות את סוג האלמנט באמצעות, למשל, as="p" ברכיב.

שימוש ב-hook של 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 utility.
תַּרגֵם מַחרוּזוֹת בצד השרת. הַאֲצוֹר עַל תְמוּנוֹת 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 שלנו, הם מספקים תגובה מהירה ראשונית.

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

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

ניצול [origins]

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

import {TacoTranslate} from 'tacotranslate/react';

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

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

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

כדי להשיג זאת, שקול שימוש בכמה ספקי TacoTranslate בתוך הפרויקט שלך.

שימו לב כי ייתכן שהמחרוזת זהה תקבל תרגומים שונים במקורות שונים.

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

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

אתה תמיד צריך להשתמש במשתנים עבור תוכן דינמי, כגון שמות משתמש, תאריכים, כתובות דואר אלקטרוני, ועוד.

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

איך מחרוזות מתורגמות

ניצול [origins]

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

ניהול תוכן HTML