قائمة طعام
مجانا
تسجيل
بيت  /  البرامج/ قائمة MODX متعددة المستويات باستخدام Bootstrap. PdoMenu - إنشاء قوائم في قوائم MODX Modx على صفحات محددة

قائمة MODX متعددة المستويات باستخدام Bootstrap. PdoMenu - إنشاء قوائم في قوائم MODX Modx على صفحات محددة

سنقوم اليوم بإعداد قائمة لمدونتنا باستخدام مقتطف Wayfinder (توثيق مقتطف Wayfinder). يتكون التنقل العلوي والأساسي في مدونتنا من جزأين:

  • متحرك
  • سهل

لذلك ، سنقوم بالتنقل في نسختين). لذلك ، سنقسم التنقل الرئيسي إلى أجزاء. وفقًا للوثائق ، يجب أن تحصل على 4 أجزاء (لا تنس إزالة المسافات):

& OuterTpl = `wayOuterTpl` - غلاف متقطع من القائمة الرئيسية

& innerTpl = `wayInnerTpl` - غلاف متقطع للقائمة المنسدلة

& rowTpl = `wayRowTpl` - عرض عناصر القائمة

  • [[+ wf.linktext]]
  • & parentRowTpl = `wayHasChildTpl` - مقطع يعرض عناصر القائمة الرئيسية

    وهنا استدعاء المقتطف في مقطع الرأس:

    [ ]

    & startId = `0` - عيّن بداية مرور المقتطف ، في حالتنا من جذر الموقع.
    & level = `2` - عدد المستويات في قائمتنا.

    الخطوة التالية هي عرض قائمة الهاتف المحمول الخاصة بنا. المبدأ مشابه لما ذكرته أعلاه ، نحتاج هنا أيضًا إلى 4 أجزاء.

    & OuterTpl = `wayOuterMobileTpl` - جزء مُجمّع من القائمة الرئيسية.

    & innerTpl = `wayInnerMobileTpl` - مقطع غلاف القائمة الداخلية.

    [[+ wf.wrapper]]

    & rowTpl = `wayRowMobileTpl` - مقطع يعرض عناصر القائمة.

    [[+ wf.wrapper]]

    & innerRowTpl = `wayInnerRowMobileTpl` - مقطع يعرض عناصر القائمة الداخلية.

    [[+ wf.wrapper]]

    ستبدو المكالمة إلى Wayfinder كما يلي:

    [ ]

    كل شيء على حاله ، الأجزاء فقط هي التي تغيرت. الآن لدينا التنقل عبر الهاتف المحمول ، يمكنك اختباره باستخدام أداة اختبار تصميم الويب المستجيب لمتصفح Opera و Chrome.

    هذا هو الكود الكامل لجزء الرأس:

    التنقل لدينا جاهز! في الفيديو ، نظرنا أيضًا في إنشاء قائمة فئة في مدونة. بما أن المبدأ هو نفسه ، لم أعتبره هنا ، شاهد الفيديو) نراكم في الدروس القادمة!

    لنبدأ الدرس MODx Revolution 8 للمبتدئين. أذكرك بأننا نقوم بإنشاء موقع لتعلم MODx Revolution. في الدرس الأخير ، نظرنا في مفهوم المقتطفات ، وهي أجزاء من كود PHP تسمح لنا بإضافة وظائف إلى موقعنا الإلكتروني. في هذا البرنامج التعليمي ، سنلقي نظرة على مقتطف خاص - Wayfinder ، وسنستخدمه لإنشاء قائمة ديناميكية لموقعنا.

    ما هو برنامج Wayfinder؟

    وايندرعبارة عن مقتطف يعرض قائمة غير مرتبة من الارتباطات إلى الموارد في شجرة موقعك ، ويعتمد نوع إخراج القائمة على استدعاء المقتطف ومعلمات هذه المكالمة. بشكل عام ، هذا يعني أنه عند إجراء مكالمة إلى Wayfinder في القالب الخاص بك ، فإنه يبدأ في البحث عن الموارد التي تطابق المعلمات الواردة فيه ويعيد قائمة بالارتباطات إلى هذه الموارد بتنسيق قائمة لم يتم فرزها أو بالتنسيق. تحدده.

    لماذا استخدام Wayfinder؟

    عادةً ما أستخدم Wayfinder لإنشاء تنقل ديناميكي في الموقع ، أي قائمة. نظرًا لأن معظم قوالب HTML تستخدم قوائم غير مرتبة لإنشاء قوائم ، فإن Wayfinder هي الأداة المثالية لذلك. عند إنشاء موقع ، يمكنك إدخال عناوين URL الخاصة بك في قائمة التنقل بشق الأنفس ، تمامًا كما فعلت من قبل في موقع HTML ثابت. في الوقت نفسه ، في كل مرة تحتاج فيها إلى حذف أو إنشاء صفحة ، تحتاج إلى إجراء التغييرات المناسبة في قائمتك ، وتغيير عناوين URL. يؤدي استخدام مقتطف Wayfinder لإنشاء قوائمك ديناميكيًا إلى تجنب هذا الصداع ، حيث يكتشف التغييرات تلقائيًا ويغير قائمتك وفقًا لذلك.

    برنامج Wayfinder مرن للغاية ويسمح لك بتحديد الموارد التي يجب تضمينها أو استبعادها من القائمة ، وما هو قالب القائمة ، ومدى عمق قائمة موقعك. يتم تحديد حدودك من خلال كود HTML / CSS الخاص بك.

    كيفية استخدام برنامج Wayfinder؟

    كما ذكرنا في الدرس السابق ، تبدو بنية مقتطفات الاستدعاء كما يلي: [[! somesnippet]]

    هذه مجرد دعوة أساسية وليست كافية ، بخلاف أنه يتعين علينا تحديد بعض خصائص هذه المكالمة. في حالة Wayfinder ، فإن الحد الأدنى الذي يجب تحديده في الخصائص هو المكان الذي يجب أن يبدأ فيه Wayfinder في شجرة الموارد في بناء قائمة الموارد. وبالتالي ، في استدعاء مقتطف Wayfinder ، يجب تحديد معلمة واحدة على الأقل - المعرف الأولي. سيبدو الاستدعاء الأساسي لمقتطف Wayfinder في هذه الحالة كما يلي:

    تخبر هذه المكالمة برنامج Wayfinder بالبدء من جذر الشجرة ( بطاقة تعريف 0 يعني جذر الموقع) ويعرض جميع الموارد التي تم نشرها والتي لا تحتوي على علامة اختيار في خانة الاختيار إخفاء من القوائم (إخفاء من القائمة).

    إذا ألقينا نظرة على النموذج الذي نستخدمه ، فيمكننا رؤية القائمة العلوية مع العديد من العناصر والقوائم المنسدلة.

    دعنا نلقي نظرة على القالب والكود الذي يعرض هذه القائمة:

    كما ترى ، هذه قائمة متداخلة غير مرتبة. دعنا نستبدل هذا الرمز بمكالمة Wayfinder الأساسية ونرى ما سيحدث. احذف الرمز أعلاه والصقه في مكانه:

    [[! Wayfinder؟ & startId = `0`]]

    إذا كنت تستخدم نفس القالب مثلي ، فستبدو شفرتك كما يلي:

    احفظ القالب وألق نظرة على الصفحة الرئيسية ، يجب أن يبدو كما يلي:

    رائع! يمكنك أن ترى أن قائمتنا السابقة ، التي كانت تحتوي على عدة عناصر ، قد تم استبدالها الآن بقائمة بسيطة تحتوي على عنصر واحد فقط - الصفحة الرئيسية. يخبرنا هذا أن Wayfinder تعمل كما هو متوقع وأنها تأخذ صفحة واحدة من موقعنا وتعرض عنوانها كعنصر قائمة.

    لنقم بإنشاء المزيد من الموارد. سأقوم بإضافة صفحة حول بها 3 صفحات فرعية (صفحات MODx والبرامج التعليمية وصفحات الاتصال والأسئلة الشائعة). يمكنك إنشاء أي موارد أو صفحات لموقعك. الغرض من هذا التمرين هو إنشاء بعض الموارد بحيث يكون لدى Wayfinder شيء لعرضه.

    لقد انتهيت من إنشاء الصفحات وتبدو شجرة موارد موقعي على النحو التالي:

    الآن لدينا بضع صفحات ، دعنا نرى كيف سيؤدي استدعاء Wayfinder إلى إنشاء قائمة لموقعنا:

    والخبر السار هو أن جميع صفحاتنا قد ظهرت في القائمة ومن خلال النقر فوق كل عنصر من عناصر القائمة ، نصل إلى الصفحة المقابلة. (لاختبار هذا العنصر ، أضف بعض النص إلى كل صفحة ، على سبيل المثال ، في صفحة "حول" ، يمكنك إضافة "هذه صفحة حول" وستظهر هذه الرسالة عند فتح الصفحة. تذكر أننا بحاجة إلى تحديد قالب لـ كل صفحة ، ولكن في الوقت الحالي لا داعي للقلق بشأنها).

    النبأ السيئ هو أن تنسيق القائمة معطل ، لكن يمكننا إصلاحه. انقر بزر الماوس الأيمن على صفحة الويب وانظر إلى الكود المصدري (أو استخدم Firebug لذلك) ، سترى ذلك الآن وايندريولد HTML مثل هذا:

    • بيت
    • عن
      • MODX CMS
      • لوحة الترميز
        • المدونة
        • الخدمات
    • اتصل بنا
    • دروس
    • التعليمات

    كما ترى ، يبدو مشابهًا جدًا للكود الثابت الأولي الخاص بنا مع بعض الاستثناءات. أولاً ، تم إنشاء برنامج Wayfinder