هل يمكنني أن استفيد من i18next.js بعيد عن الاستعانه بيreact كا ملف html بدن react
كيف يمكن بناء واجهة مستخدم متعدد اللغات
التعليق السابق
هل يمكن ان اربط فقط من خلال عنصر مثل h1 بدون التدخال في محتوى بحيث يترجم بدون كتابة الكلام في السكريبة على اللغاتان هواه ققط يترجم h1
تستطيع ربط العناصر في صفحة الويب مع ترجمة i18next.js بدون الحاجة إلى القيام بالترجمة في السكربت، بل يمكن القيام بذلك من خلال تحديد قيمة محددة في ملف اللغة.
فعند استخدام i18next.js، يمكن استخدام الخاصية data-i18n مع قيمة المفتاح (key) في ملف الترجمة.
كمثال، تحديد عنصر h1 الذي يحتوي على النص "Hello, world!" وترجمته إلى لغات متعددة بالطريقة التالية:
<!DOCTYPE html>
<html>
<head>
<title>My multilingual website</title>
<script src="https://cdn.jsdelivr.net/npm/i18next/dist/umd/i18next.min.js"></script>
</head>
<body>
<h1 data-i18n="greeting">Hello, world!</h1>
<script>
i18next.init({
lng: 'en',
resources: {
en: {
translation: {
greeting: 'Hello, world!'
}
},
es: {
translation: {
greeting: '¡Hola mundo!'
}
}
}
}, function(err, t) {
// initialized and ready to go!
// translate document to the user language
i18next.changeLanguage(navigator.language || navigator.userLanguage, function(err, t) {
// resources have been loaded
i18next.t('greeting', function(translatedText) {
document.querySelector('[data-i18n="greeting"]').innerHTML = translatedText;
});
});
});
</script>
</body>
</html>
اخ مصطفى انا اقصد بدن ما اكتب
en: { translation: { greeting: 'Hello, world!' } }, es: { translation: { greeting: '¡Hola mundo!' } }
هاذا اكون كاتبتو بي تدخل مني الهدف من هواه انا يكون في ترجمه لي العنصر بدون تدخل مني اترجم p او h1 اوي حاجه بي غض النظر عن داخل العنصر بدون كتابه مني
هاذا اكون كاتبتو بي تدخل مني الهدف من هواه انا يكون في ترجمه لي العنصر بدون تدخل مني اترجم p او h1 اوي حاجه بي غض النظر عن داخل العنصر بدون كتابه مني
لن يمكن لـ i18next القيام بهذا،
لتحقيق الترجمة التلقائية لمحتوى موقعك، يجب استخدام واجهة تطبيقات برمجية للاستفادة من خدمات الترجمة مثل Google Translate API أو Microsoft Translator API. اذ يتيح هذا لك إرجاع الترجمات بشكل ديناميكي في الصفحة عندما يتغير اللغة المختارة.
مثال:
const apiKey = 'مفتاح الاشتراك هنا';
const text = 'النص المراد ترجمته';
const sourceLang = 'en'; // ترميز اللغة الاساسي
const targetLang = 'fr'; // ترميز اللغة الفرعي
fetch(`https://translation.googleapis.com/language/translate/v2?key=$%7BapiKey%7D%60, {
method: 'POST',
body: JSON.stringify({
q: text,
source: sourceLang,
target: targetLang,
}),
headers: {
'Content-Type': 'application/json',
},
})
.then(response => response.json())
.then(data => {
const translation = data.data.translations[0].translatedText;
console.log(translation); // يطبع "Bonjour le monde!"
})
.catch(error => {
console.error(error);
});
يرجى ملاحظة أنه لا يمكن استخدام خدمات الترجمة الآلية بدون اشتراك في الخدمة والحصول على مفتاح API الخاص بك. بالطبع فإن هذا هو التطبيق البسيط للفكرة، يمكنك تطبيقها بفعالية اكثر عن طريق البحث عن توثيق الواجهة اكثر.
التعليقات