Продовжуємо осягати MODX Revolution. І сьогодні ви побачите один із способів інтеграції вихідної верстки в систему MODX Revolution. Отже, є чиста установка системи, одна головна сторінка, у неї є один початковий шаблон. З версією 2.5.0 з'явився пробний шаблон для старту. Є верстка однієї html-сторінки з доданими файлами, в яких знаходяться стилі, шрифти, картинки, скрипти ... Зараз ви побачите один з можливих способів, як все це інтегрувати в MODX. Робиться все дуже просто.
інтеграція верстки
Будуть використані тільки штатні можливості адмінки MODX Revolution. Все, що потрібно зробити - зайти в початковий шаблон, знайти «код шаблону», де вставлена верстка, і замінити цей код на підготовлений заздалегідь (взяти з html-файлу з версткою). Копіюємо вміст файлу, повертаємося в адмінку, повністю замінюємо весь вміст і натискаємо «зберегти».
Тепер залишилося тільки перенести всі активи цієї сторінки. Заходимо в папку assets, виділяємо все і закидаємо в папку assets нашого проекту. Тепер оновлюємо головну сторінку і отримуємо верстку, повністю інтегровану в систему MODX. Все зроблено буквально за кілька секунд.
Створення «чанкі» в два кліка
Повертаємося в шаблон, і бачимо темну контрастну тему. Також з'являється функціонал розгортання код шаблону на весь екран. Тепер потрібно нарізати весь код на маленькі шматочки, які ми будемо використовувати в інших шаблонах для інших сторінок.
Компонент, який ми встановлювали другим - TagElementPlugin - додає цікаві поєднання клавіш, які дозволяють на льоту створювати маленькі шматочки html-верстки, так звані «чанкі» MODX. Робиться це так: вирізаємо повністю head від початку коду (ctrl + x), і сюди вставляємо код майбутнього чанка - так і називаємо його, «$ head». Тепер виділяємо назву майбутнього чанка зі знаком $, натискаємо ctrl + enter - і динамічно з'являється віконце з питанням: «чанк не знайдений, ви хочете його створити?» - натискаємо «так» і переходимо до створення чанка.
Ім'я тут вже присутній, вставляємо вирізаний код, зберігаємо. Далі переходимо до шапки сайту. Виділяємо шапку, також «ctrl + x», на її місці пишемо виклик майбутнього чанка (зараз це «$ header»), виділяємо разом зі знаком $, натискаємо ctrl + enter -> enter, ім'я чанка вже є, вставляємо тільки що вирізаний код, натискаємо «зберегти». Далі йде вміст сторінки безпосередньо, ми його поки що звернемо і помістимо безпосередньо в сам ресурс. Далі у нас йде код плагіна, футер і скрипти. З них зараз зробимо вирізки. Вирізаємо код плагіна, вставляємо чанк, назвемо його «$ plugin», виділяємо, ctrl + enter -> створити чанк, вставляємо вирізаний код, зберігаємо. Футер зараз порожній, тому не будемо його вирізати, а виріжемо блок скриптів, ctrl + x, вставляємо чанк, називаємо його «$ scripts», виділяємо його (зі знаком $), ctrl + enter-> enter, і знову вставляємо вирізаний код. Ось у що перетворився весь наш шаблон. Скоротили по повній програмі =)
Залишилося тільки вирізати цей шматок коду в сам ресурс. Йдемо на головну (потрібно обов'язково зберегтися після всіх змін, не забувайте про це!), І весь вміст головної сторінки також міняємо на той код, який щойно вирізали і зберігаємо. Тепер потрібно в шаблоні вивести вміст ресурсу за допомогою спеціального MODX-тега із зірочкою, назвемо цей тег «content». Тепер шаблон повинен залишитися повністю працездатним, перевіряємо. Йдемо в вміст -> перейти на сайт і дивимося, все працює: галерея, скрипти, ... Таким чином ми нарізали шаблон штатними засобами MODX плюс два додаткових компонента. Тепер дивимося в панелі «чанкі» - там з'явилися тільки що «на льоту» створені чанкі, і тепер ми можемо їх використовувати в інших шаблонах для інших сторінок сайту. Ось один із способів розробки проекту на MODX-Revolution.
У подальших уроках я покажу ще два інших способи. Дякую за увагу і до нових зустрічей!