Баримт бичиг: Шилдэг туршлагууд

Шилдэг туршлагууд

Mongolian

URL-үүдийг хувьсагчид оруулах

URL эсвэл түүнтэй адил өгөгдөл агуулсан мөрүүдийг орчуулахдаа эдгээр URL-үүдийг хувьсагчид хадгалж, загваруудаасаа иш татах нь сайн дадал гэж тооцогддог.

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

Интерактив элементүүд, жишээ нь товчнуудын текстийг орчуулахдаа хүртээмжийг хангахын тулд 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-ийн талаар манай сервер талын рендерлэлийн жишээнүүд-ийг үзнэ үү.

Алдааг удирдах ба дэбаг хийх

Шилдэг туршлагууд

ARIA шошгуудыг ашиглах

Глобал эх үүсвэрийн массив болон олон компонентын эх үүсвэрүүд