Menü
ücretsiz
Kayıt
Ev  /  Programlar/ Bootstrap kullanan çok seviyeli MODX menüsü. PdoMenu - belirli sayfalarda MODX Modx menülerinde menüler oluşturma

Bootstrap kullanan çok düzeyli MODX menüsü. PdoMenu - belirli sayfalarda MODX Modx menülerinde menüler oluşturma

Bugün Wayfinder snippet'ini (Wayfinder snippet dokümantasyonu) kullanarak blogumuz için bir menü yapacağız. Blogumuzdaki üst gezinme ve ana gezinme iki bölümden oluşur:

  • Mobil
  • Ova

Bu nedenle, navigasyonu iki kopya halinde yapacağız). Böylece, ana navigasyonumuzu parçalara ayıracağız. Belgelere göre 4 parça almalısınız (boşlukları kaldırmayı unutmayın):

&outerTpl=`wayOuterTpl` - ana listenin öbek sarmalayıcısı

    [ [+wf.sarmalayıcı] ]

&innerTpl=`wayInnerTpl` - açılır liste için yığın sarıcı

    [ [+wf.sarmalayıcı] ]

&rowTpl=`wayRowTpl` - liste öğelerini gösteren öbek

  • [ [+wf.linktext] ]

    • &parentRowTpl=`wayHasChildTpl` - Üst liste öğelerini gösteren yığın

  • [ [+wf.linktext] ] [ [+wf.sarmalayıcı] ]

    • Ve işte başlık yığınındaki snippet'e yapılan çağrı:

    [ ]

    &startId=`0` - pasaj geçişinin başlangıcını, bizim durumumuzda site kökünden ayarlayın.
    &level=`2` - menümüzdeki seviye sayısı.

    Bir sonraki adım, mobil menümüzü görüntülemektir. İlke yukarıda belirttiğim gibi, burada da 4 parçaya ihtiyacımız var.

    &outerTpl=`wayOuterMobileTpl` - ana listenin sarıcı öbeği.

    &innerTpl=`wayInnerMobileTpl` - dahili liste sarıcı yığın.

    [ [+wf.sarmalayıcı] ]

    &rowTpl=`wayRowMobileTpl` - Liste öğelerini gösteren yığın.

    [ [+wf.sarmalayıcı] ]

    &innerRowTpl=`wayInnerRowMobileTpl` - Dahili liste öğelerini görüntüleyen yığın.

    [ [+wf.sarmalayıcı] ]

    Wayfinder çağrısı şuna benzer:

    [ ]

    Her şey aynı, sadece parçalar değişti. Artık mobil navigasyonumuz var, Opera ve Chrome için Duyarlı Web Tasarım Test Cihazı aracıyla test edebilirsiniz.

    İşte başlık öbeği için tam kod:

    [ ]
    [ ]

    Navigasyonumuz hazır! Videoda ayrıca bir blogda kategori menüsü oluşturmaya da baktık. Prensip aynı olduğu için burada dikkate almadım, videoyu izleyin) Sonraki derslerde görüşmek üzere!

    Yeni başlayanlar için MODx Revolution ders 8'e başlayalım. MODx Devrimini öğrenmek için bir site yaptığımızı hatırlatırım. Son derste, web sitemize işlevsellik eklememizi sağlayan PHP kod parçaları olan snippet kavramına baktık. Bu eğitimde, özel bir pasaja - Wayfinder'a bakacağız ve onu sitemiz için dinamik bir menü oluşturmak için kullanacağız.

    Yön Bulucu nedir?

    Yön bulucu site ağacınızdaki kaynaklara giden bağlantıların sıralanmamış bir listesini görüntüleyen bir parçacıktır, liste çıktısının türü parçacık çağrısına ve bu çağrının parametrelerine bağlıdır. Genel anlamda bu, şablonunuzda Wayfinder'a bir çağrı yaptığınızda, şablon içinde verilen parametrelerle eşleşen kaynakları aramaya başlar ve bu kaynaklara yönelik bağlantıların bir listesini sıralanmamış bir liste biçiminde veya biçiminde döndürür. siz belirtin

    Wayfinder'ı neden kullanmalısınız?

    Wayfinder'ı genellikle dinamik site gezintisi, yani bir menü oluşturmak için kullanırım. Çoğu HTML şablonu menü oluşturmak için sırasız listeler kullandığından, Wayfinder bunun için mükemmel bir araçtır. Bir site oluştururken, daha önce statik bir HTML sitesinde yaptığınız gibi URL'lerinizi gezinme menüsüne özenle ekleyebilirsiniz. Aynı zamanda, her sayfa silmeniz veya oluşturmanız gerektiğinde, menünüzde uygun değişiklikleri yapmanız, URL'leri değiştirmeniz gerekir. Menülerinizi dinamik olarak oluşturmak için Wayfinder snippet'ini kullanmak, değişiklikleri otomatik olarak algılayıp menünüzü buna göre değiştirdiği için bu baş ağrısını önler.

    Wayfinder oldukça esnektir ve menüye hangi kaynakları dahil edeceğinizi veya menüden çıkaracağınızı, menü şablonunun ne olduğunu, sitenizin menüsünün ne kadar derin olduğunu tanımlamanıza olanak tanır. Sınırlarınız HTML/CSS kodunuz tarafından belirlenir.

    Wayfinder nasıl kullanılır?

    Bir önceki derste bahsettiğimiz gibi, snippet'leri çağırmak için kullanılan sözdizimi şöyle görünür: [[!bazı snippet]]

    Bu sadece basit bir çağrı ve yeterli değil, bunun dışında bu çağrının bazı özelliklerini tanımlamamız gerekiyor. Wayfinder söz konusu olduğunda, özelliklerde tanımlanması gereken minimum değer, Wayfinder'ın kaynak ağacında kaynaklar listesini oluşturmaya başlaması gereken yerdir. Bu nedenle, Wayfinder snippet çağrısında en az bir parametre belirtilmelidir - ilk kimlik. Bu durumda Wayfinder snippet'ine yapılan temel çağrı şöyle görünür:

    Bu çağrı, Wayfinder'a ağacın kökünden başlamasını söyler ( İD 0, sitenin kökü anlamına gelir) ve yayınlanan ve onay kutusunda bir onay işareti olmayan tüm kaynakları gösterir. Menülerden Gizle (Menüden Gizle).

    Kullandığımız şablona bakarsak, birkaç öğe ve açılır liste içeren bir üst menü görebiliriz.

    Bu menüyü oluşturan şablona ve koda bir göz atalım:

    Gördüğünüz gibi, bu iç içe sıralanmamış bir listedir. Bu kodu basit bir Wayfinder çağrısıyla değiştirelim ve ne olacağını görelim. Yukarıdaki kodu silin ve yerine yapıştırın:

    [[!Yol Bulucu? &startId=`0` ]]

    Benimle aynı şablonu kullanıyorsanız, kodunuz şuna benzer:

    Şablonu kaydedin ve ana sayfaya bakın, şöyle görünmelidir:

    Fantastik! Birkaç öğeye sahip olan önceki menümüzün yerini artık tek bir öğeden oluşan basit bir menüye bıraktığını görebilirsiniz - Ana Sayfa. Bu bize Wayfinder'ın beklendiği gibi çalıştığını ve sitemizden bir sayfa alıp başlığını bir menü öğesi olarak gösterdiğini söyler.

    Birkaç kaynak daha oluşturalım. 3 alt sayfalı (MODx, Öğreticiler, İletişim ve SSS sayfaları) bir Hakkında sayfası ekleyeceğim. Siteniz için herhangi bir kaynak veya sayfa oluşturabilirsiniz. Bu alıştırmanın amacı, Wayfinder'ın gösterecek bir şeyi olması için bazı kaynaklar yaratmaktır.

    Sayfa oluşturmayı bitirdim ve site kaynak ağacım şöyle görünüyor:

    Şimdi birkaç sayfamız var, Wayfinder'ı çağırmanın sitemiz için nasıl bir menü oluşturacağını görelim:

    İyi haber şu ki, tüm sayfalarımız menüde göründü ve her menü öğesine tıklayarak ilgili sayfaya ulaşıyoruz. (Bu öğeyi test etmek için her sayfaya biraz metin ekleyin, örneğin Hakkında sayfasında "Bu bir Hakkında sayfasıdır" ekleyebilirsiniz ve sayfa açıldığında bu mesaj görünecektir. Bunun için bir şablon tanımlamamız gerektiğini unutmayın. her sayfa, ama şu anda bunun için endişelenmeyeceğim).

    Kötü haber şu ki, menü biçimlendirmesi bozuldu ama düzeltebiliriz. Web sayfasına sağ tıklayın ve kaynak koduna bakın (veya bunun için firebug kullanın), şimdi göreceksiniz Yön bulucu HTML'yi şu şekilde oluşturur:

    • Ev
    • Hakkında
      • MODX İYS
      • Kodlama Pedi
        • Blog
        • Hizmetler
    • Bize Ulaşın
    • Öğreticiler
    • SSS

    Gördüğünüz gibi, birkaç istisna dışında ilk statik kodumuza çok benziyor. İlk olarak, Wayfinder oluşturuldu