תיעוד: שימוש ב-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)
	};
}

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

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

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

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

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

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