url içinde geçirmen daha doğru bir yaklaşım olur zaten google'da bunu öneriyor.
ama ux'i geliştirm ek açısından kullanıcının browser dilini ya da girdiği ülkeye göre otomatik yönlendirme yapabilirsin /tr /en gibi ilgili linklere daha hoş olur tabi :)
2015 sonu macbook pro 13' kullanıyorum, tavsiye etmem :D yakın zamanda m1 olana geçiş yapacağım muhtemelen
lang/tr.php lang/en.php olarak tutup geriye array dönersin.
// lang/en.php
return [
'Merhaba Dünya' => 'Hello World',
'Toplam %s İçerik Bulundu' => '%s Content Found'
];
Kullanırkende aslında bir fonksiyondan geçireceksin. Öncelikle mevcut dilin dosyasını yükletmen lazım.
// config.php gibi bir dosyan olduğunu varsayalım
$langKy = $_SESSION['lang'] ?? 'en'; // sessionda dil tanımsız ise varsayılan 'en' olarak ayarladım ben
$lang = file_get_contents(__DIR__ . '/lang/' . $langKey . '.php');
şimdi bir fonksiyon yazalım örneğin adı __() olabilir. Ve global olarak içine $lang değerini alıp gelen text varsa translate halini yoksa textin kendisini döndürelim.
function __($key) {
global $lang;
return $lang[$key] ?? $key;
}
artık kullanırkende şöyle kullanacağız.
// view örneği
<p>
<?=__('Merhaba Dünya')?>
</p>
<p>
<?=sprintf(__('Toplam %s İçerik Bulundu'), 3)?>
</p>
artık dilin ingilizce ise bu arkadaşları ingilizce görmen gerek. Dosyanın boyutu gözünü korkutmasın yormaz seni o kadar.
ilgili tablolarını http://sqlfiddle.com/ adresinden oluşturup bize linkini verebilirsen daha kolay yardımcı olabiliriz.
container classı yerine container-fluid verebilirsin
@erkamalper, ID olduğu için döngüye sokamazsın tekillikten dolayı
şöyle yapabilirsin, input'un yine bir tane olur. bunu dışarıda herhangi bir yerde tutabilirsin önemli değil.
<input id="mode-btn" class="mode-btn" name="mode-btn"
<?=cookiecheck('mode') == 'dark' ? 'checked' : null ?> type="checkbox">
<!-- header için olan kodların -->
<label for="mode-btn" class="mode-control">
<span><img src="/frontend/images/dark.svg" data-toggle="tooltip" data-bs-placement="bottom"
title="{{ __('general.darkmode')}}"></span>
<span><img src="/frontend/images/light.svg" data-toggle="tooltip" data-bs-placement="bottom"
title="{{ __('general.lightmode')}}"></span>
</label>
<!-- footer için olan kodların -->
<label for="mode-btn" class="mode-control">
<span><img src="/frontend/images/dark.svg" data-toggle="tooltip" data-bs-placement="bottom"
title="{{ __('general.darkmode')}}"></span>
<span><img src="/frontend/images/light.svg" data-toggle="tooltip" data-bs-placement="bottom"
title="{{ __('general.lightmode')}}"></span>
</label>
yazdığın javascript şu an geçerli olacaktır. Tek ihtiyacın belki switch işleminde görselleri değiştirmek. Onu da body classına göre kontrol edebilirsin
body:not(.dark) .mode-control span:not(:first-child) {
display: none;
}
body.dark .mode-control span:not(:last-child) {
display: none;
}
bu şekilde kontrol edebilirsin.
teknik olarak scroll çıkmasının sebebi tam ekrana sığmıyor oluşu, overflow-y: hidden diyerek sağdaki scrollu gizleyebilirsin, overflow-x: auto diyerekte allttaki scrollu aktif edebilirsin.
yan yana durabilmeleri için container'ın flex ve içindeki elemanlarında sabit bir genişliği ve flex-shrink: 0 olması gerekir.
hepsiburada react kütüphanesini kullanıyor, nasılın kolay bir cevabı yok kütüphaneyi öğrendiğinde nasılı anlayacaksın zaten buradan başlayabilirsin işe.
client-side tarafında oluşturamazsın, nodejs yazarsan oluşturabilirsin sadece javascript ile.
onu özelleştirip kullanıyor olabilirler çünkü yapısı çok benziyor, ayrıca kendileride yazmayı tercih etmiş olabilirler gayet normal bir durum :)