Τεκμηρίωση: Χρήση του TacoTranslate

Χρήση του TacoTranslate

Greek

Μετάφραση συμβολοσειρών

Υπάρχουν επί του παρόντος τρεις τρόποι για να μεταφράσετε συμβολοσειρές: Το στοιχείο Translate, το hook useTranslation ή το βοηθητικό πρόγραμμα translateEntries.

Χρήση του Translate component.
Εμφανίζει μεταφράσεις μέσα σε ένα στοιχείο span, και υποστηρίζει την απόδοση HTML.

import {Translate} from 'tacotranslate/react';

function Page() {
	return <Translate string="Hello, world!" />;
}

Μπορείτε να αλλάξετε τον τύπο του στοιχείου χρησιμοποιώντας, για παράδειγμα, as="p" στο στοιχείο.

Χρήση του useTranslation hook.
Επιστρέφει τις μεταφράσεις ως απλό κείμενο. Χρήσιμο, για παράδειγμα, σε ετικέτες meta.

import {useEffect} from 'react';
import {useTranslation} from 'tacotranslate/react';

function Page() {
	const helloWorld = useTranslation('Hello, world!');

	useEffect(() => {
		alert(helloWorld);
	}, [helloWorld]);

	return (
		<title>{useTranslation('My page title')}</title>
	);
}

Χρήση της βοηθητικής λειτουργίας translateEntries.
Μεταφράστε αλφαριθμητικά στον διακομιστή. Ενισχύστε τις εικόνες OpenGraph σας.

import {createEntry, translateEntries} from 'tacotranslate';

async function generateMetadata(locale = 'es') {
	const title = createEntry({string: 'Hello, world!'});
	const description = createEntry({string: 'TacoTranslate on the server'});

	const translations = await translateEntries(
		tacoTranslate,
		{origin: 'opengraph', locale},
		[title, description]
	);

	return {
		title: translations(title),
		description: translations(description)
	};
}

Πώς μεταφράζονται οι συμβολοσειρές

Όταν οι συμβολοσειρές φτάνουν στους διακομιστές μας, πρώτα τις επικυρώνουμε και τις αποθηκεύουμε, στη συνέχεια επιστρέφουμε αμέσως μια μηχανογραφημένη μετάφραση. Ενώ οι μηχανογραφημένες μεταφράσεις είναι γενικά χαμηλότερης ποιότητας σε σύγκριση με τις μεταφράσεις AI μας, παρέχουν μια γρήγορη αρχική απόκριση.

Ταυτόχρονα, ξεκινάμε μια ασύγχρονη εργασία μετάφρασης για να δημιουργήσουμε μια υψηλής ποιότητας, προηγμένη μετάφραση με τεχνητή νοημοσύνη για τη φράση σας. Μόλις η μετάφραση με ΤΝ είναι έτοιμη, θα αντικαταστήσει τη μηχανική μετάφραση και θα αποστέλλεται όποτε ζητάτε μεταφράσεις για τις φράσεις σας.

Εάν έχετε μεταφράσει χειροκίνητα μια συμβολοσειρά, αυτές οι μεταφράσεις έχουν προτεραιότητα και επιστρέφονται αντί αυτών.

Αξιοποίηση των origins

Τα έργα TacoTranslate περιέχουν αυτά που ονομάζουμε origins. Σκεφτείτε τα ως σημεία εισόδου, φακέλους ή ομάδες για τις συμβολοσειρές και τις μεταφράσεις σας.

import {TacoTranslate} from 'tacotranslate/react';

function Menu() {
	return (
		<TacoTranslate origin="application-menu">
			// ...
		</TacoTranslate>
	);
}

Οι Origins σας επιτρέπουν να διαχωρίζετε τις συμβολοσειρές σε ουσιαστικά δοχεία. Για παράδειγμα, θα μπορούσατε να έχετε ένα origin για την τεκμηρίωση και ένα άλλο για τη σελίδα μάρκετινγκ σας.

Για πιο λεπτομερή έλεγχο, μπορείτε να ορίσετε τα origins στο επίπεδο του component.

Για να το πετύχετε αυτό, σκεφτείτε να χρησιμοποιήσετε πολλαπλούς παρόχους TacoTranslate μέσα στο έργο σας.

Παρακαλώ σημειώστε ότι η ίδια συμβολοσειρά μπορεί να λάβει διαφορετικές μεταφράσεις σε διαφορετικές πηγές.

Τελικά, ο τρόπος με τον οποίο χωρίζετε τις συμβολοσειρές σε origins εξαρτάται από εσάς και τις ανάγκες σας. Ωστόσο, λάβετε υπόψη ότι η ύπαρξη πολλών συμβολοσειρών σε ένα origin μπορεί να αυξήσει τους χρόνους φόρτωσης.

Διαχείριση μεταβλητών

Πρέπει πάντα να χρησιμοποιείτε μεταβλητές για δυναμικό περιεχόμενο, όπως ονόματα χρηστών, ημερομηνίες, διευθύνσεις ηλεκτρονικού ταχυδρομείου και άλλα.

Οι μεταβλητές στις συμβολοσειρές δηλώνονται χρησιμοποιώντας διπλές αγκύλες, όπως {{variable}}.

import {Translate} from 'tacotranslate/react';

function Greeting() {
	const name = 'Juan';
	return <Translate string="Hello, {{name}}!" variables={{name}} />;
}

import {useTranslation} from 'tacotranslate/react';

function useGreeting() {
	const name = 'Juan';
	return useTranslation('Hello, {{name}}!', {variables: {name}});
}

Διαχείριση περιεχομένου HTML

Από προεπιλογή, το συστατικό Translate υποστηρίζει και αποδίδει περιεχόμενο HTML. Ωστόσο, μπορείτε να απενεργοποιήσετε αυτή τη συμπεριφορά ρυθμίζοντας το useDangerouslySetInnerHTML σε false.

Η απενεργοποίηση της απόδοσης HTML συνιστάται ανεπιφύλακτα κατά τη μετάφραση μη αξιόπιστου περιεχομένου, όπως περιεχομένου που δημιουργείται από χρήστες.

Όλα τα αποτελέσματα καθαρίζονται πάντα με τη χρήση του sanitize-html πριν την εμφάνιση.

import {Translate} from 'tacotranslate/react';

function Page() {
	return (
		<Translate
			string={`
				Welcome to <strong>my</strong> website.
				I’m using <a href="{{url}}">TacoTranslate</a> to translate text.
			`}
			variables={{url: 'https://tacotranslate.com'}}
			useDangerouslySetInnerHTML={false}
		/>
	);
}

Το παραπάνω παράδειγμα θα εμφανιστεί ως απλό κείμενο.

Απόδοση στην πλευρά του διακομιστή