Вітаю вас шановні читачі. У минулому уроці ми наповнили трохи сайт контентом (), тепер час це все вивести в менющоб користувачі могли переходити на них.

Створювати динамічний меню в MODXми будемо за допомогою сніпета PdoMenuз пакета pdoTools. Перед початком ознайомтеся з основною документацією.

Документація з pdoMenu

Параметри

Параметри шаблонів

Параметри CSS класів

Офіційні приклади

офіційну документацію можете почитати тут. А зараз розберемо типові виклики меню.

Виклик PdoMenu

Варіант 1. На місці цього статичного меню викличемо сніппет pdoMenu, при цьому в дереві ресурсів, на вкладці “ Елементи” у розділі сніпети розгорніть гілку pdoTools, далі натисніть на pdoMenuлівою кнопкою миші (не відпускайте кнопку) і перетягніть цей сніпет в місце, де ви хочете викликати меню, далі у вікні заповніть необхідні параметри і натисніть « Зберегти«.

Варіант 2. Просто вручну пишемо виклик.

Типові приклади

Звичайне однорівневе меню

Наприклад у нас найпростіше меню, з наступною html розміткою.

Вийшов ось такий код із викликом меню:

• &parents=`0` — список батьків (у моєму випадку я не обмежую вибірку, тому що я все одно виведу тільки певні сторінки);
• &level=`1` — рівень вкладеності (у разі її немає);
• &resources=`2,3,4,5` — список ресурсів, які потрібно вивести в меню;
• &firstClass=`0` — клас для першого пункту меню (ні якого);
• &lastClass=`0` - клас останнього пунктуменю (ні якого);
• &outerClass=`top-menu` - клас обгортки меню (підставляється в ul);
• &hereClass=`current-menu-item` - клас для активного пункту меню (підставляється в li);
• &rowClass=`menu-item` - клас одного рядка меню (підставляється в li).

Двохрівневе кастомне bootstrap меню

Статичний html кодвиглядає так:

Код його виведення буде таким:

Так само в наступному уроці я наведу ще пару висновків меню, що випадають, на основі bootstrap (і , це для тих хто не вловив суть. Ну а далі зробимо .

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

Ви можете змінити верхнє меню панелі керування MODX або змінивши порядок проходження елементів, або сховавши деякі з них від певних користувачів. Ви також можете додати нові пункти до існуючих або персональним діямВи створюєте. Далі спочатку розглянемо методи, що використовуються для модифікації верхнього меню, а потім деякі практичні приклади.

Концепція верхнього меню

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

Дерево верхнього меню

Перейдіть до розділу верхнього меню Система -> Діїі ви побачите основи системи меню. Дерево праворуч (Верхнє меню) містить дійсні елементи меню та підменю. Якщо ви розкриєте різні розділи, ви побачите, що це точна копія верхнього меню. Елементи верхнього рівня- це те, що ви бачите у верхній частині панелі керування. У більшості випадків це контейнери для підменю. Кожне підменю в дереві відповідає дії панелі керування. Коли ви кликаєте на підменю, панель керування виконує дію (наприклад, очищення кешу сайту або перехід до панелі керування доступом). Фактично, і пункти верхнього меню можуть бути діями, але жоден з пунктів верхнього меню не налаштований таким чином.

Те, що відбувається, коли ви натискаєте на елементі меню, фактично визначається тут. Як ви побачите, ви можете легко перевизначити те, що відбувається при натисканні на пункті меню, а також можете перейменувати, сховати або видалити елементи списку меню. Ви також можете додати елементи в меню і задати, що станеться при натисканні на них. Фактично ви можете створити повністю нову систему меню для панелі керування, яка замінить існуючу та різні користувачі можуть бачити різні меню. Все це можна робити без зміни ядра MODX.

Фізичне відображення меню також задається тут. Це не збіг, що всі елементи меню розташовані в тому ж порядку, як вони розташовані у верхньому меню. Якщо ви перемістите їх у дереві, верхнє меню також зміниться під час перезавантаження сторінки.

Розглянемо деякі дії панелі керування, але будьте обережні, щоб не змінити їх – натискайте кнопку "Скасувати" після перегляду.

У розташованому правому дереві (Верхнє меню) клацніть правою кнопкоюна пункті "Сайт" і виберіть у меню "Редагувати". З'явиться діалогове вікно Редагування з полями, які визначають дію меню:

Ім'я- ім'я елемента меню

Опис- Опис елемента меню

Дія- специфікація PHP-файлу, який буде виконано

Значок- Додатковий значок для пункту меню

Параметри- необов'язкові параметри $_GET для URL

Обробник- JS код, який буде виконано

Права доступу- розділений комами список необхідних прав доступу

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

Погляньмо на підрозділ меню, який щось робить. Клацніть на "Скасувати" для завершення діалогу, розкрийте розділ "Сайт" дерева правої панелі, клацніть правою кнопкою на підменю "Оновити сайт" та виберіть "Редагувати".

Зазначимо, що у діалоговому вікні є вміст полів "Обробник" і "Права доступу". Поле "Права доступу" говорить нам, що користувач не може виконати дію цього підпункту меню, якщо він не має права доступу empty_cache. У полі "Обробника" знаходиться реальний код JS, який виконується, коли ви обираєте цей підпункт. Усі пункти, в яких дійсно виконуються якісь дії, мають заповненими поля або "Дію", або "Обробник". Якщо заповнене поле "обробник", то виконується код, розташований у цьому полі, а поле "Дія" ігнорується. Якщо поле "Обробник" не заповнене, то виконується дія з поля "Дія". Поле "Дія" зазвичай є вказівником або на файл-контролер, або на одну з дій у дереві "Дії", розташованого зліва (які власне вказують на відповідні файли-контролери). Закрийте діалог, натиснувши кнопку "Скасувати".

Погляньмо на варіант пункту меню з дією. Завантажте та встановіть через Управління пакетами додаток Batcher, перезавантажте сторінку та знову зайдіть у розділ Система -> Дії. У розділі "Компоненти" у правому дереві (розкрийте його, якщо необхідно) клацніть правою кнопкою на Batcher і виберіть "Редагувати". Тепер ми бачимо заповнене поле "Дія, а не "Обробник": batcher - index. Завершіть діалог редагування, натиснувши кнопку "Скасувати".

У лівій панелі всі пункти верхнього рівня є просторами імен. У дереві "Дії" зліва розкрийте простір імен "batcher". Ви повинні побачити дію index. Це дія, на яку вказує меню Batcher, що ми бачили на правій панелі.

Розглянемо, що ми можемо робити з деревом "Верхнє меню". Елементи дерева "Верхнє меню" можуть бути перерозподілені шляхом їх перетягування. Якщо ви змінюєте розташування пункту меню в дереві, також зміниться фактичне верхнє меню, хоча для того, щоб це побачити, вам потрібно буде перезавантажити сторінку панелі управління.

Для додавання пункту у верхнє меню ви можете клацнути правою кнопкою десь в області дерева і вибрати "Додати пункт менюДля додавання пункту в меню верхнього рівня ви також можете натиснути кнопку "Додати пункт".

Пункти меню можуть бути видалені шляхом натискання на них правою кнопкою та вибору пункту "Видалити". Якщо ви видалите пункт меню, вміст його полів буде втрачено, також будуть видалені будь-які дочірні елементи. Ця дія необоротна.

Якщо ви хочете прибрати пункт меню без фактичного стирання (майже завжди це найкращий варіант дій), ви можете сховати його, помістивши що-небудь у полі "Права доступу". Якщо в цьому полі вже щось знаходиться, додайте кому та ім'я нового права доступу. Поки цим правом доступу буде право доступу, якого ніхто не має, пункт меню буде невидимим. Ви зможете зробити його знову видимим шляхом видалення доданого права доступу. Якщо ви хочете показувати певний пункт меню, певним користувачам (але не всім), просто створіть шаблон нової політики, що містить лише права доступу, створіть нову політику, засновану на цьому шаблоні, і створіть запис запис контекстного списку управління доступом, яка застосовується до цих користувачам та надайте цю політику.

Щоб змінити заголовок верхнього меню, уточніть його опис. Потім перейдіть до розділу меню Система-> Управління словниками.Виберіть простір імен "core" та тему "topmenu". Список, що випадає тем містить більше однієї сторінки, тому вам може знадобитися перейти до другої сторінки, щоб знайти тему "topmenu". Знайдіть мовний рядок для потрібного елемента меню, двічі клацніть на його значенні та змініть його. Будь-які зміни, які ви виконаєте тут, діятимуть і після оновлення версії MODX і після оновлення будь-якого з компонентів сторонніх розробників.

Описаний вище метод працюватиме лише для вбудованих в ядро ​​пунктів меню. Для елементів меню сторонніх розробників потрібно вибрати відповідний простір імен. Наприклад, якщо ви хочете змінити відповідний пункт меню Batcher, вам потрібно буде змінити значення рядка управління словниками для простору імен batcher.

Дерево "Дії"

Поверніться до розділу Система -> Діїякщо ви з нього вийшли. У лівій панелі клацніть на дії "index" нижче імені "batcher" і виберіть у списку "Редагувати". Нагадаємо, що це дія, яку вказує елемент меню Batcher на правій панелі. Ви побачите, що контролером цієї дії буде index, а простір імен batcher. Якщо ми зараз перейдемо до розділу Система->Простір імен, ми побачимо, що шляхом для простору імені batcher буде:

(core_path)components/batcher

З прив'язкою до контролера, який буде виконуватися при натисканні на цьому пункті меню, MODX створить повний шлях, подібний до цього:

шлях_простору_імен + ім'я_контролера +.php

Іншими словами, вважаючи, що core знаходиться в місці за умовчанням, MODX ініціює виконання файлу-контролера за адресою:

core/components/batcher/index.php

Якщо ви подивіться на цей файл, то ви побачите, що він містить файл index.php в каталозі core/components/batcher/controllers, який завантажує клас Batcher і ініціалізує його, запускаючи Batcher в панелі управління. Ми створимо новий пункт меню в розділі "Компоненти" трохи пізніше, коли будемо створювати сторінки панелі управління.

Багато елементів меню в правій панелі не мають активних дій, які відображаються в лівій панелі. Це відбувається тому, що шляхи до їх файлів-контролерів зберігаються в базі даних MODX і не повинні редагуватися (принаймні це зробити складніше). Ці шляхи зберігаються у таблиці modx_actions. Кожна дія має свій ідентифікатор (ID) та шлях до його контролера. Дія також має допоміжну URL для контекстно-залежної допомоги, коли контролер активний і кілька інших полів. Для дій, показаних у панелі "Дії" ліворуч, ви можете побачити ID у дужках поруч із ім'ям дії.

Додавання пункту меню в дерево для будь-якої дії в панелі керування виконується, таким чином, шляхом створення пункту меню в правій панелі і створення відповідної дії (контролера) або додавання обробника. Якщо контролер вже існує, ви можете просто вибрати його в меню "Дії". Якщо ні, то ви повинні створити дію в лівій панелі, яка вказує на контролер. Наприклад, немає пункту меню для створення нового користувача, але оскільки для цього є файл-контролер, цей пункт може бути легко доданий до верхнього меню. У цьому випадку потрібно лише створити пункт меню праворуч і для простору імен "core" встановити дію security/user/create. Як ви розумієте, пункт верхнього меню, який має обробник, але не має відповідної дії (подібно до пункту меню "оновити сайт") у дереві "Дії". Йому не потрібен пункт "Дія", оскільки обробник містить код для цього. Замість запуску контролера, MODX просто виконує код у полі обробника.

Обробка кліків у меню

Зверніть увагу на дію index простору імен Batcher у лівій панелі. Зауважимо його ID. Коли ви натискаєте на пункті верхнього меню, MODX отримує цей ID. Потім на панелі керування генерується URL цієї сторінки і користувач потрапляє на неї. На нашому сайті цей ID дорівнює 79. Коли ми клацаємо на Batcher у верхньому меню, то бачимо в адресному рядку браузера:

http://сайт/manager/index.php?a=79

Якщо ви натискаєте на пункті меню Batcher, ви повинні побачити аналогічний URL, в якому ви побачите ID вашого index дії Batcher. Коли обробник запитів отримує цей URL, він перевіряє наявність цього об'єкта меню в базі даних, наявність прав доступу користувача для його виконання, встановлює URL для допомоги і виконує файл-контролер цієї дії (якщо є обробник, то виконується код JS обробника).

Робота з верхнім меню

Тепер, коли ми знаємо, як MODX обробляє елементи меню та пов'язані з ними дії, давайте модифікуємо реальне верхнє меню в панелі керування. Методи, що використовуються, досить прості і для їх використання від вас не потрібно розуміння внутрішніх механізмів роботи системи MODX меню/дія.

Будьте тут обережні, оскільки всі ваші зміни будуть, як і раніше, в силі і при оновленні сайту і немає простого способуповернутися до меню за промовчанням. Більшість дій, які ми будемо робити тут, легко оборотні, але краще записати початкову структуру меню до внесення змін. Краще спочатку потренуватися на установці MODX, яка не буде використана для цього сайту.

Зміна порядку проходження пунктів меню

Ви можете змінити порядок проходження пунктів верхнього меню в панелі керування або будь-яких пунктів у їх підменю. Перейдіть до розділу Система->Діїта розкрийте дерево меню праворуч (під заголовком "Верхнє меню").

Як ми з'ясували раніше, це дерево є основою верхнього меню панелі керування. Ви можете змінити порядок руху пунктів верхнього меню шляхом їх перетягування. Просто натисніть елемент меню, який потрібно перемістити і, утримуючи кнопку миші натиснутою, перемістіть туди, куди потрібно і відпустіть кнопку миші. Таким чином, ви можете змінити порядок пунктів верхнього меню або будь-якого підменю. Ви можете перемістити пункти з одного підменю до іншого. Ви також можете перемістити пункти підменю у верхнє меню, перетягуючи їх у папку верхнього меню. Щоб переглянути зміни, потрібно перезавантажити сторінку панелі керування.

Додавання та видалення пунктів меню

Додати новий пункт меню досить легко. Перейдіть до розділу Система->Діїта розкрийте дерево меню праворуч (під заголовком "Верхнє меню"). Виберіть частину меню, до якого ви хочете додати пункт і натисніть на кнопку "Додати меню" (або ж клацнути правою кнопкою і вибрати "Додати пункт меню"). Введіть ім'я потрібного вам пункту меню та натисніть кнопку "Зберегти". Зазвичай користувачі MODX вводять нові пункти в меню "Компоненти", але ви можете додавати їх будь-де. Для видалення пункту меню ви можете натиснути правою кнопкою на ньому і вибрати "Видалити пункт меню".

Якщо ви додаєте новий пункт меню, а потім перевантажуєте сторінку в браузері, ви можете і не побачити ваш новий пункт у верхньому меню. Пункти верхнього меню без дочірніх елементів і без вказівки дії або обробника не відображатимуться в меню. Ось чому меню "Компоненти", яке ви бачите у дереві, не відображається в меню, коли ви спочатку встановите MODX Revolution - поки не встановлено жодних компонентів.

Як простий приклад давайте створимо нове меню користувача, яке буде вести вас в найчастіше використовувані розділи панелі управління. Припустімо, що ваша робота вимагає частих візитів до пункту налаштувань системи, створення/редагування документа та контролю доступу. Ми створимо пункт верхнього меню під назвою "Моє меню", де помістимо зазначені пункти. Зазначимо, що ми будемо виконувати всю роботу у правій панелі (Верхнє меню).

Перейдіть до розділу Система->Діїта (у дереві верхнього меню) клацніть кнопку "Додати меню". Введіть у полі "Ім'я" назву "Моє меню" та клацніть на кнопці "Зберегти".

Ім'я - Новий документ

Дія- core-resource/create

Ім'я- Налаштування системи

Дія- core-system/settings

Ім'я- Контроль доступу

Дія- core-security/permission

Переконайтеся, що три пункти меню є підпунктами в меню "Моє меню". Якщо це не так, перетягніть їх у потрібне місце мишею. Ви також можете змінити порядок керування меню та підменю.

Після того, як ви досягли потрібного розташування меню, перезавантажте сторінку панелі керування у браузері. Ви повинні побачити у верхньому меню новий пункт "Моє меню", що містить три підменю, які мають вести до відповідних розділів панелі керування.

Якщо ви бажаєте видалити будь-який пункт меню, який ви створили, просто перейдіть до розділу Система->Дії, клацніть на них правою кнопкою та виберіть "Видалити". Хорошою ідеєю буде видалення всіх підменю до видалення пункту головного меню, щоб вони не залишилися у базі даних.

Як сховати пункти меню

Окрім зміни порядку прямування пунктів меню, ви також можете сховати їх, використовуючи права доступу, прикріплені до пункту меню. Перейдіть до розділу Система->Діїі розгорніть дерево меню з правої сторони(Під заголовком "Верхнє меню").

Клацніть правою кнопкою на будь-якому пункті або підпункті меню та виберіть "Редагувати". Відобразиться діалогове вікно з нижнім полем "Права доступу". Будьте обережні, щоб не змінити жодного іншого поля.

Якщо ви намагаєтеся сховати існуючі пункти меню, ви побачите, що поле "Права доступу" в деяких із них заповнене, а в деяких немає. Які дії необхідно зробити, щоб сховати поле, залежить від того, чи заповнене це поле, чи ні.

Якщо в полі "Права доступу" міститься список прав доступу, ви можете створити нову політику доступу (або відредагувати існуючу) для блокування цього права доступу та пункт меню буде схований. Ця операція може мати побічні дії, оскільки інші пункти меню на панелі керування можуть залежати від тих самих прав доступу. Найкращим методомможе бути додавання в це поле додаткових специфікацій прав користувача доступу.

Поле "Права доступу" може містити список прав доступу, розділених комами. Цей пункт меню побачать лише користувачі, які мають усі перелічені права доступу.

Давайте подивимося на приклад. Припустимо, що вам потрібно сховати від усіх користувачів, за винятком користувача з необмеженими правами Super User підменю "Керування користувачами" в меню "Безпека".

Перейдіть до розділу Система->Діїі розкрийте дерево меню, а потім клацніть правою кнопкою на підпункті "Керування користувачами" та виберіть пункт "Редагувати". Поле "Права доступу" має містити view_user. Ми збираємось додати інші права доступу під назвою my_view_user_menu. Для цього відредагуйте це поле, щоб воно містило view_user, my_view_user_menu. Переконайтеся, що у введених даних немає пропусків. Тепер користувачам для того, щоб побачити підпункт "Керування користувачами", потрібно мати обидва ці права доступу, і, оскільки ні в кого немає другого права доступу (оскільки ми щойно його вигадали), ніхто не побачить цей підпункт.

Для пунктів меню, які не мають права доступу, процедура аналогічна. Ви просто додаєте нові права користувача доступу в порожнє поле "Права доступу".

Зазначимо, що після того, як ми додали наші права доступу, користувач з необмеженими правами Super User також не бачитиме підменю "Керування користувачами". Для того, щоб це виправити, потрібно надати йому ці права доступу. Якщо ви плануєте виконувати ці операції на реальному сайті, перед створенням прав користувача доступу завжди спочатку давайте адміністратору з необмеженими правами ці права доступу.

Оскільки стандартна група Administrator на панелі керування захищена, вам потрібно створити новий шаблонполітики доступу, що містить права доступу користувача і нову політику доступу, засновану на них. Ви можете помістити всі ваші права користувача доступу в цей шаблон політики доступу. У розділі Безпека->Контроль доступунатисніть "Створити шаблон політики доступу". Для діалогу використовуйте такі параметри:

Ім'я : CustomPermissionTemplate

Група шаблонів : Admin

Опис :

Після цього клацніть правою кнопкою миші на кнопці "Додати роздільну здатність". У діалозі використовуйте такі параметри:

Ім'я : my_view_user_menu

Опис : Права доступу меню користувача

Потім натисніть на закладці "Політика доступу", далі на кнопці "Створити політику доступу". У діалозі використовуйте такі параметри:

Ім'я : CustomPermissions

Шаблон політики доступу : CustomPermissionTemplate

Опис : Мої права користувача доступу

Клацніть на політиці доступу "Custom permissions" та виберіть "Редагувати". Прокрутіть список до прав доступу my_view_user_menu і поставте позначку в чекбоксі поруч. Клацніть на кнопці "Зберегти" праворуч вгорі.

Тепер нам потрібно надати користувачеві з необмеженими правами Super User це право доступу шляхом створення нового елемента списку керування доступом. Перейдіть до розділу Безпека->Контроль доступу->Групи користувача". Клацніть правою кнопкою на групі "Administrator" і виберіть "Редагувати групу користувачів", клацніть на закладці "Контекстний доступ" і потім на кнопці "Додати контекст". Для діалогу використовуйте наступні параметри:

Контекст : mgr

Мінімальна роль : Super User - 0

Політика доступу : CustomPermissions

У верхньому меню виберіть Безпека->Контроль доступу. Ніхто не зможе побачити цей пункт меню за винятком користувача з необмеженими правами Super User (та ще користувачів із цією політикою доступу). Якщо ви зайдете в панель керування як один із редакторів сайту, підпункт "Керування користувачами" повинен бути відсутнім.

Назад

Вперед

Але це не для нас;).

Ми зробимо все з нуля. Навіщо нам (мені) це знадобилося, адже вже є готові варіанти? Тому що мені так більше подобається. Тому що я вважаю подібний підхід найвірнішим. Тому що, вміючи розробляти своє, ми легко зможемо розібратися в чужому коді, змінити, виправити помилки або доповнити його необхідним у конкретному випадку функціоналом. Та й, зрештою, зробити своє – це часто так приємно!

Подальша розповідь матиме на увазі, що читач має мінімальне знання PHP програмування. Теоретично ті люди, які зовсім не розуміють код, зможуть скопіювати код і відтворити всі ті дії, про які йтиметься нижче. Однак, можливо, для них краще використовувати готові сніпети а-ля Ditto, оскільки вони надають купу можливостей для зовнішнього конфігурування, не влазячи в основний код.

Я не хочу дискутувати на тему, що краще для користувача – брати готове або розробляти своє… І в тому, і в іншому випадку є свої плюси та мінуси. Особисто для мене плюсів у другому варіанті більше. Також і кожен із читачів визначиться сам.

Отже, поглянемо знову на наш. Оскільки різних програмних частин у нашому сайті досить багато, а починати з чогось потрібно, тож запрограмуємо…

Верхнє меню

Під терміном "верхнє меню" я розумію набір посилань на сторінки у верхній частині сайту (див. малюнок нижче):

Перший приклад створення сніпету я опишу дуже докладно, надалі я зупинятимуся в основному на найбільш суттєвих деталях.

Порівняємо з нашим деревом сайту в системі управління, яке ми збудували в попередній статті:

Як видно з малюнка, у дереві сайту виділяються чотири документи (а саме "Блог", "Про авторів", "Фотографії" та " Зворотній зв'язок"), які й створять згодом посилання у верхньому меню.

Також нагадаю, що ми заздалегідь приховали документи, які не хочемо показувати в меню. Наприклад, у налаштуваннях документа з назвою "Пошук по сайту" прибрали прапорець "Показувати в меню", а два документи "Посилання" і "Категорії", які залишилися, ми приховали на сайті, прибравши прапорець в налаштуваннях документа "Публікувати" (закладка "Налаштування сторінки" у налаштуваннях документа).

Таким чином ми ще в попередній статті підготували верхнє меню в системі керування.

Тепер перейдемо до питання відображення наших дій безпосередньо на сайті.

Більшість програм на сайті виконують т.зв. " ", тобто. окремі шматки коду (їх також можна розуміти як окремі функціїабо підпрограми) на PHP. Тому, щоб реалізувати в MODx виведення верхнього меню, ми також повинні створити новий сніпет, запрограмувати його і додати виклик цього сніпет в шаблоні в потрібному місці.

Зайдемо в систему управління, відкриємо закладку "Ресурси" -> "Управління ресурсами" -> закладка "Сніппети" та натиснемо на посилання "Новий Сніппет". У полі "Назва сніпету" впишемо "TopMenu" без лапок і поки що просто збережемо порожній сніпет без коду. Після збереження ми побачимо назву нашого Сніппет на закладці "Сніппети".

Нагадаю, що у нашому шаблоні верхнє меню ми винесли у чанк "TOPMENU". Переключимося на закладку "Чанки" та відкриємо чанк " ". У вмісті цього чанка ми побачимо наступний код:

• Блог


• Про авторів


• Фотографії


• Зворотній зв'язок

Цей код таки створює наше меню. Закоментуємо його та додамо виклик сніпету "TopMenu" у чанці:

[]

Тут знову доведеться трохи відволіктися, щоб пояснити зміст цієї конструкції []. Справа в тому, що саме за допомогою конструкцій виду [] або [!SnippetName!] ми можемо робити виклики сніпетів у будь-якому місці своїх шаблонів, чанків і навіть просто на будь-який окремій сторінцісайту.

При цьому конструкція [] означає виклик кешуєтьсяСніппет, тобто. виклик динамічної підпрограми, результат виконання якої буде підрахований і виконаний один раз, а згодом при завантаженні сторінки, де викликається цей сніпет, результат буде незмінним, т.к. повторний виклик сніпету вже не відбувається. Таким чином, ми заощаджуємо ресурси свого веб-сервера (а це завжди має дуже важливе значення за високої відвідуваності ресурсу).

Однак існують ситуації, коли необхідно весь час виконувати код сніпет заново і кешувати результати не можна. У таких випадках використовується конструкція [!SnippetName!], яка завжди змусить сніппет виконуватись без кешування. За аналогією, ця конструкція називається викликом некешуєтьсяСніппет.

Отже, збережемо чанк "TOPMENU" та оновимо сторінку сайту. Хм, як не дивно, але верхнє меню зникло. Але чи це так дивно насправді? Закоментувавши HTML код меню в чанці, ми приховали його відображення у браузері (перевірте це, глянувши в вихідний код HTML сторінки). А наш сніпет "TopMenu" нічого не робить, оскільки в нього ще нічого не додано. Виправимо ж цей недолік:).

Перейдемо знову на закладку "Сніпети", відкриємо створений сніпет "TopMenu" і спробуємо протестувати його можливості ... Терпіння, мої просунуті читачі, не всім знайомі ці деталі.

Для початку напишемо найпростіший код (звичайний PHP код):

echo "Testing…";
?>

Перед збереженням виберемо " Продовжити редагування " , т.к. нам доведеться ще не раз змінити вміст нашого сніпета, і після цього збережемо сніпет. Обновимо сторінку сайту і побачимо на місці верхнього меню… ну, правду кажучи, на перший погляд ми не побачимо майже жодних змін, крім синього фону меню, що трохи розширилося. Натиснемо "CRTL+A", щоб виділити весь текст на сторінці сайту, і побачимо, що все-таки наш сніпет вивів на місці меню текст "Testing…", просто колір тексту збігається з кольором фону.

Змінимо код сніпета на наступний:

echo " Testing...";
?>

Тепер ми ясно бачимо, що сніпет наш працює і навіть (!) виводить деякий текст. Що ж, це чудово, але замало для нашого завдання, оскільки ми повинні домогтися, щоб наш сніпет виводив посилання із системи управління, причому в точно такому ж HTML коді, який ми закоментували в чанці "TOPMENU".

І знову невелика відволікання...

Вся система взаємозв'язків документів у MODx побудована за принципом: кожен "батьківський документ" містить від нуля до безлічі "дочірніх документів" ("parent" -> "childs").

Кожен документ у базі даних MODx має свій унікальний ідентифікатор "ID" - це число, яке ми бачимо в дужках у дереві сайту поряд з кожним із документів.

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

У базі даних MODx для кожного документа створено спеціальне поле "parent". Значенням даного поля є число, що позначає або унікальний ідентифікатор батьківського документа, або якщо документ знаходиться в корені дерева, нуль. Таким чином, завжди можна однозначно визначити, який саме документ є для цього батьківським.

Щоб побачити те, про що ми зараз говорили, відкрийте phpMyAdmin, виберіть свою базу даних і знайдіть таблицю (PREFIX) site_content, де (PREFIX) - Ваш префікс, який Ви ввели при встановленні. Ви побачите безліч полів, у яких зберігаються певні дані документів, зокрема "ID" - унікальний ідентифікатор, "parent" - номер батьківського документа, "pagetitle" - заголовок сторінки та інші.

Отже, використовуючи цю інформаціюпро принцип зберігання та зв'язку документів в MODx, ми можемо зрозуміти, як отримати потрібні дані для виведення посилань верхнього меню: нам потрібно знайти в базі даних усі документи, що знаходяться в корені дерева сайту, тобто. мають у полі "parent" значення нуль.

Використовуючи SQL мову, такий запит описується якось так (Ви можете спробувати ввести даний запиту полі введення SQL у phpMyAdmin, попередньо замінивши "modx_" на свій префікс):

SELECT *
FROM `modx_site_content`
WHERE `parent` = 0;

Однак такий запит поверне нам абсолютно всі документи з кореня сайту, що не зовсім правильно, виходячи з основного завдання – вивести посилання лише на ті документи, які мають:

• опублікований статус (у БД цей пункт відповідає полі " published " , де значення = 1 позначає, що документ опублікований, а значення = 0 - неопублікований).
• невіддалені (поле "deleted", де 1 - видалено, а 0 - не видалено),
• і в яких встановлена ​​опція "Показувати в меню" (поле "hidemenu", де 1 – приховувати, а 0 – показувати у меню).

Крім того, забігаючи трохи вперед, ми одразу відсортуємо документи за параметром "Позиція в меню", який визначатиме позицію кожного посилання у нашому меню.

Ну, з погляду SQL, це зовсім нескладне завданняі вирішується вона так:

SELECT *
FROM `modx_site_content`
WHERE `published` = 1
AND `parent` = 0
AND `deleted` = 0
AND `hidemenu` = 0
ORDER BY `menuindex` ASC;

Теоретично всі SQL запити можна виконувати в сніпетах безпосередньо з допомогою PHPскриптів, підключаючи щоразу базу даних заново і роблячи безліч інших рутинних операцій, повторюючи їх щоразу… Але, погодьтеся, це нівелювало сенс використання фреймворку, яким безумовно є наша система управління, т.к. MODx, окрім інших своїх переваг, надає готовий набір коштів програмного інтерфейсу(API, Application Programming Interface). API - це програмні функції, які уніфікують та полегшують багато процесів обробки даних.

Використовуємо одну зі згаданих функцій API "getDocumentChildren" у нашому сніпеті. Функція "getDocumentChildren" отримує у вигляді параметрів такі дані:

• $id - номер батьківського документа,
• $active - вибирати тільки опубліковані або неопубліковані документи (1 або 0 відповідно),
• $deleted - вибирати лише видалені чи невидалені документи (1 | 0),
• $fields - поля, які вибираються із БД,
• $where - особливі умови, тобто. умова WHERE у SQL запиті,
• $ sort - поле, за яким має проводитися сортування результатів
• $direction - напрямок сортування, може приймати значення ASC чи DESC, тобто. сортування від меншого до більшого значення або навпаки
• $limit - обмеження запиту, тобто. умова LIMIT у SQL запиті

$results = $modx->getDocumentChildren(
$id = 0,
$active = 1,
$deleted = 0,
$where = "hidemenu = 0",
$sort="menuindex",
$dir="ASC",
$limit
);

Print("

Foreach($results as $key => $value) (
print_r($value);
}

Print("");
?>

Збережіть сніпет і оновіть сторінку. В результаті виконання оновленого сніпету "TopMenu" Ви побачите список з масивів та їх значень, відсортований за значеннями поля "menuindex" від меншого до більшого. Спробуйте змінити параметр $dir="ASC" на $dir="DESC" - в результаті масиви перебудуються і першим документом буде виведено документ із найбільшим значенням поля "menuindex".

Програмістам зі стажем, мабуть, зрозуміло, що отриманий результат уже дає все, що потрібно, аби побудувати готове меню із посиланнями. Ну, майже все. У будь-якому випадку я продовжу: перепишемо код PHP, щоб максимально наблизитися до бажаного результату.

$results = $modx->getDocumentChildren(
$id = 0,
$active = 1,
$deleted = 0,
"id, pagetitle, published, menuindex, deleted, hidemenu, menutitle",
$where = "hidemenu = 0",
$sort="menuindex",
$dir="ASC",
$limit
);

$items = "";
$output = "";

Foreach($results as $key => $value) (
$items .= "

".$value["pagetitle"]."

\n";
}

If ($items != "") (
$output = "

\n";
$output .= $items;
$output .= "

\n";
}

Return $output;

Детально код розбирати не будемо, оскільки це звичайнісінький PHP код, не більше. Якщо комусь не зрозумілий сенс будь-яких конструкцій, прошу у коментарі, а краще – на відповідні форуми підтримки.

Збережемо новий кодсніпета та оновимо сторінку. В результаті виконання коду ми побачимо практично те, що й хотіли отримати:

Тобто. це вже автоматично згенеровані посилання, структура яких повністю повторює структуру документів у дереві MODx. Щоб перевірити це, спробуйте створити якийсь тестовий документ у корені сайту та оновіть сторінку.

Однак, це ще не все. Багато хто вже напевно помітив, що посилання є, але посилань немає... Парадокс:). Я маю на увазі, що назви документів у меню виводяться, проте посилання на них не працюють. Це логічно, оскільки поки що в коді посилань виводиться "#" замість реальних шляхів.

Щоб вирішити це завдання, необхідно дізнатися ще про одне вкрай корисної можливості MODx: адресу будь-якої внутрішньої сторінки сайту можна отримати за допомогою наступної конструкції [~id~], де id - це унікальний номер потрібного документа, тобто. цей номер, вказаний у дужках поруч із назвою кожного документа в дереві сайту. Таким чином, додавши таку конструкцію [~1~] у шаблоні/чанці/вмісті сторінки,

• • index - аліас документа "Блог", якщо ми ввели "index" як аліас документа, або
  • 1.html, якщо ми не вводили нічого у поле "Псевдонім" для документа "Блог"
• якщо дружні посилання вимкнені, побачимо текст index.php?id=1

Перепишемо сніпет, використовуючи цю інформацію:

$results = $modx->getDocumentChildren(
$id = 0,
$active = 1,
$deleted = 0,
"id, pagetitle, published, menuindex, deleted, hidemenu, menutitle",
$where = "hidemenu = 0",
$sort="menuindex",
$dir="ASC",
$limit
);

$items = "";
$output = "";

Foreach($results as $key => $value) (
$items .= "

".$value["pagetitle"]."

\n";
}

If ($items != "") (
$output = "

\n";
$output .= $items;
$output .= "

\n";
}

Return $output;

Отже, ми змінили # на [~".$value["id"]."~], тобто. фактично кожного документа з масиву підставляється його унікальний ID всередині конструкції [~id~]. В результаті ми отримуємо меню з працюючими посиланнями.

Ми практично досягли ідеалу... Однак і тепер ще залишається одна деталь, яку потрібно обов'язково врахувати: дизайнер визначив, що активне посилання у нас має бути підсвічене білим тлом і колір посилання, відповідно, повинен бути змінений на помаранчевий.

Щоб досягти цього, ми знову відкриємо секрети MODx CMS:). В API прихована функція $modx->documentIdentifier , яка повертає значення унікального ідентифікаторапоточної сторінки. Вона нам знадобиться для визначення активної сторінки та виділення її в меню:

$results = $modx-> getDocumentChildren (
$id = 0,
$active = 1,
$deleted = 0,
"id, pagetitle, published, menuindex, deleted, hidemenu, menutitle",
$where = "hidemenu = 0",
$sort="menuindex",
$dir="ASC",
$limit
);

$cid = $modx->documentIdentifier;

$items = "";
$output = "";

Foreach($results as $key => $value) (
if ($value["id"] == $cid) (
$active = "id="active";
}
else (
$active = "";
}
$items .= "
".$value["pagetitle"]."
\n";
}

If ($items != "") (
$output = "

\n";
$output .= $items;
$output .= "

\n";
}

Return $output;

Ну як, вийшло? Вийшло!

Але ж Ви не подумали, що на цьому все й закінчиться? І вірно. Ми ставимо собі найвищу планку, хочемо задіяти максимум можливостей MODx. А тому ще одна невелика деталь, яку ми пропустили.

Подивимося уважно на назву полів, які ми запитуємо за допомогою функції getDocumentChildren: "id, pagetitle, published, menuindex, deleted, hidemenu, menutitle". Серед них є таке поле, як "menutitle". Як випливає з назви, у цьому полі може зберігатися заголовок меню. У системі керування також є поле "Пункт меню". Це поле заповнювати необов'язково. Однак логіка в тому, що якщо це поле заповнене, ми повинні замінити текст посилання в меню на введений користувачем. Ну так зробимо це:

/********************************
Назва: TopMenu
Ціль: Виведення верхнього меню
Проект: Демосайт MODx
********************************/

$results = $modx->getDocumentChildren(
$id = 0, // ID батьківського документа
$active = 1, // Вибираємо лише опубліковані документи
$deleted = 0 // Вибираємо тільки невіддалені документи
"id, pagetitle, published, menuindex, deleted, hidemenu, menutitle", // Вибираємо поля з БД
$where = "hidemenu = 0" // Вибираємо тільки ті документи, які потрібно публікувати в меню
$sort="menuindex", // Сортуємо документи по полю menuindex
$dir="ASC", // Сортуємо документи щодо зростання
$limit = "" // Обмеження не встановлюємо (параметр LIMIT у SQL запиті)
);

$cid = $modx->documentIdentifier; //отримуємо ID поточної сторінки

$items = "";
$output = "";

Foreach($results as $key => $value) (
if ($value["id"] == $cid) (
$active = "id="active";
}
else (
$active = "";
}
if ($value["menutitle"] != "") (
$title = $value["menutitle"];
}
else (
$title = $value["pagetitle"];
}
$items .= "
".$title."
\n"; //збираємо пункти меню
}

// Якщо вдалося знайти хоча б один пункт меню,
// створюємо HTML код меню
if ($items != "") (
$output = "

\n";
$output .= $items;
$output .= "

\n";
}

// Повертаємо результат роботи сніпета
return $output;

Спробуйте тепер ввести якийсь текст у полі введення "Пункт меню" будь-якого документа... Все працює? Чудово!

PS: Можливо, деякі читачі будуть здивовані, що при переході за посиланнями нашого меню вміст сторінок не змінюється, хоча начебто, судячи по дорозі на адресу браузера, ми переходимо на нові сторінки… Повірте, це абсолютно нормально. абсолютно всі сторінки зараз використовують один і той же шаблон. У цьому шаблоні практично ми поки що зробили динамічним лише верхнє меню, решта деталей залишаються постійними. Ми обов'язково займемося цим пізніше, а поки що – без паніки;).

Висновок:

Отже, ще одна стаття підійшла до свого логічного завершення.

Підсумки навчання:

• Ми спробували розібратися у призначенні деяких полів введення документів MODx та розглянули зберігання цієї інформації у базі даних;
• Дізналися про нові спеціальні конструкції MODx: [], [!SnippetName!], [~id~];
• Дізналися про наявність спеціального API та скористалися деякими функціями API;
• І на основі цих знань створили свій новий сніпет в MODx!

Вітаю вас шановні читачі. У минулому уроці ми наповнили трохи сайт контентом (), тепер час це все вивести в менющоб користувачі могли переходити на них.

Створювати динамічний меню в MODXми будемо за допомогою сніпета PdoMenuз пакета pdoTools. Перед початком ознайомтеся з основною документацією.

Документація з pdoMenu

Параметри

Параметри шаблонів

Параметри CSS класів

Офіційні приклади

офіційну документацію можете почитати тут. А зараз розберемо типові виклики меню.

Виклик PdoMenu

Варіант 1. На місці цього статичного меню викличемо сніппет pdoMenu, при цьому в дереві ресурсів, на вкладці “ Елементи” у розділі сніпети розгорніть гілку pdoTools, далі натисніть на pdoMenuлівою кнопкою миші (не відпускайте кнопку) і перетягніть цей сніпет в місце, де ви хочете викликати меню, далі у вікні заповніть необхідні параметри і натисніть « Зберегти«.

Варіант 2. Просто вручну пишемо виклик.

Типові приклади

Звичайне однорівневе меню

Наприклад у нас найпростіше меню, з наступною html розміткою.

Вийшов ось такий код із викликом меню:

• &parents=`0` — список батьків (у моєму випадку я не обмежую вибірку, тому що я все одно виведу лише певні сторінки);
• &level=`1` — рівень вкладеності (у разі її немає);
• &resources=`2,3,4,5` — список ресурсів, які потрібно вивести в меню;
• &firstClass=`0` — клас для першого пункту меню (ні якого);
• &lastClass=`0` - клас останнього пункту меню (ні якого);
• &outerClass=`top-menu` - клас обгортки меню (підставляється в ul);
• &hereClass=`current-menu-item` - клас для активного пункту меню (підставляється в li);
• &rowClass=`menu-item` - клас одного рядка меню (підставляється в li).

Двохрівневе кастомне bootstrap меню

Статичний html код виглядає так:

Код його виведення буде таким:

Так само в наступному уроці я наведу ще пару висновків меню, що випадають, на основі bootstrap (і , це для тих хто не вловив суть. Ну а далі зробимо .

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