Шилдэг туршлага
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 ашиглаж байгаа үед ажиллана.
Их хэмжээний програм дээр ажиллахдаа, тэмдэгтүүд болон орчуулгуудыг олон жижиг эх үүсвэрүүдэд хуваах нь ашигтай байдаг. Энэ арга нь багцын хэмжээ болон дамжуулалтын хугацааг багасгаж, үр дүнтэй бөгөөд уян хатан орчуулгын системийг хангадаг.
Үүнийг зөвхөн клиент тал дээр дүрслэх үед хийхэд энгийн боловч сервер талын дүрсэлтийн орчуулгыг авах үед эх үүсвэрийг удирдах нь хурдан төвөгтэй болдог. Гэсэн хэдий ч, TacoTranslate клиентын origins массивыг ашиглан эх үүсвэрийн удирдлагыг автоматжуулж болно.
Жишээ нь, бид бүрэлдэхүүн хэсгүүд болон хуудсуудыг тусдаа файлуудад хуваасан.
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 тухай манай сервер талын рендерингийн жишээнүүдээс үзнэ үү.