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

שימוש ב-TacoTranslate

Hebrew

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

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

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

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

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

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

import {TacoTranslate} from 'tacotranslate/react';

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

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

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

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

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

בסופו של דבר, איך שתפריד את המחרוזות ל־origins תלוי בך ובצרכים שלך. עם זאת, שים לב של having many strings within one 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}
		/>
	);
}

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

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

שימוש ב-TacoTranslate

כיצד מחרוזות מתורגמות

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

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

ניהול תוכן HTML