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

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

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

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