Цей сайт призначений, в першу чергу тим, хто хоче зайнятися web-розробкою. Ви зможете ознайомитися з матеріалами по сайтобудування, починаючи від проектування дизайну, структури, і закінчуючи просуванням уже готових сайтів. Незабаром сайт повинен стати великою колекцією корисних матеріалів, рад, уроків, сервісів і посилань на допомогу як досвідченому web-розробнику, так і початківцям майстрам.
Почитати докладно про що цей блог
Незабаром в моєму блозі з'являться цикли статей «Створення сайту з нуля», «Робимо гнучкий, функціональний блог», «Інтернет-магазин на СMS / CMF MODx» і багато-багато іншого. Не перемикайтеся.
Стежити за появою нових статей на сайті. RSS стрічка.
У цьому уроці ми створимо головне меню сайту. У MODx є вбудоване рішення, для організації динамічних меню на сайті - робиться це за допомогою сниппета Wayfinder. Ах так, зовсім забув. Я ж не сказав вам ще про одне основоположному терміні MODx. Цей термін «сниппет».
Сніппет - це PHP код, який ми можемо викликати з шаблону сайту. Результат роботи сниппета вставляється в місце виклику. Щоб подивитися список фрагментів, які йдуть в комплекті MODx за замовчуванням, Ви повинні зайти по вкладках в адміністративній панелі: Елементи → Управління елементами → Сніппети. Всі вони доступні для редагування. Але поки ви не розберетеся що до чого, раджу нічого не редагувати. Для чого ж потрібні ці самі сніпети? А потрібні вони для забезпечення динамічної логіки на сайті. Наприклад, для генерації динамічних меню, виведення контенту з бази даних по якомусь умові, організації форми зворотного зв'язку, взагалі, для будь-яких дій, доступних через MODx API. Зараз на прикладі ви все зрозумієте.
Виклик здійснюється по імені сниппета, вміщеному між квадратними дужками із знаками оклику. Наприклад, якщо ім'я певного сниппета - Name, то виклик його буде здійснюватися наступною конструкцією, вміщеній в шаблон:
Крім виклику сниппета, ми так само можемо йому відправляти на обробку різні значення параметрів, якщо такі підтримує даний сниппет. Зазвичай, у кожного сниппета є свій набір підтримуваних параметрів, від яких буде залежати результат роботи сниппета.
Для того, щоб передати деякі значення параметрів ми використовуємо конструкцію:
[! Імя_сніппета? параметр1 = `значеніе` параметр2 = `значеніе`. ]
Ще хочеться додати, що вище я описав виклик некешіруемого сниппета. Якщо вам знадобиться результат роботи занести в кеш, то виклик буде здійснюватися по імені сниппета, вміщеному в подвійні квадратні дужки. Тобто для сниппета з ім'ям Name Кешована виклик буде являти собою наступну конструкцію:
При кешувального виклику результат роботи сниппета заноситься в кеш, і при повторному завантаженні сторінки код сниппета не виконується заново, а на місце виклику одразу підставляється попередній результат, взятий з кеш.
Ну що ж, тепер ви в курсі що таке «сниппет» і ми рухаємося далі. Як я вже писав вище, для організації динамічних меню в MODx ми будемо використовувати вбудований сниппет Wayfinder.
Результатом роботи Wayfinder є висновок ненумерованого списку, елементами якого будуть посилання на дочірні документи для тієї сторінки, на якій ми викликаємо цей сниппет. Для прикладу, якщо у нас структура документів така як зображена на малюнку нижче
то, якщо ми викличемо на головній сторінці сниппет
результатом його роботи буде список з 4 посилань на дочірні сторінки. Список буде мати вигляд:
Увага: при такому виклику обов'язково наявність дочірніх елементів, адже якщо їх не буде, то сниппет не виведе нічого. Нам цей виклик не підходить для організації меню на сайті, так як головне меню ми хочемо бачити не тільки на головній, але так само і на всіх дочірніх сторінках сайту. При цьому, ми хочемо, щоб меню на всіх сторінках складалося з одних і тих же пунктів. Для того щоб це зробити, ми викликаємо сниппет Wayfinder і одночасно передаємо йому параметр startId, в який записуємо ID того документа, посилання на дочірні сторінки якого ми будемо виводити. Нагадаю, що ID документа це цифра, зазначена в дужках в дереві документів MODx.
Виклик буде виглядати наступним чином:
У цьому випадку на який би сторінці ми не викликали сниппет Wayfinder, список буде формуватися з посилань на дочірні елементи головної сторінки (ID = 1), а не тієї, на якій ми зробили виклик.
Зараз давайте подивимося, що ж представляє із себе головне меню сайту в нашому шаблоні. Якщо ви пам'ятаєте меню у нас зберігається в одному чанка з логотипом під назвою HEADER. І що ми бачимо?
Меню являє собою звичайний ненумерований список, поміщений в контейнер з id = "topnav". Це означає, що HTML розмітка меню буде представляти із себе звичайний список, а всю задачу за зовнішнім виглядом бере на себе CSS файл, який ми підключали раніше. Але ми з вами вже в курсі, як можна цей ненумерований список динамічно вивести в MODx. Тому видаляємо з чанка HEADER ось цей код
А на його місці викликаємо сниппет Wayfinder з переданим йому параметром startId = `1`.
Давайте подивимося на вихідний код отриманого головного меню:
Зверніть увагу, що сниппет Wayfinder автоматично генерує клас для активного пункту меню class = "active" і його назву навіть збіглося з прописаним в нашому випадку в CSS класом "active". Тому при переході по меню, активний пункт у нас підсвічується зеленим кольором, так як і було спочатку в шаблоні.
За замовчуванням, для активного пункту меню Wayfinder завжди буде генерувати class = "active", тому, якщо у вашому шаблоні він описується іншим класом, змініть його в CSS файлі. Якщо ви уважно подивитеся ще раз на вихідний код згенерованого списку, то ви побачите, що останній пункт меню за замовчуванням позначається класом last, це теж майте на увазі, так як часто для оформлення останнього пункту меню потрібно прописувати стилі окремо. В цьому випадку для його оформлення можете скористатися класом last.
Тепер давайте ще раз глянемо на пункти меню. Як ми бачимо в головному меню немає пункту, «головна сторінка». Так як ми вказали в якості параметра сниппета startId ідентифікатор головної сторінки, то у нас вивелося меню, що складається з дочірніх ресурсів для головної сторінки, не включаючи її саму. Додати посилання на головну сторінку можна різними способами, я не буду вас сильно завантажувати і для початку запропоную найоптимальніший спосіб, яким треба було скористатися відразу. Для цього найпростіше змінити структуру документів щоб дерево виглядало наступним чином.
Для того щоб меню відображалося, ми в startId записуємо ідентифікатор самої кореневої папки. Він завжди буде дорівнює «0». Робимо це, як і в минулий раз в чанка HEADER:
Після цього в головному меню у нас, крім тих пунктів меню, які були до цього, з'явиться ще пункт «Головна сторінка», так як всі ці пункти є дочірніми щодо кореня сайту. Але, якщо у вас сторінки названі так само, як і у мене, ви помітите, що меню вже не поміщається в один ряд з логотипом, так як назви їх занадто довгі. Це дуже добре. Запитайте чому. А тому, що я зможу вам показати на прикладі ще одне поле на сторінці редагування ресурсів, про який я говорив раніше і за допомогою якого можна буде вирішувати проблеми такого характеру.
І так, щоб меню не сповзала під логотип нам потрібно змінити довжину одного або двох пунктів меню. У нашому випадку найкраще замість назви пункту «Головна сторінка» написати просто «Головна». Це можна зробити не змінюючи назву самого ресурсу. Просто йдемо на сторінку редагування ресурсу з ім'ям «Головна сторінка» і в полі «Пункт меню» вписуємо коротку назву нашого пункту - «Головна».
Зберігаємо, і вуаля! Отримуємо відмінний результат. Назва пункту змінилося, і меню вже не скочується під логотип.
Ось тепер у нас вже є готове головне меню, за допомогою якого ми можемо переходити по сторінках, створеним в дереві документів MODx.
Для того, щоб познайомити вас з роботою сниппета Wayfinder більш детально, давайте розберемо ще парочку прикладів.
Чим менше цифра, тим раніше йде пункт в меню. Тому при редагуванні ресурсів ви можете встановити для кожної сторінки відповідне значення позиції в меню. Щоб впорядкувати пункти в меню в послідовності, описаної вище, я виставив наступні значення «Позиція в меню»:
Так само, часто може знадобитися прибирати пункти меню з показу в меню. Наприклад, поки у нас немає новин, ми хотіли б цей пункт не показувати в меню. Не проблема, йдемо на сторінку редагування ресурсу «Новини» і прибираємо галочку «Опублікувати в меню», після чого цей пункт не буде доступний широкому.
Після цього в дереві документів назва ресурсу «Новини» буде світло-сірого кольору.
На цьому, власне, організація меню закінчена. Ми навчилися виводити динамічне меню в MODx c допомогою вбудованого сниппета Wayfinder. При цьому ви вже на практиці спробували впорядкувати пункти меню і прибирати з показу в меню вибіркові пункти.
Єдине, що ще хочеться порадити, це винести головне меню в окремий чанк. Для цього створіть чанк MAIN-MENU і в його вміст вставте конструкцію виклику сниппета, обрамлену контейнером