مستندات: بهترین شیوه‌ها

بهترین شیوه‌ها

Farsi (Persian)

آدرس‌های اینترنتی را در متغیرها قرار دهید

هنگام ترجمهٔ رشته‌هایی که شامل URLها یا داده‌های مشابه هستند، بهتر است این URLها را در متغیرها قرار داده و سپس در قالب‌هایتان به آن‌ها ارجاع دهید.

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

از برچسب‌های ARIA استفاده کنید

هنگام ترجمهٔ متن عناصر تعاملی مانند دکمه‌ها، مهم است که برچسب‌های ARIA را برای تضمین دسترسی‌پذیری درج کنید. برچسب‌های ARIA به صفحه‌خوان‌ها کمک می‌کنند اطلاعات توصیفی دربارهٔ عملکرد عنصر را ارائه دهند.

برای مثال، اگر دکمه‌ای دارید که به کاربران اجازه می‌دهد متن یک بلوک کد را کپی کنند، می‌توانید از صفت aria-label استفاده کنید تا توضیحی واضح ارائه دهید:

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

این موضوع حس خیلی «متا» بودن دارد.

آرایهٔ مبداهای سراسری و مبداهای چندگانهٔ کامپوننت‌ها

این الگو تنها هنگام استفاده از Next.js Pages Router کار می‌کند.

هنگام کار با برنامه‌های بزرگ‌تر، تقسیم رشته‌ها و ترجمه‌ها به منابع متعدد و کوچک‌تر مفید است. این رویکرد به کاهش حجم بسته‌ها و زمان‌های انتقال کمک می‌کند و باعث یک بومی‌سازی کارآمد و مقیاس‌پذیر می‌شود.

در حالی که این هنگام رندر شدن صرفاً در سمت کلاینت ساده است، مدیریت منابع به‌سرعت هنگام واکشی ترجمه‌ها برای رندر سمت سرور پیچیده می‌شود. با این حال، می‌توانید مدیریت منابع را با استفاده از آرایه کلاینت TacoTranslate origins خودکار کنید.

مثال زیر را در نظر بگیرید؛ در این مثال، کامپوننت‌ها و صفحات را در فایل‌های جداگانه قرار داده‌ایم.

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، به مثال‌های رندر سمت سرور ما مراجعه کنید.

مدیریت خطا و اشکال‌زدایی