תיעוד: שיטות עבודה מומלצות

שיטות עבודה מומלצות

Hebrew

הכנס כתובות URL למשתנים

כאשר מתרגמים מחרוזות שמכילות כתובות URL או נתונים דומים, נחשב לנוהג טוב למקם את כתובות ה-URL הללו בתוך משתנים ואז להתייחס אליהם בתוך התבניות שלכם.

<Translate
	string={`Click <a href="{{url}}">here</a>`}
	variables={{url: 'https://tacotranslate.com'}}
/>

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

לדוגמה, אם יש לכם כפתור שמאפשר למשתמשים להעתיק טקסט מחסום קוד, תוכלו להשתמש בתכונה aria-label כדי לספק תיאור ברור:

<Translate
	aria-label={useTranslation('Copy to clipboard')}
	string="Copy"
/>

משהו בדבר הזה מרגיש מאוד מטא.

מערך מקורות גלובלי ומקורות מרובים של רכיבים

התבנית הזו עובדת רק כאשר משתמשים ב-Next.js Pages Router.

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

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

שקול את הדוגמה הזאת, שבה הפרדנו את הקומפוננטים והדפים שלנו לקבצים נפרדים.

components/pricing-table.tsx

import TacoTranslate, {Translate} from 'tacotranslate/react';
import tacoTranslate from '../tacotranslate-client';

// Set an origin name for this component
const origin = 'components/pricing-table';

// Push the origin into the origins array as this file is imported
tacoTranslate.origins.push(origin);

export default function PricingTable() {
	return (
		<TacoTranslate origin={origin}>
			<Translate string="Pricing table" />
			// ...
		</TacoTranslate>
	);
}

pages/pricing.tsx

import TacoTranslate, {Translate} from 'tacotranslate/react';
import getTacoTranslateStaticProps from 'tacotranslate/next/get-static-props';
import tacoTranslateClient from '../tacotranslate-client';
import PricingTable from '../components/pricing-table';

const origin = 'pages/pricing';
tacoTranslateClient.origins.push(origin);

export default function PricingPage() {
	return (
		<TacoTranslate origin={origin}>
			<Translate string="Pricing page" />
			<PricingTable />
		</TacoTranslate>
	);
}

// We will now fetch translations for all imported components and their origins automatically
export async function getStaticProps(context) {
	return getTacoTranslateStaticProps(context, {client: tacoTranslateClient});
}

ראו את דוגמאות להדפסה בצד השרת למידע נוסף על getTacoTranslateStaticProps.

טיפול בשגיאות וניתוח שגיאות

שיטות עבודה מומלצות

השתמש בתוויות ARIA

מערך מקורות גלובלי ומקורות מרובים של רכיבים