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

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

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 ლეიბლები

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