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

Χρήση του TacoTranslate

Greek

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

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

Χρήση του συστατικού Translate.
Εξάγει μεταφράσεις μέσα σε ένα στοιχείο 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 μας, παρέχουν μια γρήγορη αρχική απάντηση.

Ταυτόχρονα, ξεκινάμε μια ασύγχρονη εργασία μετάφρασης για να δημιουργήσουμε μια υψηλής ποιότητας, σύγχρονη μετάφραση με AI για το κείμενό σας. Μόλις η μετάφραση με 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.

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

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

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