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"
/>

Бұл нәрсе өте мета сезіледі.

Ғаламдық origins массиві және бірнеше компонент origins

Бұл үлгі тек Next.js Pages Router қолданғанда ғана жұмыс істейді.

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

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