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

שימוש ב-TacoTranslate

Hebrew

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

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

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

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

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

import {TacoTranslate} from 'tacotranslate/react';

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

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

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

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