TacoTranslate
/
ҚұжаттамаБағалар
 
  1. Кіріспе
  2. Бастау
  3. Орнату және баптау
  4. TacoTranslate пайдалану
  5. Сервер тарапынан рендерлеу
  6. Кеңейтілген пайдалану
  7. Үздік тәжірибелер
  8. Қателерді өңдеу және ақауларды түзету
  9. Қолдау көрсетілетін тілдер

Үздік тәжірибелер

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 қолданғанда ғана жұмыс істейді.

Үлкен қосымшалармен жұмыс істегенде, жолдар мен аудармаларды бірнеше, кішірек оригиндарға бөлу пайдалы. Бұл тәсіл жинақ (bundle) өлшемдерін және тасымалдау уақыттарын азайтуға көмектесіп, тиімді әрі масштабталатын локализацияны қамтамасыз етеді.

Бұл тек клиент жағында рендер жасағанда қарапайым болса да, сервер жағында рендеринг үшін аудармаларды алғанда оригиндарды басқару тез күрделенеді. Алайда 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.

Қателерді өңдеу және ақауларды түзету

Nattskiftet компаниясының өніміНорвегияда жасалған