תיעוד: שימוש ב-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
תרגם מחרוזות בצד השרת. שפר משמעותית את תמונות 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>
	);
}

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

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

הצגה בצד השרת