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

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}
		/>
	);
}

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

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