Шилдэг туршлагууд
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});
}Дэлгэрэнгүй мэдээллийг авах için манай серверийн талын рендерингийн жишээнүүд-ийг үзнэ үү, тухайлбал getTacoTranslateStaticProps.