დოკუმენტაცია: საუკეთესო პრაქტიკები

საუკეთესო პრაქტიკები

Georgian

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 ლეიბლების გამოყენება

გლობალური წყაროების მასივი და მრავალ კომპონენტიანი წყაროები