Ana içeriğe geç

Giriş

🎯 Bu modül ne yapar?​

Menus modülü, site navigasyon yapılarınızı - üst menüler, alt menüler, yan navigasyon, mobil menüler - dinamik olarak oluşturmanıza olanak tanır ve OneEntry'de yapılandırılmış sayfalardan çok seviyeli navigasyon oluşturur.

Bunu navigasyon yöneticiniz olarak düşünün - OneEntry yönetim panelinde menüler oluşturursunuz (sayfaları birbirine bağlayarak) ve bu modül, tam menü ağaç yapısını alır, böylece bağlantıları sabit kodlamadan dinamik olarak navigasyonu oluşturabilirsiniz.

📖 Basit Açıklama​

Her web sitesinin kullanıcıların içeriği bulmasına yardımcı olmak için navigasyona ihtiyacı vardır:

  • Üst Menü - Ana navigasyon (Anasayfa, Hakkında, Hizmetler, İletişim)
  • Mobil Menü - Açılır menü ile hamburger menü
  • Yan Menü - Kategori navigasyonu (Blog kategorileri, ürün filtreleri)
  • Alt Menü - Yasal bağlantılar, sosyal bağlantılar, site haritası
  • Mega Menü - Görseller ve kategorilerle karmaşık açılır menüler
  • Kırıntılar - Mevcut sayfa yolu (Anasayfa > Ürünler > Elektronik)

Sorunlar:

  • Güncellemesi zor - Menü değiştirmek için kodu yeniden dağıtmak gerekiyor
  • Çok dilli destek yok - Her dil için farklı menüler
  • Yönetici dostu değil - Her değişiklik için geliştiriciler gerekli
  • Menü kopyası - Aynı menü birden fazla yerde sabit kodlanmış

Menus çözümü:

Faydalar:

  • Kolay güncellemeler - Yönetim panelinde menüleri değiştirin, yeniden dağıtım yok
  • Çok dilli - Menüler otomatik olarak yerelleştirilir
  • Yönetici dostu - Geliştirici olmayanlar navigasyonu yönetebilir
  • Tek gerçek kaynak - Her yerde tek bir menü yapısı

✨ Temel Kavramlar​

Menü Nedir?​

Bir Menü, sayfalara bağlantılar içeren bir navigasyon yapısıdır:

  • Menü Öğeleri - Bireysel navigasyon bağlantıları (sayfalar)
  • Hiyerarşi - İç içe geçmiş yapı (ebeveyn → çocuklar)
  • Sıralama - Öğelerin görüntüleme sırası
  • Yerelleştirme - Dile göre çevrilmiş başlıklar
  • Dinamik - Yapıyı API'den al, uygulamanızda render et

Menü Yapısı​

Her menü bu yapıya sahiptir:

{
  id: 123,
  identifier: "header_menu",          // Benzersiz tanımlayıcı
  localizeInfos: {
    title: "Ana Üst Navigasyon"      // Menü başlığı
  },
  pages: [                            // Menü öğeleri (sayfalar)
    {
      id: 1,                          // Sayfa ID'si
      pageUrl: "/home",               // Sayfa URL'si
      localizeInfos: {
        title: "Anasayfa",            // Sayfada görüntüle
        menuTitle: "Anasayfa"         // Menülerde görüntüle
      },
      attributeValues: {},            // Özellik değerleri
      parentId: 0,                    // Üst düzey öğe
      position: 1                     // Görüntüleme sırası
    }
  ]
}

Menü Hiyerarşisi​

Menüler iç içe yapıları destekler (çok seviyeli navigasyon):

📂 Üst Menü
├─ 🏠 Anasayfa (derinlik: 0, parentId: 0)
├─ 📖 Hakkında (derinlik: 0, parentId: 0)
│  ├─ 👥 Ekip (derinlik: 1, parentId: 2)
│  ├─ 🏢 Ofis (derinlik: 1, parentId: 2)
│  └─ 📜 Tarih (derinlik: 1, parentId: 2)
├─ 🛍️ Ürünler (derinlik: 0, parentId: 0)
│  ├─ 💻 Elektronik (derinlik: 1, parentId: 4)
│  │  ├─ 📱 Telefonlar (derinlik: 2, parentId: 5)
│  │  └─ 💻 Dizüstü Bilgisayarlar (derinlik: 2, parentId: 5)
│  └─ 👕 Giyim (derinlik: 1, parentId: 4)
└─ 📞 İletişim (derinlik: 0, parentId: 0)

Yaygın Menü Türleri​

Menü TürüAçıklamaÖrnek Kullanım Durumları
Üst MenüAna site navigasyonuÜst navigasyon çubuğu, birincil bağlantılar
Alt MenüAlt bağlantılarYasal, sosyal, site haritası
Yan MenüKategori navigasyonuBlog kategorileri, ürün filtreleri
Mobil MenüMobil özel navigasyonHamburger menü, çekme menüsü
Mega MenüKategorilerle karmaşık açılır menüE-ticaret çok seviyeli navigasyon
KırıntılarMevcut sayfa yoluAnasayfa > Ürünler > Elektronik

Neden Menüler Modülünü Kullanmalıyım?​

FaydasıAçıklama
Dinamik NavigasyonMenü yapısını API'den al, sabit kodlama yok
Çok DilliMenüler otomatik olarak yerelleştirilir
Yönetici DostuGeliştirici olmayanlar navigasyonu güncelleyebilir
Hiyerarşik Yapıİç içe menüleri destekler (sınırsız derinlik)
SEO DostuUygun sayfa ilişkileri ve yapısı
Tek Gerçek KaynakHer yerde kullanılan tek bir menü yapısı

📋 Bilmeniz Gerekenler​

Menüler Yönetim Panelinde Oluşturulur​

SDK aracılığıyla menü oluşturamazsınız - menüler OneEntry yönetim panelinde oluşturulur:

OneEntry Yönetim Paneli → Menüler → Menü Oluştur → Sayfaları Ekle → Kaydet

SDK, menü yapılarını almak içindir, oluşturmak için değil.

Menü Öğeleri Sayfalardır​

Önemli: Menü öğeleri, OneEntry'de yapılandırılmış sayfalardır. Menülere rastgele bağlantılar ekleyemezsiniz - her menü öğesi bir sayfa olmalıdır.

Menü Hiyerarşisi (Ebeveyn-Çocuk İlişkileri)​

Menüler sınırsız iç içe geçme derinliğini destekler.

💡 Önemli Notlar​

Menüler Yönetim Panelinde Oluşturulur​

Unutmayın: SDK, menü yapılarını almak içindir, menü oluşturmak için değil.

Menü oluşturmak/düzenlemek için: OneEntry Yönetim Panelini veya Yönetim API'sini kullanın.

Menü Öğeleri Sayfalar Olmalıdır​

Menülere rastgele bağlantılar ekleyemezsiniz. Her menü öğesi, OneEntry'de yapılandırılmış bir sayfa olmalıdır.

Dış bağlantılar için geçici çözüm: OneEntry'de dış URL'lere sahip sayfalar oluşturun, ardından bunları menülere ekleyin.

Menü Hiyerarşisi Esnektir​

Menüler sınırsız iç içe geçme derinliğini destekler - ihtiyaç duyduğunuz kadar seviye oluşturabilirsiniz.

Çok Dilli Destek​

Menüler, defineOneEntry() içindeki langCode'a göre otomatik olarak çok dilli desteği sağlar.

En iyi uygulama: Menüleri kullanıcının tercih ettiği dilde alın.

Performans için Menüleri Önbelleğe Alın​

Menüler nadiren değişir - API çağrılarını azaltmak için önbellekleme uygulayın:

  • Ön Uç: localStorage, sessionStorage
  • Arka Uç: Redis, bellek önbelleği
  • TTL: 1 saat önerilir

📊 Hızlı Referans Tablosu​

YöntemAçıklamaKullanım Durumu
getMenuByMarker()İşaretleyiciye göre menüyü alBelirli menü yapısını al

❓ Sıkça Sorulan Sorular (SSS)​

Çok seviyeli bir menü (açılır navigasyon) nasıl oluşturabilirim?​

Menüler sınırsız iç içe geçme derinliğini destekler. Hiyerarşik yapılar oluşturmak için parentId kullanın. Yönetim panelinde, sayfaları iç içe geçirerek ebeveyn-çocuk ilişkileri oluşturabilirsiniz; bu, menü yapısında otomatik olarak yansır.

Menülere dış bağlantılar ekleyebilir miyim?​

Menü öğeleri, OneEntry'de yapılandırılmış sayfalar olmalıdır. Dış bağlantılar eklemek için, Sayfalar modülünde dış URL'lere sahip sayfalar oluşturun ve ardından bunları menünüze ekleyin.

Aktif menü öğesi durumunu nasıl yönetirim?​

Mevcut sayfa URL'sini her menü öğesinin pageUrl'si ile karşılaştırın. Eşleştiğinde, mevcut sayfayı navigasyonda vurgulamak için aktif bir sınıf/stil uygulayın.

Menümde çok fazla öğe var. Performansı nasıl optimize edebilirim?​

Menüleri localStorage veya sessionStorage kullanarak önbelleğe alın, çünkü nadiren değişirler. Birçok iç içe öğeye sahip mega menüler için tembel yükleme uygulayın. Daha iyi bir kullanıcı deneyimi için mobil uyumlu bir hamburger menüsü kullanmayı düşünün.

Kırıntı navigasyonu nasıl oluşturabilirim?​

Kırıntıları oluşturmak için menü hiyerarşisini kullanın. Mevcut sayfadan parentId ilişkileri aracılığıyla yukarı doğru izleyerek kırıntı yolunu oluşturun (Anasayfa > Kategori > Alt Kategori > Mevcut Sayfa).

Farklı bölümler için farklı menülerim olabilir mi?​

Evet! Farklı işaretleyicilere sahip birden fazla menü oluşturun (örneğin, header_menu, footer_menu, sidebar_menu) ve bunları ayrı ayrı getMenuByMarker() kullanarak alın.

🎓 En İyi Uygulamalar​

  • İşaretleyicileri kullanın, ID'leri değil - İşaretleyiciler ortamlar arasında kararlıdır
  • Menüleri önbelleğe alın - Nadir değişen veriler için API çağrılarını azaltın
  • Özyinelemeli ağaç oluşturun - Hiyerarşik yapı için parentId kullanın
  • Pozisyona göre sıralayın - Görüntüleme sırasına saygı gösterin
  • Aktif durumu yönetin - Mevcut sayfayı vurgulayın
  • Yedek menüler sağlayın - Hataları nazikçe yönetin
  • Çok dilli desteği sağlayın - Yerelleştirme için langCode kullanın
  • Mobil için optimize edin - Duyarlı navigasyonu uygulayın

Modülün kullanıcı arayüzü hakkında daha fazla bilgi https://doc.oneentry.cloud/docs/menu/introduction_menu

Menüler modülünün tanımı​

Menus modülü, sitenizin yapısını ve navigasyonunu tanımlar.

Menü, sitenizin yapısı ve navigasyonunun ana unsurlarından biridir. Menü ile ziyaretçilere uygulamanızın farklı bölümleri arasında gezinmeleri ve ihtiyaç duydukları bilgileri bulmaları için uygun bir yol sunarsınız.


const { Menus } = defineOneEntry(
  "your-project-url", {
    "token": "your-app-token"
  }
);

OneEntry Platformu'nda, menü yapısını doğrudan kişisel hesabınızdan oluşturabilirsiniz. Bu, menüye dahil edilen sayfaların setini, sıralarını ve başlıklarını uygulamanızın kaynak kodunu değiştirmeden değiştirmenizi sağlar.

Ayrıca, gerekirse menüde iç içe seviyeler oluşturabilir, bölümler ve alt bölümlerle ağaç benzeri bir yapı elde edebilirsiniz.

Tüm bunlar, uygulamanızın navigasyonu ile kişisel hesabınızdan rahat ve esnek bir şekilde çalışmanızı sağlar.

Menünün temelinde sayfalar vardır. Menü yapısı sayfalardan oluşturulur.

Şunları tanımlayabilirsiniz:

Hangi sayfaların menüye dahil edileceği Kullanıcıya hangi sırayla sunulacağı Belirli bir sayfaya giden menü öğesine hangi başlığın verileceği Menü öğelerinin iç içe geçmesi (Ağaç yapısı) Bu kavramların bazıları sayfalar bölümünde tartışılmıştır ve bazı sayfa ayarları, bu sayfalardan oluşturabileceğiniz menü yapısını etkiler.

🔗 İlgili Belgeler​