نحوه ایجاد یک منوی افقی در modx. منوی چند سطحی MODX با استفاده از Bootstrap. Wayfinder چیست

بیایید درس 8 MODx Revolution را برای مبتدیان شروع کنیم. یادآوری می کنم که در حال ساخت سایت آموزش 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 جایگزین کنیم و ببینیم چه اتفاقی می‌افتد. کد بالا را حذف کرده و در جای خود قرار دهید:

[[!راه یاب؟ &startId=`0` ]]

اگر از همان قالب من استفاده می کنید، کد شما چیزی شبیه به این خواهد بود:

قالب را ذخیره کنید و به صفحه اصلی نگاهی بیندازید، باید به شکل زیر باشد:

خارق العاده! می بینید که منوی قبلی ما که چندین آیتم داشت، اکنون با یک منوی ساده با تنها یک آیتم - Home - جایگزین شده است. این به ما می گوید که Wayfinder همانطور که انتظار می رود کار می کند و یک صفحه از سایت ما می گیرد و عنوان آن را به عنوان یک آیتم منو نمایش می دهد.

بیایید چند منبع دیگر ایجاد کنیم. من قصد دارم یک صفحه درباره با 3 صفحه فرزند (MODx، آموزش، تماس و صفحات پرسش و پاسخ) اضافه کنم. شما می توانید هر منبع یا صفحه ای برای سایت خود ایجاد کنید. هدف از این تمرین ایجاد برخی منابع است تا Wayfinder چیزی برای نمایش داشته باشد.

من کار ساختن صفحات را تمام کردم و درخت منابع سایت من به این شکل است:

اکنون چند صفحه داریم، بیایید ببینیم چگونه فراخوانی Wayfinder منویی برای سایت ما ایجاد می کند:

خبر خوب این است که تمام صفحات ما در منو ظاهر شده اند و با کلیک بر روی هر آیتم منو به صفحه مربوطه می رسیم. (برای تست این عنصر، مقداری متن به هر صفحه اضافه کنید، به عنوان مثال، در صفحه درباره می توانید “This is an About page” را اضافه کنید و با باز شدن صفحه این پیام ظاهر می شود. به یاد داشته باشید که باید برای هر صفحه یک الگو تعریف کنیم، اما فعلاً نگران این موضوع نیستم).

خبر بد این است که قالب بندی منو خراب است، اما ما می توانیم آن را برطرف کنیم. روی صفحه وب کلیک راست کنید و به کد منبع نگاه کنید (یا از firebug برای آن استفاده کنید)، اکنون آن را خواهید دید راه یاب HTML را به شکل زیر تولید می کند:

• صفحه اصلی
• در باره
  • MODX CMS
  • پد کدنویسی
    • وبلاگ
    • خدمات
• با ما تماس بگیرید
• آموزش ها
• سوالات متداول

همانطور که می بینید با چند استثنا بسیار شبیه به کد استاتیک اولیه ما است. ابتدا Wayfinder تولید شد

مورد بدون کلاس منوی sfکه در کد استاتیک ما استفاده شد. این قالب برای کار با CSS به این کلاس نیاز دارد. همچنین دیده می شود که
• موارد دارای پارامتر هستند طول، که به عناصر متن پیوند در کد استاتیک اصلی اشاره دارد و در کد تولید شده Wayfinder وجود ندارد. علاوه بر این، کد HTML استاتیک ما یک کلاس دارد آیتم فعلی صفحه، که در کد قطعه Wayfinder ما وجود ندارد. همه این قطعات گم شده منوی ما را ناخوشایند نشان می دهد.

  نحوه سفارشی کردن سبک خروجی قطعه راه یاب

  با نگاهی به نحوه تولید کد Wayfinder، یک سوال کاملا طبیعی داریم: "چگونه کدهای گم شده را اضافه کنیم تا بخواهیم منو را به شکلی که نیاز داریم نمایش دهیم؟" پاسخ بسیار آسان است، ما از تکه های قالب برای فرمت کردن خروجی قطعه Wayfinder استفاده می کنیم.

  Wayfinder ابزاری انعطاف پذیر است و با کمک پارامترها می توانید ظاهر خروجی را تعریف کنید. برخی از گزینه های کلی به شما امکان می دهند تعیین کنید که در چه سطحی شروع به ساخت منو کنید، کدام موارد را از منو حذف کنید و غیره. گزینه‌های دیگر گزینه‌های قالب هستند که به شما امکان می‌دهند کد html الگو را برای منوی خود تنظیم کنید و غیره. توضیحات مربوط به مورد دوم را می‌توانید در مستندات رسمی پیدا کنید - http://rtfm.modx.com/display/ADDON/Wayfinder.

  یادداشت بردار:برخی از گزینه های Wayfinder دارای یک مقدار پیش فرض هستند.

  به عنوان مثال، این توضیح می دهد که چرا در منوی Wayfinder-generated، آیتم صفحه اصلی دارای نام کلاس است. اول فعال". این کلاس پیش‌فرض است، اما می‌توانیم با تعریف کلاس‌های خود در تکه‌های الگو، آن را لغو کنیم.

  ما در این آموزش از چند گزینه Wayfinder استفاده خواهیم کرد، اما من شما را تشویق می کنم که همه آنها را یاد بگیرید و تا حد امکان استفاده از آنها را تمرین کنید تا پتانسیل کامل آنها را درک کنید. از آنجایی که پارامترهای پیش‌فرض Wayfinder به وضوح در وب‌سایت رسمی ثبت شده‌اند، صحبت در مورد آنها در اینجا احمقانه است. همانطور که با منوهای مختلف کار می کنیم، از آنها بیشتر و بیشتر استفاده خواهیم کرد.

  برای شروع کار در قالب منو، بیایید چند قالب کوچک ایجاد کنیم و آنها را به صورت تکه ای ذخیره کنیم. خواهید دید که در این تکه ها از کد HTML استفاده می کنیم اما عناصر پویا را جایگزین می کنیم نگهدارنده های مکان(یا نگهدارنده های مکانهمانطور که آنها نیز نامیده می شوند) که نحو آن به این صورت است: [[+ مکان‌دار]]. متغیرهایی که ما استفاده می کنیم مختص قطعه Wayfinder هستند و تعریف آنها از نام مشخص است، اما همیشه می توانید برای راهنمایی کامل تر به مستندات MODx مراجعه کنید.

  

  در اینجا تکه هایی وجود دارد که من از آنها برای ایجاد الگوی خود استفاده خواهم کرد:

  7in1menuOuter- حاوی کد HTML برای ظرف ul خارجی ما خواهد بود.

  [[+wf.wrapper]]

  می بینید که من یک کلاس برای ul خارجی اضافه کرده ام. یک راه جایگزین برای انجام این کار استفاده از مکان نگهدار wf.classes و سپس اضافه کردن نام کلاس به فراخوانی راه یاب فعلی با استفاده از پارامتر است. طبقه بیرونی. اما برای سادگی، از راه اول استفاده می کنیم، اما هر دوی آنها به خوبی کار می کنند ...

  7in1menuRow– حاوی کد HTML آیتم های منوی سطح اول خواهد بود

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

ایده اصلی اینجا این است که من برچسب را اضافه کردم به متن پیوند منو مانند کد HTML استاتیک اصلی. من همچنین مکان‌نمای wf.classes را اضافه کردم و این به من امکان می‌دهد کلاسی را برای صفحه فعلی تعریف کنم که کلاس فعال پیش‌فرض ما را لغو می‌کند.

7in1menuInner– حاوی کد HTML ظروف ul داخلی خواهد بود

[[+wf.wrapper]]

7in1menuInnerRow- حاوی کد HTML برای خطوط آیتم های سطوح داخلی خواهد بود

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

تمام، اکنون تکه های قالب ما در جای خود هستند، همانطور که می بینید (برای سفارش، آنها را در یک دسته جداگانه قرار می دهم):



اکنون می‌توانیم فراخوانی Wayfinder را تغییر دهیم تا بتوانیم از این قالب‌های کوچک برای خروجی Wayfinder استفاده کنیم. اگر به لیست گزینه‌های قالب نگاهی بیندازید (فایده است که http://rtfm.modx.com/display/ADDON/Wayfinder باز یا چاپ شده و نزدیک صفحه نگه داشته شود)، خواهید دید که من قسمت‌هایم را مشابه گزینه‌های فراخوانی قطعه مربوطه نام‌گذاری کردم. من این کار را برای راحتی انجام دادم، این به من کمک می‌کند وقتی شروع به ساختن تماس خود می‌کنم، آنچه را که چه چیزی است، پیگیری کنم. بیایید پارامترها را اضافه کنیم و تکه های خود را فراخوانی کنیم. تماس با Wayfinder اکنون به شکل زیر خواهد بود:

[[!راه یاب؟ &startId=`0` &outerTpl=`7in1menuOuter` &rowTpl=`7in1menuRow` &innerTpl=`7in1menuInner` &innerRowTpl=`7in1InnerRow` &hereClass=`current_page_item` &firstClass=`` &lastClass]

مقدار پارامتر در آپاستروف (`) محصور شده است، نه تک نقل قول (').

خوب، بیایید نگاهی به این چالش بیندازیم. می بینید که ما از گزینه های قالب بندی برای فراخوانی تکه های خود استفاده می کنیم تا Wayfinder HTML مورد نظر ما را با کلاس های صحیح خروجی دهد. من یک callable تعریف کردم اینجا کلاسپارامتر و به آن مقدار داد current_page_itemبرای مطابقت با قالب HTML ایستا. می بینید که من پارامترها را رها کردم اولین کلاسو کلاس آخریخالی. دلیل این امر این است که قالب HTML من برای اولین و آخرین آیتم منو کلاس تعیین نمی کند، بنابراین برای جلوگیری از همپوشانی، خطوط خالی آنها را بازنویسی کردم.



می توان دید که منوی ما دقیقاً همان طور که می خواستیم به نظر می رسد. سبک های صحیح در منوی کشویی استفاده می شود. اگر به کد منبع نگاه کنید، خواهید دید که تولید شده است راه یابکد HTML غیرقابل تشخیص تغییر کرده است:

• صفحه اصلی
• در باره
  • MODX CMS
  • پد کدنویسی
    • وبلاگ
    • خدمات
• با ما تماس بگیرید
• آموزش ها
• سوالات متداول

این کد با کد استاتیک اصلی قالب ما مطابقت دارد، اما با فراخوانی ایجاد شده است راه یاب.

گزینه های زیادی وجود دارد که می توانید از آنها استفاده کنید راه یاببرای ساخت منوهای خود در آموزش های بعدی به منوهای پیچیده و نحوه ادغام آنها در Wayfinder خواهیم پرداخت. به طور خلاصه: اکنون سایت ما شکلی به خود گرفته است و ما یک منوی کاربردی و پویا داریم.

در آموزش های قبلی، ما قبلا یک منوی MODX ایجاد کرده ایم: 1st - و 2nd - نمایش یک منوی کشویی استاندارد MODX با استفاده از Bootstrap. امروز می آموزیم که چگونه منوهای بوت استرپ چند سطحی را با سطح تودرتو نامحدود نمایش دهیم (منوی 3 سطحی، 4 سطحی، 5 سطحی و غیره).

به عنوان مثال، من یک منوی 5 سطحی Bootstrap را نمایش می دهم، اما می توانید با تغییر مقدار، آن را هم 3 سطح و هم 7 سطح، حداقل 10 کنید. مرحلهبه آنچه شما نیاز دارید!

نمایش منوی بوت استرپ چند سطحی (با تودرتوی نامحدود) در MODX با استفاده از PdoMenu.

خروجی منوی چند سطحی به صورت زیر خواهد بود:

[]>[[+wrapper]]

[[+wrapper]]

خارج از جعبه کار نخواهد کرد. از آنجایی که بوت استرپ 3 به طور پیش فرض تنها از 2 سطح تودرتو پشتیبانی می کند، و برای گسترش سطح تودرتوی منوی بوت استرپ 3، باید یک فایل js با محتوای زیر اضافه کنید.

(function($)($(document).ready(function()($("ul.dropdown-menu").on("click", function(event) (event.preventDefault(); event.stopPropagation(); $(this).parent().siblings().removeClass("open");())("). (jQuery)؛

پس از آن، 3، 4 و غیره شروع به باز شدن می کنند. سطوح تودرتو در اصل همه چیز ولی یک چیز هست این منو همه سطوح رو باز میکنه و این به نظر من خیلی درست و قشنگ نیست ولی با css میشه درستش کرد.

در مورد من، 2 خط کد CSS به نظر می رسد که سطوح به کناری می افتند.

ul.dropdown-menu (چپ: 100%؛ بالا: -8px؛) li.submenu1.dropdown.open>ul.dropdown-menu (سمت چپ: 0%؛ بالا: 100%؛)

اگر چندین شاخه منو با زیرمنو داشته باشید، ممکن است کد کمی متفاوت (اما یکسان با این) دریافت کنید و تعداد خطوط آن بیشتر باشد. خوب، و در مورد چیزهای کوچک، شما باید css را به سلیقه خود اصلاح کنید، هدف من نشان دادن اصول اولیه است. نحوه پیدا کردن کلاس‌های css لازم در کدی که می‌خواهید استایل‌ها را روی آن اعمال کنید در ویدیو نشان داده شده است، اما برای دقیق‌تر شدن، کل فرآیند ایجاد یک منوی چند سطحی در آنجا نشان داده شده است.

اینم منوی ویدیوی من

اگر نیاز دارید مثلث ها را در منوی کشویی بچرخانید (وقتی آیتم ها به سمت چپ پایین می آیند به سمت پایین اشاره می کنند)، چگونه به نظر می رسد.

سپس کد css زیر را اضافه کنید:

li.submenu2.dropdown>a>span.caret ( -moz-transform: rotate(-95deg); -ms-transform: rotate(-95deg); -webkit-transform: rotate(-95deg); -o-transform: rotate(-95deg); transform: rotate(-95deg. et ( -moz-transform: rotate(-95deg); -ms-transform: rotate(-95deg); -webkit-transform: rotate(-95deg); -o-transform: rotate(-95deg); transform: rotate(-95deg); ) -transform: rotate(-95deg);(-95deg);

با سلام خدمت خوانندگان عزیز. در درس گذشته، سایت را با مقداری مطالب پر کردیم ()، اکنون وقت آن است همه چیز را در منو قرار دهیدتا کاربران بتوانند به سمت آنها حرکت کنند.

پویا ایجاد کنید منو در MODXما از قطعه استفاده خواهیم کرد PdoMenuاز بسته pdoTools. قبل از شروع، مستندات اصلی را بخوانید.

مستندات pdoMenu

گزینه ها

گزینه های قالب

گزینه های کلاس CSS

نمونه های رسمی

شما می توانید اسناد رسمی را در اینجا بخوانید. و اکنون ما معمولی ترین تماس های منو را تجزیه و تحلیل خواهیم کرد.

با PdoMenu تماس بگیرید

انتخاب 1. به جای این منوی ثابت قطعه pdoMenu را فراخوانی کنید، برای این در درخت منبع، در برگه " عناصر” در بخش snippets، شاخه را گسترش دهید pdoTools، سپس بر روی آن کلیک کنید pdoMenuدکمه سمت چپ ماوس (دکمه را رها نکنید) و این قطعه را به جایی که می خواهید منو را فراخوانی کنید بکشید، سپس پارامترهای مورد نیاز را در پنجره باز شده پر کنید و روی "کلیک کنید" صرفه جویی«.

گزینه 2. ما فقط به صورت دستی چالش را می نویسیم.

نمونه های معمولی

منوی معمولی تک سطح

به عنوان مثال، ما رایج ترین منو را داریم، با نشانه گذاری html زیر.

نتیجه کد زیر با یک تماس منو است:

• &parents=`0` - فهرستی از والدین (در مورد من، انتخاب را محدود نمی‌کنم، زیرا به هر حال فقط صفحات خاصی را نمایش خواهم داد).
• &level=`1` - سطح تودرتو (در این مورد وجود ندارد).
• &منابع=`2،3،4،5` - لیستی از منابع برای نمایش در منو.
• &firstClass=`0` - کلاس برای اولین آیتم منو (نه کدام یک).
• &lastClass=`0` - کلاس آخرین آیتم منو (نه کدام یک).
• &outerClass=`top-menu` — کلاس بسته بندی منو (جایگزین شده در ul);
• &hereClass=`current-menu-item` - کلاس برای آیتم منوی فعال (جایگزین شده در li);
• &rowClass=`menu-item` - کلاس یک نوار منو (جایگزین شده در li).

منوی بوت استرپ سفارشی دو سطحی

کد html ایستا به شکل زیر است:

کد خروجی آن به صورت زیر خواهد بود:

همچنین در درس بعدی، من چند خروجی دیگر از منوهای کشویی مبتنی بر بوت استرپ ارائه خواهم کرد (و، این برای کسانی است که اصل را نفهمیده اند. خب، پس ما انجام خواهیم داد.

در نگاه اول، همه چیز پیچیده به نظر می رسد، اما اینطور نیست، برای جزئیات بیشتر اسناد را بخوانید، در نظرات سوال بپرسید، من قطعا کمک خواهم کرد.

تاریخ انتشار: 1390/07/02

در این آموزش ساده، من به شما نشان می دهم که چگونه منو را شخصی سازی کنید.

یک بار از من خواسته شد تا اشکالی را در منوی یک سایت برطرف کنم - برخی از موارد سرسختانه نمی‌خواستند در یک ردیف قرار گیرند، اما در عوض در مکان‌های غیرمنتظره‌ای در صفحه هنگام نگه‌داشتن ماوس روی صفحه، خزیده شدند. همانطور که در ابتدا تصور می‌کردم، باگ در css کج نبود، بلکه در تماس کج‌شده Wayfinder بود.

Wayfinder چیست- این قطعه ای است که در مواقع ضروری برای فهرست کردن اسناد یک بخش یا بخش ها استفاده می شود. در نتیجه قطعه، یک لیست نامرتب ایجاد می شود. با کمک پارامترهای مختلف، می توانید هر کاری را با این لیست انجام دهید :) می توانید اطلاعات بیشتری را در اسناد یا با تایپ در Google - "wayfinder modx wiki" بخوانید.

یادداشت های مهم:

1. در مورد اینکه MODx چیست، چگونه MODx را نصب کنیم، چگونه ساختار اسناد را سازماندهی کنیم، چگونه از html یک قالب بسازیم، یک chunk چیست و غیره. من در این درس سوالاتی را برای مبتدیان در نظر نمی گیرم.

2. متغیرهایی که من در آموزش استفاده خواهم کرد در قالبی هستند که نسخه Evo "درک" دارد. تفاوت چیست، به مثال نگاه کنید:

بنابراین، بیایید نگاهی به ایجاد یک منو گام به گام بیندازیم.

مرحله 1

برای درس، منوی زیر را ترسیم کردم:

در اینجا، برای وضوح، سبک های مختلف را در سطوح مختلف منو اعمال کردم. در سایتی که باگ منو برطرف شد، تقریباً یکسان بود - هر سطح از منو سبک خاص خود را دارد.

حروفچینی - جزئیات طرح بندی در محدوده این درس گنجانده نشده است، بنابراین من این کد را دریافت کردم:

• خانه
• محصولات
  • سرم حقیقت
  • داروی ماکروپولوس
  • معنی جهانی
• تحویل
  • سرم حقیقت
  • داروی ماکروپولوس
  • معنی جهانی
• تامین کنندگان

پس از تحسین کد، خودمان تعیین می کنیم که کدام کلاس در منوی ما مسئول چه چیزی است (اگر در حال بررسی کد شخص دیگری هستید، باید در خود شما مشخص باشد):

ul class="menu" - کلاس کل منو
li class="top" - کلاس آیتم های منو سطح بالا
a class="top_link" - کلاس برای پیوندها در آیتم های سطح بالا
ul class="sub" - کلاس منوی فرعی
خوب، برای تزئین اقلام سطح بالا به کلاس "پایین" بروید

مرحله 2. سه سند ایجاد کنید

محصولات
- تحویل
- تامین کنندگان
در سند "محصولات" اسناد کودک ایجاد می کنیم: "سرم حقیقت"، "ماکروپولوس درمان"، "درمان جهانی".

مرحله 3. منو را به یک قسمت جداگانه منتقل کنید

در قالب، در جایی که باید منو داشته باشید، همه کدهای غیر ضروری (کد html خود منو) را حذف می کنیم، به جای آن می نویسیم

بنابراین، ما منو را در یک تکه جداگانه بیرون می آوریم. سپس یک قطعه جدید ایجاد می کنیم و آن را فراخوانی می کنیم منو. در حال حاضر، می‌توانید کد منویی را که ایجاد کرده‌اید در محتوای قطعه کپی کنید. برای شفافیت.

به پنل مدیریت در "سایت"-> "نمایش" بروید - تا بررسی کنید که همه چیز با مسیرهای فایل سبک و تصاویر درست است.

اتفاق افتاد؟ خوب، اما هنوز منو نیست. بیایید با کمک Wayfinder به آن جان بدهیم.

مرحله 4

تمام محتویات قسمت منو را حذف کنید و به جای آن قطعه Wayfinder را فراخوانی کنید.
تا زمانی که بنویسیم:

پارامتر startId- نشان می دهد که از کدام سند شروع به تشکیل لیست کنید. ما 0 داریم - این بدان معنی است که لیست از ریشه درخت سند تشکیل شده است.

ببینیم چی شد:

این یک منوی فعال و زنده است. تغییر نام اسناد، حذف، اضافه کردن - منو مطابق با درخت سند تشکیل می شود.

مرحله 5

5.1. اکنون ظاهر منو را به حالت عادی برمی گردانیم

Wayfinder به طور پیش فرض یک کد ساده تولید می کند () ، به تمام کلاس های لیست و آیتم ها هنگام فراخوانی پارامترهای خاصی داده می شود.

در ابتدای درس تعیین کردیم که کدام کلاس های css در منوی ما مسئول چه چیزی هستند. Wayfinder گزینه های مورد نیاز ما را دارد: طبقه بیرونی- کلاس برای ظرف منو. در مقایسه با طرح ما، تماس Wayfinder زیر را دریافت می کنیم:

علاوه بر پارامترهای دارای کلاس، مشخص کنید سطح تودرتو - &level=`2`.

ما به کمبودها توجه می کنیم - بدون کلاس برای آیتم های منو سطح بالا، بدون برچسب و یک کلاس برای زیر منو.
تمامی این کاستی ها با افزودن پارامترهای مناسب به فراخوانی Wayfinder اصلاح می شوند.

5.2. افزودن کلاس ها به آیتم ها و برچسب های سطح بالا

یک متغیر برای این وجود دارد rowTpl، که یک الگو را برای یک آیتم منو توصیف می کند، ما چنین قالبی می سازیم، برای این کار یک تکه به نام ایجاد می کنیم. والدین:

در تماس با Wayfinder اضافه کنید &rowTpl=`والد` .
فراموش نکنید که کد منبع را بررسی کنید - تقریبا همه چیز خوب است، منوی فرعی باقی می ماند.

برای تنظیم زیر منو از متغیر innerRowTpl استفاده می کنیم.

یک تکه ایجاد کنید درونی:

افزودن یک متغیر به تماس Wayfinder innerRowTpl=`داخلی`و متغیری که کلاس را برای محفظه زیر منو مشخص می کند &innerClass=`sub` .

تماس نهایی با Wayfinder به این صورت است:

تمام، منوی ما آماده است. موفق باشید!

• منو به صورت لیست، جدول، تصاویر، با آیکون ها و غیره.
• منوهای ثابت
• منوهایی با افکت های مختلف (کرشو، کرکره و غیره)
• نقشه سایت

&rowTpl=`rowTpl`
&outerTpl=`outerTpl`
&hereClass=`فعال
&rowClass=`eNav_li`]]

گزینه های اسنیپت:

&startId- id صفحه والد، اگر 0 را مشخص کنید از ریشه سایت خواهد بود. مقدار پیش فرض، شناسه صفحه فعال است.

&نمایش شروع - نشان دادن سند با startId در عنوان منو، به طور پیش فرض false

&مرحله- عمق تودرتو، پیش فرض 0 - همه سطوح

&حد- محدود کردن تعداد صفحات در خروجی (پیش فرض 0 - بدون محدودیت)

&نادیده گرفتن پنهان- چک باکس صفحه "نمایش در منو" را نادیده بگیرید، یعنی. اگر 1 را مشخص کنید، تمام صفحات نمایش داده می شود. پیش‌فرض 0 است. فقط آن دسته از صفحاتی نمایش داده می‌شوند که چک باکس "نمایش در منو" را علامت زده باشند.

&ph - نام جایگزینی که جایگزین خروجی فوری می شود. پیش فرض 0 است.

&اشکال زدایی- حالت اشکال زدایی (پیش فرض 0)

&مخفی کردن زیر منوها - گسترش فقط منوی فرعی فعال (پیش‌فرض 0)

&حذف خطوط جدید- نویسه شکست خط را در خروجی حذف می کند (پیش فرض 0)

&textOfLinks- برای نام لینک منو. گزینه های ممکن:عنوان منو، شناسه، عنوان صفحه، توضیحات، والد، نام مستعار، عنوان طولانی، متن درونی. پیش فرضعنوان منو

&titleOfLinks- برای عنوان پیوند منو. گزینه ها:عنوان منو، شناسه، عنوان صفحه، توضیحات، والد، نام مستعار، عنوان طولانی، متن درونی. پیش فرضعنوان صفحه

&rowIdPrefix- شناسه (rowIdPrefix + docId) را برای هر عنصر تنظیم می کند. پیش فرض 0

&شامل اسناد- شناسه اسناد، جدا شده با کاما، که در منو گنجانده می شود (به طور پیش فرض مشخص نشده است)

&ExcludeDocs - شناسه اسناد، جدا شده با کاما، که از منو حذف می شوند (به طور پیش فرض 0)

&متن ها- زمینه برای تولید منو. پیش فرض فعلی است.

&startIdContext - شناسه زمینه که از آن اسناد برای تشکیل نتیجه گرفته شده است.

&پیکربندی - فایل PHP خارجی برای ذخیره پیکربندی Wayfinder (مثال: core/components/wayfinder/configs).

&طرح - فرمت برای تولید URL. مقادیر ممکن (بر اساس تماس makeURL API):

1: (پیش فرض) URL نسبت به site_url.

0: http;

1: https;

کامل: URL مطلق که با site_url شروع می شود.

abs: URL مطلق که با base_url شروع می شود.

http: URL مطلق، اجرا شده در طرح http.

https: URL مطلق، در طرح https اجرا شده است.

&مرتب سازی بر اساس - زمینه برای مرتب سازی. (پیش فرضفهرست فهرست)

گزینه ها:

نمونه الگو: [[+wf.linktext]][[+wf.wrapper]]

گزینه های قالب

این گزینه ها تکه هایی را مشخص می کنند که حاوی الگوهایی هستند که خروجی Wayfinder را تولید می کنند.

در نسخه فعلی Wayfinder for MODX Revolution، می‌توانید با استفاده از متغیرهای پیشوند wf به تلویزیون‌های سفارشی خود دسترسی داشته باشید. برای مثال [[+my_TV]]

در زمان نوشتن، فقط مقادیر اصلی تلویزیون بازگردانده می شود - آنها قالب بندی نمی شوند. به عنوان مثال، اگر تلویزیون شما یک تصویر است - استفاده معمولی از چنین تلویزیونی در داخل قالب شما، کل تگ تصویر را برمی گرداند، اما در داخل یک الگوی Wayfinder - فقط مسیر تصویر برگردانده می شود.

اگر می‌خواهید تلویزیون را مدیریت کنید، می‌توانید این کار را با فراخوانی یک قطعه در قالب ردیف Wayfinder انجام دهید (&rowTpl. برای مثال، تلویزیون تصویری شما نامیده می‌شود آیکونو معمولا برای خروجی در قالب از چیزی شبیه به این کد استفاده می شود:

... ...

اما از آنجایی که این به شما اجازه نمی دهد تلویزیون را کنترل کنید، باید آن را با موارد زیر جایگزین کنید:

... ...

و اکنون در قطعه processTV کد PHP زیر را قرار می دهیم:

getObject("modResource", $myId); بازگشت $doc->getTVValue($myTV);

در نتیجه، یک تصویر تلویزیونی کاملاً پردازش شده برگردانده می شود.

&outerTpl

نام تکه حاوی الگوی ظرف بیرونی.

متغیرهای موجود:

• wf.classes - کلاس های گرفته شده از مجموعه گزینه های Wayfinder (شامل ویژگی class="") را نمایش می دهد.
• wf.classnames - نمایش نام کلاس ها (بدون class="")
• wf.wrapper - خروجی محتوای داخلی (ردیف).

[[+wf.wrapper]]

پارامتر &innerTpl شامل همان مجموعه متغیرهایی مانند &outerTpl است.

&rowTpl

نام قطعه حاوی الگوی عناصر ردیف منو.

متغیرهای موجود:

• wf.classes - خروجی کلاس (شامل ویژگی class="").
• wf.classnames - خروجی کلاس های مربوطه (بدون کلاس="")
• wf.link - مقدار ویژگی href="" برای پیوند منو
• wf.title - نام متن عنوان پیوند از فیلد مشخص شده در پارامتر &titleOfLinks
• wf.linktext - متن برای پیوند فعال مشخص شده در فیلد ارسال شده در پارامتر &textOfLinks
• wf.wrapper - خروجی محتوای داخلی مانند منوی فرعی
• wf.id - خروجی شناسه ویژگی منحصر به فرد. شما باید پارامتر &rowIdPrefix را مشخص کنید تا این مکان نگهدار مقداری دریافت کند. مقدار پیشوند + docId است.
• wf.attributes - یک مرجع ویژگی را برای عنصر فعلی نمایش می دهد
• wf.docid - شناسه سند عنصر فعلی
• wf.description - توضیحات برای عنصر فعلی
• wf.level - سطح تودرتو فعلی

مثال استفاده:

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

گزینه ای دیگر:

مثال ها

سطح اول

کد تکه outerTpl

[[+wf.wrapper]]

کد تکه rowTpl

[[+wf.wrapper]]

سطح دوم (در این مثال، آیتم های منو و زیر منو به صورت بصری در یک سطح بودند

[[!راه یاب؟ &startId=`0` &level=`2`
&rowTpl=`rowTplFooterMenu`
&outerTpl=`outerTplFooterMenu`
&innerTpl=`innerTplFooterMenu`
&innerRowTpl=`innerRowTplFooterMenu`
&hereClass='فعال']]

کد تکه OuterTplFooterMenu

کد قطعه rowTplFooterMenu

• 
  
  [[+wf.title]]
  
  

[[+wf.wrapper]]

کد قطعه innerTplFooterMenu

[[+wf.wrapper]]

کد قطعه innerRowTplFooterMenu