• 0

Web Sitesinde çoklu dil özelliği

2 ay önce , Okuma süresi 2 dakika.

Web Sitesinde çoklu dil özelliği
Bu özelliği bir Web Sitesinde uygulamanın bir yol

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.

KOPYALA
<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).

    KOPYALA
    <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.

    KOPYALA
    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 .

    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ç
  •  

          #Yazılım #javascript #html