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

Χρησιμοποιώντας το TacoTranslate

Greek

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

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

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

import {Translate} from 'tacotranslate/react';

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

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

Χρήση του 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 μας, παρέχουν μια γρήγορη αρχική απόκριση.

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

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

Αξιοποίηση προελεύσεων

Τα έργα 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.

Η απενεργοποίηση του rendering 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}
		/>
	);
}

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

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