Якщо у вас вже встановлена і налаштована система управління, то саме час підшукати симпатичний шаблончик і "натягнути" його на MODx. Про пошук шаблонів для модекс скоро буде окрема стаття, а поки можете закачати будь-який цікавий CSS шаблон. Його можна знайти в пошукових системах по запитах "безкоштовні css шаблони" або як-небудь так.
Як ми домовилися в одному з перших уроків, починати вивчення MODx ми будемо на виготовленні сайту-візитки. Для цих цілей я вже вибрав цікавий шаблон в європейському стилі (то, що зараз в інтернетах прийнято називати "стандартом"). Завантажити шаблон для MODx . У цьому архіві знаходиться 3 папки і 3 файлу:
- головна сторінка з jQuery галереєю
- внутрішня сторінка з двох колонок з додатковою навігацією
- сторінка з однієї колонки на всю ширину шаблону
Логіка зберігання службових файлів шаблону проста:
в папці scripts знаходяться скрипти, images зберігає картинки шаблону, а директорія styles - CSS-файли.
HTML-файли, які також знаходяться в архіві, це наша розмітка HTML, необхідна для коректного відображення кожної з трьох видів сторінок:
- index.html (за замовчуванням) - головна сторінка,
- style-demo.html - внутрішня сторінка з двох колонок з додатковою навігацією,
- full-width.html - сторінка з однією колонкою на всю ширину шаблону.
Тепер можна почати інтеграцію дизайну.
Всі шаблони, необхідні для роботи з модекс, найкраще зберігати за адресою сайт.ру / assets / templates
Папку manager не чіпайте, а то не буде доступний широкому админка. Тому краще всього створити нову папку, назвати її як-небудь, і розпакувати архів туди.
Після розпакування йдемо в адмінку сайту, авторізовиваться і рухаємося: Елементи → Управління елементами → Шаблони
Тут ми і будемо управляти нашими шаблонами і при необхідності створювати нові. Для видалення або редагування необхідно натиснути на посилання з назвою шаблону.
Для початку давайте реалізуємо головну сторінку сайту. Тиснемо "новий шаблон" і заповнюємо:
- ім'я шаблону (можна російською мовою)
- опис (щоб не заплутатися, якщо шаблонів буде багато)
- код шаблону - html-код потрібного шаблону.
Так як ми зараз робимо шаблон для головної сторінки, то відкрийте файл index.html, який був в дизайні і скопіюйте весь код в це поле. Не забувайте зберігатися 
Ось приклад заповненого коду
І якщо ми зараз відкриємо сайт, то побачимо вот такой вот ужас
Нічого страшного не сталося, адже у нас в шаблоні прописані інші шляхи до стилів. Тому знову відкриваємо шаблон на редагування і виконуємо наступні дії:
- Прописуємо базовий URL для сайту (щоб не збивалися відносні шляхи). У тезі <head> </ head> прописуємо конструкцію <base href = "[(site_url)]" />
- Прописуємо шляху до шаблону (наприклад, assets / templates / default-design). Прописуйте саме так, як називаються папки на вашому хості
- Треба виправити всі шляхи в яких зустрічаються styles, scripts і images
Після цього зберігаємо шаблон і знову йдемо дивитися на сайт. Якщо всі шляхи були коректно змінені, то ви побачите дуже Симпатичненькая головну сторінку сайту.
В принципі, це все, з інтеграцією дизайну в MODx ми впоралися. Я довше це описував, ніж ви робили.
Як - все ?, запитаєте ви. А внутрішні сторінки також переписувати, чи що?
З впровадженням інших сторінок сайту поки не поспішайте - адже безліч разів переписувати ділянки коду не цікаво. Трохи пізніше (в наступному уроці) я розповім про таку штуку як "чанкі" - з ними інтеграція шаблону піде ще швидше.
Попередні уроки:
Як - все ?А внутрішні сторінки також переписувати, чи що?
