Yuqori menyuni o'zgartirish. Yo'l qidiruvchisining yuqori menyusidagi ochiladigan menyuni o'zgartiring

Yangi boshlanuvchilar uchun 8 MODx inqilob darsi. Sizga eslatib o'taman, biz MODx Revolution -ni o'rganish uchun sayt yaratmoqdamiz. Oxirgi darsda biz PHP kodining bo'laklari bo'laklari tushunchasini ko'rib chiqdik, bu bizga veb -saytimizga funksionallikni qo'shishga imkon beradi. Ushbu qo'llanmada biz maxsus parcha - Wayfinderni ko'rib chiqamiz va biz undan saytimizning dinamik menyusini yaratish uchun foydalanamiz.

Wayfinder nima?

Yo'naltiruvchi Sayt daraxtingizdagi manbalarga havolalarning saralanmagan ro'yxatini ko'rsatadigan parcha, bu ro'yxat chiqishi turi chaqiriq va ushbu qo'ng'iroq parametrlariga bog'liq. Umuman olganda, bu shablonda Wayfinder -ga qo'ng'iroq qilganingizda, u unda ko'rsatilgan parametrlarga mos keladigan resurslarni qidirishni boshlaydi va bu manbalarga havolalar ro'yxatini tartiblanmagan ro'yxat formatida yoki siz ko'rsatgan formatda qaytaradi. .

Nima uchun Wayfinder -dan foydalanish kerak?

Odatda men Wayfinder -dan saytning dinamik navigatsiyasi, ya'ni menyularini yaratish uchun foydalanaman. Ko'pchilikdan beri HTML shablon Menyular yaratish uchun tartiblanmagan ro'yxatlardan foydalanganligi uchun, Wayfinder buning uchun eng zo'r vositadir. Saytni yaratishda, siz avvalgi statik HTML saytida bo'lgani kabi, urllaringizni navigatsiya menyusiga ehtiyotkorlik bilan kiritishingiz mumkin. Shu bilan birga, har safar sahifani o'chirish yoki yaratish kerak bo'lganda, menyuga tegishli o'zgarishlarni kiritish, urllarni o'zgartirish kerak. Menyularingizni dinamik ravishda yaratish uchun Wayfinder parchasidan foydalanish bu bosh og'rig'idan saqlaydi, chunki u avtomatik ravishda o'zgarishlarni aniqlaydi va shunga mos ravishda menyularingizni o'zgartiradi.

Wayfinder juda moslashuvchan va menyuga qaysi manbalarni kiritish yoki chiqarib tashlashni, menyu shabloni nima ekanligini, saytingizning menyusi qanchalik chuqurligini aniqlash imkonini beradi. Sizning chegaralaringiz HTML / CSS kodingiz bilan belgilanadi.

Wayfinder -dan qanday foydalanishim mumkin?

Oldingi darslikda aytib o'tganimizdek, parchalarni chaqirish sintaksisi quyidagicha ko'rinadi: [[! Somesnippet]]

Bu oddiy qo'ng'iroq va bu etarli emas, bundan tashqari, biz qo'ng'iroqning ba'zi xususiyatlarini aniqlashimiz kerak. Wayfinder -ga kelsak, xususiyatlarda aniqlanishi kerak bo'lgan minimal qiymat: manba daraxtida Wayfinder resurslar ro'yxatini tuzishni boshlashi kerak. Shunday qilib, Wayfinder parchasiga qo'ng'iroqda siz kamida bitta parametrni ko'rsatishingiz kerak - boshlang'ich identifikator. Wayfinder parchasiga asosiy qo'ng'iroq shunday bo'ladi:

Bu qo'ng'iroq Wayfinderga daraxtning ildizidan boshlashini aytadi ( ID 0 saytning ildizini bildiradi) va tasdiqlangan katakchada tasdiq belgisi bo'lmagan barcha nashr qilingan manbalarni ko'rsatadi Menyulardan yashirish

Agar biz foydalanadigan shablonni ko'rib chiqsak, bizda bir nechta elementlar va ochiladigan ro'yxatlar mavjud yuqori menyuni ko'rishimiz mumkin.

Keling, ushbu menyu ko'rsatiladigan shablon va kodni ko'rib chiqaylik:

Ko'rib turganingizdek, bu ichki tartibsiz ro'yxat. Keling, ushbu kodni Wayfinder -ning asosiy qo'ng'irog'i bilan almashtiramiz va nima olishimizni ko'rib chiqamiz. Yuqoridagi kodni olib tashlang va o'rniga qo'ying:

[[! Yo'naltiruvchi? & startId = `0`]]]

Agar siz men bilan bir xil shablonni ishlatayotgan bo'lsangiz, sizning kodingiz shunday bo'ladi:

Shablonni saqlang va ko'rib chiqing bosh sahifa, u shunday ko'rinishi kerak:

Ajoyib! Ko'ryapsizmi, bir nechta elementlardan iborat oldingi menyuimiz endi oddiy menyuga almashtirildi, faqat bitta element - Uy. Bu bizga Wayfinder kutilganidek ishlayotganini va saytimizdan bitta sahifani olib, uning nomini menyu elementi sifatida ko'rsatishini ko'rsatadi.

Keling, yana ikkita resurs yarataylik. Men 3 ta bolalar sahifasi (MODx, o'quv qo'llanmalari, aloqa va tez -tez so'raladigan savollar) sahifasi haqida ma'lumot sahifasini qo'shmoqchiman. Siz saytingiz uchun xohlagan manbalarni yoki sahifalarni yaratishingiz mumkin. Ushbu mashqning maqsadi - Wayfinder ko'rsatadigan narsaga ega bo'lish uchun ba'zi aktivlarni yaratish.

Men sahifalarni yaratishni tugatdim va sayt manba daraxti shunday ko'rinadi:

Endi bizda bir nechta sahifalar bor, keling, Wayfinder -ga qo'ng'iroq qilish bizning saytimiz uchun qanday menyu yaratishini ko'rib chiqaylik:

Yaxshi xabar shundaki, bizning barcha sahifalarimiz menyuda paydo bo'ldi va har bir menyu bandini bosish orqali biz tegishli sahifaga o'tamiz. (Bu elementni sinab ko'rish uchun har bir sahifaga bir nechta matn qo'shing, masalan, "Bu haqida" sahifasiga "Bu sahifa haqida" qo'shishingiz mumkin va bu xabar sahifa ochilganda paydo bo'ladi. Shuni esda tutish kerakki, biz har biri uchun shablonni aniqlashimiz kerak. sahifada, lekin ichida bu lahza Men bu haqda tashvishlanmayman).

Yomon xabar shundaki, menyuni formatlash buzilgan, lekin biz buni tuzata olamiz. Ustiga bosing o'ng tugmasini bosing sichqonchani veb -sahifaga o'ting va ko'ring manba kodi(yoki buning uchun firebug -dan foydalaning), buni hozir ko'rasiz Yo'naltiruvchi HTMLni shunday yaratadi:

  • Uy
  • Haqida
    • MODx CMS
    • Kodlash paneli
      • Blog
      • Xizmatlar
  • Biz bilan bog'lanish
  • Darsliklar
  • Tss

Ko'rib turganingizdek, bu bizning boshlang'ich statik kodimizga juda o'xshaydi, bundan mustasno. Birinchidan, Wayfinder yaratildi

    sinfsiz nuqta sf-menyu bu bizning statik kodimizda ishlatilgan. CSS bilan ishlash uchun shablonga bu sinf kerak. Buni ham ko'rish mumkin
  • elementlar parametrga ega oraliq bu asl statik koddagi havola matn elementlariga ishora qiladi va yaratilgan Wayfinder kodida yo'q. Bundan tashqari, bizning statik HTML kodimiz o'z sinfiga ega joriy sahifali element bu bizning Wayfinder snippet kodimizda ko'rsatilmagan. Bu etishmayotgan qismlarning barchasi bizning menyuni yoqimsiz ko'rinishga olib keladi.

    Wayfinder parchasining chiqish uslubini qanday sozlash mumkin

    Wayfinder kodni qanday yaratganiga qarasak, bizda tabiiy savol bor: "Menyuni kerakli shaklda ko'rsatish uchun biz etishmayotgan kod qismlarini qanday qo'shamiz?" Javob juda oson, biz Wayfinder parchasini formatlash uchun shablon qismlaridan foydalanamiz.

    Wayfinder - bu moslashuvchan vosita va uni aniqlash uchun parametrlardan foydalanish mumkin tashqi ko'rinish chekinish. Ba'zi umumiy parametrlar menyu tuzishni qaysi darajadan boshlash kerakligini, qaysi elementlar menyuga kiritilmaganligini va boshqalarni aniqlash imkonini beradi. Boshqa parametrlar shablon parametrlari bo'lib, ular sizga o'rnatishga imkon beradi html kodi Sizning menyuingiz uchun shablon va hokazo. Ularning tavsifini rasmiy hujjatlarda topishingiz mumkin - http://rtfm.modx.com/display/ADDON/Wayfinder.

    Eslatma oling: ba'zi Wayfinder variantlari standart qiymatlarga ega.

    Bu, masalan, nima uchun Wayfinder tomonidan yaratilgan menyuda Bosh sahifa elementi sinf nomiga ega ekanligini tushuntiradi. birinchi faol”. Bu standart sinf, lekin biz o'z sinflarimizni shablon qismlarida belgilash orqali uni qayta yozishimiz mumkin.

    Biz ushbu qo'llanmada Wayfinder -ning bir nechta parametrlaridan foydalanamiz, lekin men sizga ularning barchasini o'rganib, ularning imkoniyatlarini tushunish uchun iloji boricha ulardan foydalanishni maslahat beraman. Wayfinder -ning standart parametrlari rasmiy veb -saytda aniq hujjatlashtirilganligi sababli, bu erda ular haqida gapirish ahmoqlik bo'lardi. Har xil menyularda ishlayotganda biz ulardan ko'proq foydalanamiz.

    Menyu shabloni ustida ishlashni boshlash uchun, keling, bir nechta mini-shablonlarni yaratib, ularni qismlarga saqlaylik. Siz ko'rasiz, bu qismlarda biz HTML kodidan foydalanamiz, lekin biz dinamik elementlarni almashtiryapmiz joy egalari(yoki joy egalari sintaksisi shunday ko'rinadigan:) [[+ joy egasi]]... Biz foydalanadigan to'ldirgichlar Wayfinder parchasida alohida bo'lib, ularning ta'rifi nomidan aniq, lekin siz har doim to'liq yordam uchun MODx hujjatlariga murojaat qilishingiz mumkin.

    Men shablonni yaratish uchun foydalanadigan qismlar:

    7in1 menyu Tashqi- bizning tashqi ul konteynerimiz uchun HTML kodni o'z ichiga oladi.

      [[+ wf.wrapper]]

    Ko'ryapsizmi, men tashqi ul uchun sinf qo'shdim. Alternativ usul Buning uchun wf.classes joy ushlagichidan foydalanish va keyin parametr yordamida yo'l nomeriga joriy qo'ng'iroqqa sinf nomini qo'shish kerak. tashqi sinf... Ammo soddaligi uchun birinchi usuldan foydalanaylik, lekin ikkalasi ham yaxshi ishlaydi ...

    7in1 menyu qatori- birinchi darajali menyu elementlarining HTML kodini o'z ichiga oladi

  • [[+ wf.linktext]] [[+ wf.wrapper]]

    • Bu erda asosiy nuqta - bu tegni qo'shdim asl statik HTML kodidagi kabi menyu havolasi matniga. Men wf.classes to'ldiruvchisini ham qo'shdim va bu menga joriy sahifa uchun standart "faol" sinfni qayta yozadigan sinfni aniqlash imkonini beradi.

    7in1 menyuda Ichki- ichki ul konteynerlarning HTML kodini o'z ichiga oladi

      [[+ wf.wrapper]]

    7in1 menyudaInnerRow- ichki darajadagi paragraflar satrlari uchun HTML kodni o'z ichiga oladi

  • [[+ wf.linktext]] [[+ wf.wrapper]]

    • Hammasi shunday, endi siz ko'rib turganingizdek bizning shablon qismlarimiz joyida (buyurtma uchun men ularni alohida toifaga joylashtirdim):

    Endi biz Wayfinder -ga qo'ng'iroqni o'zgartirishimiz mumkin, shuning uchun biz Wayfinder -ni chiqarish uchun ushbu kichik andozalardan foydalanishimiz mumkin. Agar siz shablon parametrlari ro'yxatiga nazar tashlasangiz (http://rtfm.modx.com/display/ADDON/Wayfinderni ko'zingiz oldida ochish yoki chop etish va ekran yonida saqlash foydali bo'ladi) , ko'rasizki, men o'z qismlarimni mos keladigan qo'ng'iroq parametrlariga o'xshash chaqirganman. Men buni qulaylik uchun qildim, bu menga qo'ng'iroq qilishni boshlaganimda nima bo'lganini kuzatishga yordam beradi. Parametrlarni qo'shamiz va bo'laklarni chaqiramiz. Yo'naltiruvchi endi chaqiriladi:

    [[! Yo'naltiruvchi? & startId = `0 '& tashqiTpl =` 7in1menuOuter` & rowTpl = `7in1menuRow` & innerTpl =` 7in1menuInner` & innerRowTpl = `7in1InnerRow` & hereClass =` current_page_item' & firstClass = ''] lastClass = ']

    Parametr qiymatlari bitta tirnoq (') bilan emas, balki apostroflar (") bilan yozilgan.

    Ajoyib, keling, bu qiyinchilikni ko'rib chiqaylik. Siz ko'rishingiz mumkinki, biz chiptalarni chaqirish uchun shablon parametrlaridan foydalanmoqdamiz, shunda Wayfinder kerakli HTML -ni to'g'ri sinflar bilan chiqaradi. Men qo'ng'iroq qiluvchini aniqladim bu erda sinf parametr va unga qiymat berdi joriy_sahifa_ elementi statik HTML shabloniga mos kelish uchun. Ko'ryapsizmi, men parametrlarni qoldirdim birinchi sinf va oxirgi sinf bo'sh Buning sababi shundaki, mening HTML shablonim menyuning birinchi va oxirgi elementlari uchun sinf o'rnatmaydi, shuning uchun ular bir -biriga mos kelmasligi uchun men bo'sh satrlarni qayta yozganman.

    Ko'rinib turibdiki, bizning menyu biz xohlagan tarzda ko'rinadi. To'g'ri uslublar ochiladigan menyuda ishlatiladi. Agar siz manba kodiga qarasangiz, yaratilganligini ko'rasiz Yo'naltiruvchi"Om HTML kodi tanib bo'lmas darajada o'zgardi:

    • Uy
    • Haqida
      • MODx CMS
      • Kodlash paneli
        • Blog
        • Xizmatlar
    • Biz bilan bog'lanish
    • Darsliklar
    • Tss

    Bu kod bizning andozamizning asl statik kodiga mos keladi, lekin u qo'ng'iroq orqali yaratilgan Yo'naltiruvchi.

    Birgalikda ishlatishingiz mumkin bo'lgan boshqa ko'plab parametrlar mavjud Yo'naltiruvchi menyularingizni yaratish uchun. Keyingi darslarda biz murakkab menyularni va ularni Wayfinder -ga qanday qo'shishni ko'rib chiqamiz. Xulosa qilib aytganda: endi bizning saytimiz qandaydir shaklga ega bo'ldi va bizda funktsional va dinamik menyu mavjud.

    Assalomu alaykum, aziz o'quvchilar. Oxirgi darsda biz saytni biroz kontent bilan to'ldirdik (), endi vaqti keldi menyuga hamma narsani olib kiring shuning uchun foydalanuvchilar ularga o'tishlari mumkin.

    Dinamik yaratish MODX menyusi biz parchadan foydalanamiz PdoMenu paketdan pdoTools... Ishni boshlashdan oldin asosiy hujjatlarni ko'rib chiqing.

    PdoMenu hujjatlari

    Variantlar

    Shablon parametrlari

    CSS sinf parametrlari

    Rasmiy misollar


    rasmiy hujjatlarni bu erda o'qishingiz mumkin. Endi menyu qo'ng'iroqlarining eng tipikini ko'rib chiqaylik.

    PdoMenu -ga qo'ng'iroq

    Variant 1... Bu statik menyu o'rniga pdoMenu parchasini chaqiring Buning uchun manba daraxtida, "yorlig'ida Elementlar"Parchalar bo'limida filialni kengaytiring pdoTools, keyin bosing pdoMenu sichqonchaning chap tugmachasini bosing (tugmani qo'yib yubormang) va bu parchani menyuga qo'ng'iroq qilmoqchi bo'lgan joyga torting, so'ngra ochilgan oynani to'ldiring. kerakli parametrlar va bosing " Saqlash«.

    2 -variant... Biz qo'ng'iroqni qo'lda yozamiz.

    Oddiy misollar

    Oddiy bir darajali menyu

    Masalan, bizda eng keng tarqalgan menyu mavjud bo'lib, quyidagi html formatlash bilan.

    Natijada menyu chaqiruvi bilan quyidagi kod paydo bo'ladi:

    []

    • & ota -onalar = "0" - ota -onalar ro'yxati (menimcha, men tanlovni cheklamayman, chunki men hali ham ko'rsataman ma'lum sahifalar);
    • & level = `1` - joylashtirish darajasi (in bu ish emas);
    • & resources = `2,3,4,5` - menyuda ko'rsatiladigan manbalar ro'yxati;
    • & firstClass = `0` - birinchi menyu bandi uchun sinf (qaysi biri emas);
    • & lastClass = `0` - oxirgi menyu bandining klassi (hech qanday emas);
    • & tashqiClass = `top -menu` - menyu o'rash klassi (ul bilan almashtirilgan);
    • & hereClass = `current-menu-item`-faol menyu punkti uchun sinf (li bilan almashtirilgan);
    • & rowClass = `menu -item` - bitta menyu qatori klassi (li bilan almashtirilgan).

    Ikki darajali maxsus yuklash menyusi

    Statik HTML kodi quyidagicha ko'rinadi:

    Uning chiqish kodi shunday bo'ladi:

"& tplInner =" @ INLINE
    [[+ o'rash]]
"& tplStart =" @ INLINE [[+ menyu]][[+ o'rash]] `]]