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

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

Dari

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

وقتی که رشته‌هایی که شامل 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 ببینید.

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