هل يمكنني أن استفيد من i18next.js بعيد عن الاستعانه بيreact كا ملف html بدن react
كيف يمكن بناء واجهة مستخدم متعدد اللغات
بالطبع تستطيع ذلك من خلال i18next.js مع أي إطار عمل أو حتى دون إطار عمل.
حيث يمكن استخدام i18next.js لإدارة ترجمة نصوص واجهة المستخدم بسهولة في ملف HTML أو في أي نوع من أنواع التطبيقات الويب.
وإذا كنت ترغب في استخدام i18next.js في ملف HTML بدون استخدام إطار عمل مثل React، فتستطيع الإعتماد على i18next.js مع الـ JavaScript والـ DOM.
وتضمين i18next.js في صفحة HTML الخاصة بك واستخدامها لترجمة النصوص في عناصر DOM.
كمثال:
<!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>
<p data-i18n="description">This is a multilingual website.</p>
<script>
i18next.init({
lng: 'en',
resources: {
en: {
translation: {
greeting: 'Hello, world!',
description: 'This is a multilingual website.'
}
},
es: {
translation: {
greeting: '¡Hola mundo!',
description: 'Este es un sitio web multilingüe.'
}
}
}
}, 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
document.querySelector('[data-i18n="greeting"]').innerHTML = t('greeting');
document.querySelector('[data-i18n="description"]').innerHTML = t('description');
});
});
</script>
</body>
</html>
في الكود تم استخدام i18next.js لترجمة العناصر DOM باستخدام data-i18n وخاصية innerHTML، وتحميل المصادر باستخدام resources، وتحديد اللغة الافتراضية باستخدام lng، ويمكن تغيير اللغة باستخدام changeLanguage.
وإذا كنت تستخدم إطار عمل مثل React، فيمكنك استخدام i18next.js بشكل مشابه لترجمة النصوص في التطبيقات المبنية بـ React.
بالطبع تستطيع ربط ترجمة مع عنصر "select" لتمكين المستخدمين من تبديل اللغات بسهولة. يمكنك استخدام i18next.js مع عنصر "select" عن طريق تحديد قيمة "value" لكل خيار وتحديد اللغة المناسبة باستخدام i18next.js عند تحديد خيار محدد.
<!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>
<p data-i18n="description">This is a multilingual website.</p>
<select id="languageSelect">
<option value="en">English</option>
<option value="es">Español</option>
</select>
<script>
i18next.init({
lng: 'en',
resources: {
en: {
translation: {
greeting: 'Hello, world!',
description: 'This is a multilingual website.'
}
},
es: {
translation: {
greeting: '¡Hola mundo!',
description: 'Este es un sitio web multilingüe.'
}
}
}
}, 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
document.querySelector('[data-i18n="greeting"]').innerHTML = t('greeting');
document.querySelector('[data-i18n="description"]').innerHTML = t('description');
// update language on select change
document.getElementById('languageSelect').addEventListener('change', function(e) {
var newLanguage = e.target.value;
i18next.changeLanguage(newLanguage, function(err, t) {
document.querySelector('[data-i18n="greeting"]').innerHTML = t('greeting');
document.querySelector('[data-i18n="description"]').innerHTML = t('description');
});
});
});
});
</script>
</body>
</html>
هل يمكن ان اربط فقط من خلال عنصر مثل 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 الخاص بك. بالطبع فإن هذا هو التطبيق البسيط للفكرة، يمكنك تطبيقها بفعالية اكثر عن طريق البحث عن توثيق الواجهة اكثر.
التعليقات