Bir web sitesi için çoklu dil özelliği önemlidir. Herkes çeşitli dilleri (ya da en azından anlama) konusunda sorun yaşamkta sizin için bu özelliği eklediğinizde, bu yüzden, Web sitesi , ben senin kullanıcı deneyimini geliştirmeye yardımcı olur .
Statik bir web sayfası için çoklu dil özelliğini uygulamanın yalnızca bir yolunu açıklar, belki bunu çözmenin başka yollarını biliyorsunuzdur, ancak bu örnekte diller arasında geçiş yapmak için JavaScript kullanacağız (yalnızca İngilizce/İspanyolca) ) ve <span>a'yı dil geçişi olarak kullanmak .
1.Etiketleri Kimlikle Tanımlayın
Bu adım, HTML yapınızı tanımlarken önemlidir, çünkü çevirmek istediğiniz tüm HTML öğeleriniz için bir kimlik tanımlamanız gerekir.
❕Kimlik adlarını "l_*" terminolojisiyle tanımlamak önemlidir , çünkü JavaScript mantığında çeviri için kullanılacaktır.
Oluşturmak <span>geçiş
için sayfanın üst kısmında Ekle <span>İngilizce / İspanyolca arasında geçiş yapar geçiş ve ilave olacak click olayını JavaScript şimdi biz sadece böyle bir şey tanımlamak için, kodu bölümünde (sonraki adım).
JavaScript kodunu ekleyin
İlk önce, önceki adımda tanımlanan öğeyi alan link_toggle_lang değişkenini bildirin<span> ve bu değişken çeviri işlevinde kullanılacaktır.
Şimdi Web Sitenizde göstermek ve çevirmek istediğiniz tüm metinleri içeren iki nesne tanımlayalım .
KOPYALA const label_en = { l_title: "Title", l_subtitle: "Subtitle", l_text1: "this is an example text", l_text2: "additional text" } const label_es = { l_title: "Titulo", l_subtitle: "Subtitulo", l_text1: "este es un texto de ejemplo", l_text2: "texto adicional" }İşlevi tanımlayın ve uygun etkinliği tıkla It zamanı link_toggle_lang böylece bunu yapmak için, biz kullanacağız, tercüme olacağını tüm DOM öğelerini almak edeceğiz bu işlevde, değişken querySelectorAll bir kombinasyon halinde mülkiyet düzenli ifade almak için çevrilecek tüm öğeler, bu öğeler myLabels dizisinde depolanacaktır .
KOPYALA link_toggle_lang.addEventListener('click', function () { let lang = {} let myLabels = document.querySelectorAll("[id^='l_']") let current_lang = "es" ... })Şimdi, Web Sitesindeki mevcut dili yönetmek ve mevcut dili kontrol etmek için current_lang bayrağını tanımlamak ve ayarlamak gereklidir .
KOPYALA link_toggle_lang.addEventListener('click', function () { let lang = {} let myLabels = document.querySelectorAll("[id^='l_']") //Define the language flag let current_lang = "en" //Check the current_lang flag current_lang = link_toggle_lang.innerHTML.includes("English") === true ? "en" : "es" switch (current_lang) { case "es": link_toggle_lang.innerHTML = 'English' lang = label_es break case "en": link_toggle_lang.innerHTML = 'Español' lang = label_en break } ... })Son olarak JavaScript kodunun son bölümünde , for ifadesi myLabels dizisinde depolanan tüm DOM öğelerinin çevirisini yapar , mantık sadece lang nesnesinin (ID ile tanımlanan) her değerini dizi öğelerine atamak içindir.
KOPYALA link_toggle_lang.addEventListener('click', function () { let lang = {} let myLabels = document.querySelectorAll("[id^='l_']") //Define the language flag let current_lang = "en" //Check the current_lang flag current_lang = link_toggle_lang.innerHTML.includes("English") === true ? "en" : "es" switch (current_lang) { case "es": link_toggle_lang.innerHTML = 'English' lang = label_es break case "en": link_toggle_lang.innerHTML = 'Espau00f1ol' lang = label_en break } for (let i = 0; i < myLabels.length; i++) { myLabels[i].innerHTML = lang[myLabels[i].id] } }) Son sonuç