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

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

ניצול [origins]

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

import {TacoTranslate} from 'tacotranslate/react';

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

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

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

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

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

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

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

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

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

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

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