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

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

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

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