v2.5.2
Giriş yap

CSS kullanarak çok dilli site yapılabilir mi

Anonim
344 defa görüntülendi ve 1 kişi tarafından değerlendirildi

merhaba arkadaşlar, sorum başlıktaki gibi biraz absürt olabilir merak ettim sadece

ebykdrms
823 gün önce

@sarjaleti'nin verdiği cevaba biraz javascript eklemenizde mahzur yoksa alternatif olarak şu da mümkün:

  • Tüm sayfayı kapsayıcı içine alın. Sonra bu kapsayıcıyı dil sayısı kadar çoğaltın. Her kapsayıcıya da attribute olarak dili yazın.
  • Javascript ile body'ye aktif dili attribute olarak ekletin.
  • CSS ile body attribute'sine göre hangi dilin görüneceğini belirtin.
<head>
    <style>
        body > .page-content { display:none; }
        body[data-lang="tr"] > .page-content[data-lang="tr] { display:block; }
        body[data-lang="en"] > .page-content[data-lang="en] { display:block; }
        body[data-lang="es"] > .page-content[data-lang="es] { display:block; }
    </style>
    <script>
        // Dil değiştiren fonksiyon
        function changeLanguage(langCode="tr") {
            document.body.setAttribute("data-lang", langCode);
        }
        
        // Sayfa açılışında aktif olacak dili belirleyelim.
        // body elementi onload olduğunda bu veri kullanılarak changeLanguage() fonksiyonu çağırılacak.
        const startLanguage = "tr";
    </script>
</head>

<body onload="changeLanguage(startLanguage);">
    
    <div class="language-selector">
        <button onclick="changeLanguage("tr");">TR</button>
        <button onclick="changeLanguage("en");">EN</button>
        <button onclick="changeLanguage("es");">ES</button>
    </div>
    
    <section class="page-container" data-lang="tr">
        Tüm sayfanın Türkçe içerikli HTML kodu burada barınacak.
    </section>
    <section class="page-container" data-lang="en">
        Tüm sayfanın İngilizce içerikli HTML kodu burada barınacak.
    </section>
    <section class="page-container" data-lang="es">
        Tüm sayfanın İspanyolca içerikli HTML kodu burada barınacak.
    </section>
</body>

Bu kurguyu sitenizdeki tüm sayfalara uygulamalısınız. Ama bazı sorunlarla karşılaşmış olacaksınız.

  • Başka bir sayfaya geçtiğinizde seçtiğiniz dil kaybolacak ve ana dile ("tr") dönmüş olacaksınız.
  • Siteyi kapatıp tekrar açtığınızda seçtiğiniz dil kaybolacak ve yeniden dil seçmek zorunda kalacaksınız.

Bu durumda seçilen dili tarayıcıya kaydetmek ve sayfa açıldığında kayıtlı bir dil olup olmadığını kontrol edip direkt o dili aktif etmek gerekir.
Yukarıda head tag'ında bulunan script tag'ını şu şekilde değiştirebiliriz:

// Dil değiştiren fonksiyon
function changeLanguage(langCode="tr") {
    document.body.setAttribute("data-lang", langCode);
    
    // seçilen dili local storage'a kaydedelim:
    localStorage.setItem("selected-language", langCode);
}

// Daha önce local storage'a yazılmış dil verisini alalım.
const storagedLanguage = localStorage.getItem("selected-languge");

// Local storage'dan dil verisi alabildiysek bunu kullanalım. Bulamadıysak varsayılan dilimizi kullanalım.
const startLanguage = storagedLanguage ? storagedLanguage : "tr";