CSS kullanarak çok dilli site yapılabilir mi
merhaba arkadaşlar, sorum başlıktaki gibi biraz absürt olabilir merak ettim sadece
@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";