Breadcrumbs MODx

Навігаційний ланцюжок «Хлібні крихти» або Breadcrumbs візуально показує поточне розташування користувача на сайті, а також дозволяє швидко здійснити перехід у попередні розділи, що дуже зручно. «Хлібні крихти» є дуже зручним інструментом у плані зручності користування.

Зважаючи на те, що у нас у шаблоні передбачено дане рішення, ми приступимо до його реалізації, для цього в MODx у нас є спеціальний сніпет [[Breadcrumbs]].

Сніппет Breadcrumbs MODx

У нашому шаблоні хлібні крихти представлені у вигляді ненумерованого списку укладеного в div тег з класом breadcrumb.

Давайте замінимо шматок цього коду на виклик сніпета [ [Breadcrumbs? &showCrumbsAtHome=`0` &showHomeCrumb=`1` &currentAsLink=`0` ]], тут здійснюється кешований виклик сніппета з параметрами.

Збережіть шаблон і оновіть сторінку, ви побачите, що сніпет працює, але у нас з'їхали стилі. Сталося це, тому що наш Сніппет генерує трохи інший HTML код.

Щоб все запрацювало правильно, знайдіть файл layout.css на сервері assets/templates/site/styles/layout.css і відкрийте його для редагування, далі знаходимо рядки зі стилями, які відповідають за відображення хлібних крихт і змінюємо їх на наступні:

Зберігаємо та оновлюємо сторінку у браузері, у нас має все відображатися коректно.

Щоб все зробити в рамках гарного тону, відкрийте наш шаблон ще раз і скопіюємо вміст блоку відповідального за виведення хлібних крихт у шаблоні на виклик чанка < > і створимо новий чанк з ім'ям «BREADCRUMBS», до якого вставимо скопійований код.

Параметри сніпету Breadcrumbs

Тепер давайте познайомимося з параметрами виклику сніпету Breadcrumbs, почнемо з тих, якіми вже використовували:

У даному уроці ми познайомилися з ще одним сніппетом MODx і створили навігаційний ланцюжок «Хлібні крихти». У наступному уроці ми познайомимося із спеціальними тегами ресурсів MODx.