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.
<h1 id="l_title">Title</h1>
<div>
<h2 id="l_subtitle">Subtitle</h2>
<p id="l_text1">some text in english</p>
<p id="l_text2">aditional text in english</p>
</div>
❕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).
<div>
<span id="link-toggle-lang">Español</span>
</div>
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.
let link_toggle_lang = document.getElementById("link-toggle-lang")
Şimdi Web Sitenizde göstermek ve çevirmek istediğiniz tüm metinleri içeren iki nesne tanımlayalım .
KOPYALAconst 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 .
KOPYALAlink_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]
}
})
