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

שימוש ב-TacoTranslate

Hebrew

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

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

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

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

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

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

import {TacoTranslate} from 'tacotranslate/react';

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

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

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

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

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