Üye Giriş/Çıkış Class’ı Ekleme Nedir?
Flarum’da kullanıcı etkileşimini optimize etmek, canlı bir topluluk oluşturmak için gereklidir. Bunu başarmanın güçlü bir yaklaşımı, kullanıcıların giriş durumuna göre farklı öğelerin koşullu görünürlüğünü kullanmaktır. Bu rehber, <body> öğesine global “giriş yapan” ve “giriş yapmayan” sınıflarının atanması için bir yöntem sunmaktadır; bu da forum yöneticilerinin hem giriş yapan kullanıcılar hem de misafirler için çeşitli öğelerin görünürlüğünü kontrol etmelerini sağlar.
Neden Gereklidir?
Kullanıcı Etkileşimi: Giriş yapan ve çıkış yapan kullanıcılar için içerik ve özellikleri özelleştirmek, topluluk içindeki etkileşimi artırır.
Görsel Netlik: Giriş durumuna göre öğe görünürlüğünü yöneterek, arayüz düzenli ve kullanıcı dostu kalır.
Özelleştirilebilirlik: Bu yöntem, forum yöneticilerine Flarum’un çekirdek kodunu değiştirmeden tasarım değişiklikleri uygulama esnekliği sunar.
Mevcut Eklentiler: Flarum topluluğunda Üye Giriş Sınıfını Gövde Etiketine Ekleme gibi benzer işlevler sunan eklentiler mevcuttur; ancak bu eklenti artık desteklenmemektedir. Bu eklentiler, kullanıcıların giriş durumuna göre gövde etiketine bir sınıf eklemelerine izin veriyordu ve yöneticilerin kullanıcı deneyimlerini görsel olarak özelleştirmelerini sağlıyordu. Ancak bu belirli eklenti güncel olmadığından, yaklaşımımız daha güvenilir bir seçenek sunmaktadır.
Fonksiyonlar
Global Sınıf Ataması: Script, kullanıcının giriş durumunu kontrol eder ve <body> öğesine “giriş yapan” veya “giriş yapmayan” sınıflarını atar.
Koşullu Görünüm: CSS kullanarak, atanan sınıfa göre herhangi bir öğenin görünürlüğünü yönetmenizi sağlar.
Kullanım Örneği
Bu işlevselliği uygulamak için aşağıdaki kod parçacıklarını kullanabilirsiniz.
JavaScript Kodu
JavaScript kodunu Yönetim Paneli’nde Görünüm sekmesindeki ‘Özel Alt Bilgi’ bölümüne ekleyin.
<script>
document.addEventListener("DOMContentLoaded", function() {
setTimeout(function() {
const isLoggedIn = app.session.user !== null;
if (!isLoggedIn) {
document.body.classList.add('logged-out');
} else {
document.body.classList.add('logged-in');
}
}, 1); // 1 ms
});
</script>
CSS Kodu
CSS kodunu Yönetim Paneli’nde Görünüm sekmesindeki ‘Özel CSS’ bölümüne ekleyin.
header.Hero.WelcomeHero {display: none;} /* Varsayılan olarak gizle */
body.logged-out header.Hero.WelcomeHero {display: block;} /* Misafirlere göster */
/* Örnek: CSS ile diğer öğeleri kontrol et */
body.logged-in .some-element {display: none;} /* Üyeleri gizle */
body.logged-out .some-element {display: block;} /* Misafirlere göster */
Nasıl Çalışır
JavaScript: Sayfa yüklendiğinde, DOMContentLoaded olayı tetiklenir. İçerik tamamen yüklendikten sonra, kullanıcı giriş durumunu kontrol etmek için 1 milisaniye bekler. Kullanıcı giriş yapmamışsa, logged-out sınıfını ekler; giriş yapmışsa, body’ye logged-in sınıfını ekler.
CSS: Kullanıcının giriş durumuna göre, bu sınıfları kullanarak herhangi bir öğenin görünürlüğünü kontrol edebilirsiniz. Örneğin, logged-in sınıfı mevcut olduğunda belirli içerikler gizlenebilir ya da logged-out sınıfı ile diğer içerikler görüntülenebilir.
Sonuç
Bu yöntem, Flarum forumunuzda kullanıcı deneyimini artırmanın etkili bir yoludur. Kullanıcıların giriş yapıp yapmadığına göre içeriği yöneterek, hem ziyaretçilere hem de üyelere özel deneyimler sunabilirsiniz. Bu kodu forumunuza eklemekten çekinmeyin ve hem kullanıcıların hem de yöneticilerin ihtiyaçlarına uygun bir yapı oluşturun.
Geri Bildirim
Bu kod parçacığını Flarum forumunuzda uygulamaktan çekinmeyin ve deneyimlerinizi veya geliştirmelerinizi paylaşın! Geri bildirimleriniz ve iyileştirmeleriniz topluluğumuzun bilgi birikimine katkıda bulunacaktır.
Kod hakkında öneri ve düşüncelerinizi bekliyorum. Ayrıca ben eklenti yazmayı bilmiyorum. Bunu eklenti haline tekrar getirecek biri olursa kullanmak isteyen kişiler olacağından eminim. Geri bildirimleriniz benim için çok değerli!
Bu konu flarum resmi topluluğunda açtığım konudan otomatik çeviridir. Yazım ve anlam hatalarını lütfen bildirin.
İngilizce konu: https://discuss.flarum.org/d/36153-add-member-logged-inout-class-simple-guide-no-extension
Son olarak, Flarum forumunuz için bir footer’a ihtiyacınız varsa yine benim paylaştığım ve yine eklentiye ihtiyaç duymadan tamamen Flarum ile uyumlu ve responsive olan bu koda şu konudan ulaşabilirsiniz: https://flarumtr.com/d/4233-flarum-footer-kodu-responsive-ve-uyumlu/5
