بهترین روشها
آدرسهای URL را در متغیرها قرار دهید
هنگامی که رشتههایی را که شامل 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 استفاده شود.
وقتی با برنامههای بزرگتر کار میکنید، مفید است رشتهها و ترجمهها را به چند منبع کوچکتر تقسیم کنید. این رویکرد به کاهش اندازه بستهها و زمان انتقال کمک میکند و بومیسازی کارا و مقیاسپذیر را تضمین میکند.
اگرچه این وقتی که تنها در سمت کلاینت رندر میکنید ساده است، مدیریت منابع بهسرعت هنگام دریافت ترجمهها برای رندر سمت سرور پیچیده میشود. با این حال، میتوانید مدیریت منابع را با استفاده از آرایه origins در کلاینت TacoTranslate خود خودکار کنید.
این مثال را در نظر بگیرید، جایی که کامپوننتها و صفحات خود را در فایلهای جداگانه قرار دادهایم.
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>
);
}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, به نمونههای رندر سمت سرور ما مراجعه کنید.