هل يمكنني أن استفيد من i18next.js بعيد عن الاستعانه بيreact كا ملف html بدن 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>
التعليقات